fv17の日記 - Coding Every Day

Webエンジニアの備忘用ブログです。主にWeb界隈の技術に関して書いています。

プログラミング未経験者がRailsでWebアプリケーションを作れるようになるまでの勉強方法

某有名SI企業から、Web界隈のエンジニアに転職しました。Web開発は門外漢だったため、独学およびスクールに通い、下記のようなアプリを作成しました。

 

ペットと宿泊できる宿検索

https://wow-together.herokuapp.com/

 

そこで、私が試行錯誤した「Webアプリケーションの開発未経験者が、ゼロから一人で作れるようになるための勉強方法」をまとめてみました。HTMLをよく理解しないままRailsの書籍に手を出して途中で挫折したりするなど苦労したので、参考になれば。

 

対象読者

・プログラミング未経験で、これから自分のWebアプリケーションを作りたい方

・プログラミング未経験で、これからエンジニアとしての就職を目指している方

・Webエンジニアに転職したいSIerのエンジニア

  

目次

ステップ1:Webアプリケーションの開発で使われる技術を知る

ステップ2:フロントサイドの技術を学ぶ - HTML、CSSJavaScript

ステップ3:サーバーサイドの技術を学ぶ - RubyRailsSQL

コラム1:プログラミングのスクールには通うべきか

コラム2:さらに優秀なエンジニアになるために

 

ステップ1:Webアプリケーションの開発で使われる技術を知る

 

Webアプリケーションを作るためには、次の技術を学ぶ必要があります。

 

・HTMLなどのフロントサイドの技術

Railsなどのサーバーサイドの技術

 

フロントサイドは、今皆さんが見ている画面に使われている技術です。より具体的には、

 

・ブラウザ上に文字や画像を表示を担当するHTML

・表示された文字や画像の配置や装飾(文字のサイズや色など)を担当するCSS

・Web画面に動きを付けることなどを担当するJavaScript 

 

一方、サーバーサイドは、その名の通りWebサーバーで動作するプログラミングのことです。と言ってもよく分からないと思いますので、少し長くなりますが具体例を見てみましょう。アマゾンで書籍を検索する時、Webアプリケーションは下記のような動作をしています。

 

1.アマゾンの検索欄に調べたい商品名、ここでは「Rails入門」とする、を入力し検索ボタンを押します。

2.Webブラウザ(※1)は、Webサーバー(※2)に「Rails入門」という書籍ってある?と問い合わせを行います。

3.Webサーバーは、その問い合わせに対しデータベース(※3)の書籍データを検索し、「Rails入門」に該当する書籍がないかを調べます。

4.Webサーバーは、調べた結果をWebブラウザに返します。

5.Webブラウザが受け取った検索結果を表示することで、私たちユーザーは「Rails入門」の検索結果を画面上で見ることができます。

 

※1

Webブラウザはあなたが今使っています。ChromeSafariやEdgeなど、Webを見るためのアプリケーションのことです。

※2

Webサーバーって何?という方は、「アマゾンが持っている超高性能のでっかいパソコン」をイメージしてください。

※3

データベースって何?という方は、電子の世界における本棚をイメージしてください。Webサーバーが本棚の前で、「Rails入門」という書籍を探しているイメージです。

 

上記の流れの中で、サーバーサイドの技術は主に3.と4.を担います。この部分を担当するのがRailsです。実際にはRailsはフロント側も含んでいますが、それはRailsを学ぶことで理解できてくるので、最初の理解はこれで大丈夫です。さて、Railsを学ぶ場合、具体的には下記のような知識が必要です。

 

・書籍データを検索するなどの処理を記述するプログラミング言語であるRuby

Rubyを用いて、より簡単にWeb開発するためのフレームワークであるRails

・データベースの操作、例えばデータの検索など、を行うためのSQL

 

まとめると、Webアプリケーションを開発するためには下記の技術を学ぶ必要があります。

 

・HTML、CSSJavaScriptなどのフロント側の技術

RubyRailsSQLなどのサーバー側の技術

 

ステップ2:フロントサイドの技術を学ぶ - HTML、CSSJavaScript

さて、では早速学んでいきますが、

 

・何を

・どの順番で

・どうやって学ぶか

 

が大事です。何を学ぶかについてはすでに述べたので、順番と学び方にフォーカスします。基礎を学んで、それを固めた後に応用を学んで行きましょう。

 

手順2-1.HTMLとCSSを学ぶ

 

Railsに手を出す前に、HTMLやCSSなどのフロント側を知らないと何もできません。先ほどのアマゾンの例にもあったように、Webアプリケーションはまずフロントがあり、サーバーに問い合わせをするという流れが基本になります。そのため、初めにフロントの技術を学びます。と言っても、それほど時間は掛かりません。復習込みで15〜30時間前後で終わると思います。

 

おすすめは、Progateです。

 

prog-8.com

 

HTMLやCSSについては入門書籍が大量に出回っていますがProgateに勝るものはありません。Web上でハンズオン形式、解説→演習問題で実際に書くという流れで、エディタなどの環境構築準備をすることなく、すぐに始めることができます。いくつかのレッスンは無料なので、試しにやってみて良いと感じれば1ヶ月だけ課金して一気にマスターしてしまいましょう。HTML/CSSを上級まで全てやります。道場コースで詰まらずにスラスラできるようになるのが完了の目安になります。

 

課金したくないという場合には、ドットインストールがおすすめです。

https://dotinstall.com/lessons

 

手順2-2.JavaScriptを学ぶ

 

JavaScriptについては、一旦スキップしても問題ありません。Railsの入門講座ではJavaScriptを使わず、動きのある画面を作らないことが多いからです。Railsを一通り学んでからでも良いでしょう。とはいうものの、Railsをやるならばすぐに必要になる技術ではあるので、学ぶ余裕がある場合は先に学んでしまいます。ドットインストールがおすすめです。

https://dotinstall.com/lessons

 

基本的な文法を学べることに加えて、Web画面を動的に書き換えるDOMやイベントなどの概念を、簡単なアプリを作成しながら学ぶことができます。具体的には、「HTML/CSSの学習環境を整えよう [Windows/Mac編] (全4回)」で自分のパソコンに開発環境を整えた後に、「JavaScript入門(全24回)」をやります。その後、xxxを作ろう系でいくつか演習すると、なぜJavaScriptを学ぶかが見えてくると思います。プログラミングの未経験者であっても週末1日も使えば終わる分量です。

 

なお、2018年6月現在、ProgateのJavaScriptレッスンはオススメしません。理由は、基礎的な文法しか学ぶことができないからです。そのため、結局JavaScriptで何ができるのか?何のために学ぶのか?を初学者には理解しづらいです。ProgateのJavaScriptのレッスンについては今後に期待しましょう。

 

ステップ3:サーバーサイドの技術を学ぶ - RubyRailsSQL

いよいよサーバーサイドの技術です。

手順3-1.Rubyを学ぶ

まだRailsを学ばないのかと不満が聞こえてきます。プログラミング経験者ならば、この手順はスキップ可能です。理由は、Railsの入門講座にはだいたいRubyの簡単な文法解説があるからです。

 

しかし、プログラミング未経験者はスキップ不可です。理由は、上記のRubyの説明は、プログラミング経験者に対する簡素なものであったり、そもそもRailsがメインであるため演習の量が少ないです。多くの場合にお菓子のおまけ程度のもので、未経験者ではスキップしてしまうと、Rails講座なのにRubyが分からずに詰まってしまい挫折する可能性が高まります。

 

水泳で背泳ぎの練習をする前に、バタ足(キック)の練習するのと同じです。クロールができる人はバタ足はある程度こなしたら、すぐに腕や手の動きを練習するでしょう。しかし、生まれて初めて泳ぎ方を学ぶ人はバタ足から練習します。Rubyを全く知らずにRailsを学ぶのは、バタ足を知らずに背泳ぎやクロールで手の動きを学ぶのと同じです。推力が足りず、手と足の動きがバラバラになり溺れます。

 

さて、学び方ですが、おすすめはProgateです。配列や繰り返し処理に触れることで、プログラミングとは何か、アルゴリズムってこういうものなんだということをを理解できるはずです。2、3回復習してその感覚を身につけてしまいましょう。

 

prog-8.com

 

例によって、課金したくない場合はドットインストールがおすすめ。 

https://dotinstall.com/lessons

 

手順3-2.Railsを学ぶ

ついにRailsです。プログラミング未経験ならば、まだまだ感覚をつかむためにも、まずはProgateのRailsレッスンを全部やることをオススメします。この後に行うRailsチュートリアルにおいても、Progateを事前にやることが推奨されています。

 

prog-8.com

 

上記完了後やプログラム経験者は、Railsチュートリアルに取り組みましょう。

 

railstutorial.jp

 

Railsチュートリアルでは、これまで学んだフロントサイドやサーバーサイドの知識を総動員してWebアプリケーションを開発していきます。ここまでのステップを丁寧にやってきたならば、程よい復習と新たな知識を得ることができます。実際の企業でのWebアプリケーション開発に近い形式で開発し、Rails以外の周辺技術にも触れることができるため大いにモチベートされるはずです。

 

ただ、その分これまでのステップとは難易度が飛躍的に上がるため、躓くことが多くなります。チュートリアルの中でも「ググれ!」と号令されていますが、結構ハマります。具体的には、

・一番最初のRailsのインストールができずに数時間何もできない

・言われた通りにプログラミングを書いたけどエラー画面のまま数時間が経過した...

などです。これについては対策があるのでコラム1.を読んでいただければ。

 

ここまででRailsの基礎の勉強は終わりです。冒頭にあげた私のペット宿泊プラン検索のWebアプリケーションもこのタイミングで作成しました。現在は、中級レベルの書籍等で勉強中で、どんどん機能追加して行く予定です。

 

コラム1:プログラミングのスクールには通うべきか

プログラミング経験者は通う必要はありません。プログラミング未経験者にとっては通う価値がある、というのが私の回答です。

 

私はTECHACADEMYのWebアプリケーションコースに通いましたが、Railsチュートリアルに近い内容の講義になっており、プログラミング経験者、実務経験者であれば私が書いたステップをきちんとやれば通う必要はないでしょう。その分のお金を、高性能パソコン購入やWebアプリケーション開発の学習が完了し、自分へのご褒美に海外旅行に行く!などに充てることをおすすめします。

 

一方で、通って良かったと思う部分もあり、特にプログラミング未経験の方々にとっては意味のある部分が多いにあるため紹介したいと思います。

 

プログラミングスクールに通う意味

プログラミングスクールに通う意味は次の3つです。

・独学よりも就職しやすい。

・疑問点をすぐに解消でき、挫折せず継続して学びやすい。

・未知の技術のキャッチアップ速度が速い。

 

まず、独学よりも就職しやすいこと。未経験者の場合、企業が採用する際には、この人はプログラミングに向いているのか、できるようになるのか?という部分に着目します。スクールに通い、スクール経由で就職・転職活動をした場合、そのスクールの課程を修了しているという実績があり、また最終課題としてプログラミングのコンテスト的なものが存在するため、オリジナルのWebアプリケーションを制作実績として残すこともできます。また、各スクールには就職斡旋サービスが存在するため、それを使えばスクールのお墨付きをもらえて就職活動ができ、スクールを出たばかりのエンジニア新入生のレベルでもポテンシャル採用したい、という企業にも出会えるというメリットがあります。

 

次に、疑問点をすぐに解消でき、挫折せず継続して学びやすいです。ググれば大抵の問題は解消し、英語を読めればほぼ解決できる世の中になりました。しかし、ハマった場合って辛いんですよね。ひたすら調べて試行錯誤しても解決しない場合、半日ぐらい吹き飛ぶことがあります。これが何回も繰り返されるようだと、続くものも続かずに挫折します。各スクールでは常時質問が可能なチャット対応や週1〜2回ほどのメンター面談があり、詰まった所や疑問点をすぐに解消することができます。チャットは実際の開発現場で使われているSlackが多く、それの使い方に慣れることができる点も良いです。独学の場合、teratailやyahoo知恵袋で質問したりもできますが即時コミュニケーションができないため非効率です。回答無しのまま閉じられてる、回答はあるけど1ヵ月後、というのを結構目にしたり、私も1回経験しましたが、正直時間の無駄感が凄いので使わなくなりました。

 

最後に、未知の技術のキャッチアップ速度が速い、です。二つ目の疑問点をすぐ解消できるというメリットと近いです。最終的にオリジナルのWebアプリケーションを開発をしていると、講座やチュートリアル中に出会わなかった技術が必要になる時があります。Amazonなどのサイトを見た時に、こういう動きや処理があって真似したいけど、それってどうやってやるの?なんていう技術?どのライブラリ?という疑問が湧いた時です。こういう場合、うまい具合に検索して辿り着ければいいのですが、そもそもどう検索すればいいか分からない、検索してそれっぽい技術にたどりついたが何かが違う...と私はなりました。このような場合にチャットや面談を通して必要な技術をすぐに教えてもらえるのが非常に効率的で助かりました。

 

以上です。大きく分けて、未経験エンジニアの就職の容易さUPと、勉強の効率性や継続性のUPですかね。独学が得意であったり、周囲に質問する師匠的な存在がいる場合、あるいは未経験エンジニアとして就職したいが独学でWebアプリケーションを制作し、それをGitHub上で公開しつつ、Wantedly等で未経験エンジニアとして雇ってくれるところを自力で探すという場合は通う必要ないかもしれません。

 

プログラミングスクールに通う際の注意点

なお、通うことを検討する場合の注意点は、全く未経験でいきなり「Webアプリケーションコース」などを受講しないでください。RailsがメインでHTMLなど周辺技術の解説や演習はかなり簡易なものなので、中の人に聞きましたが途中で挫折したり、最後まで終わらずに受講期間終了となるというパターンが多いです。受講生のグループチャットにおいて、3ヵ月間毎日勉強してるけど終わりません、Progateやってみたらスクールより分かりやすかったです、などという発言をしている方もいました。全くの未経験者には明らかに難易度が高いので挫折したり、基礎を勉強しなおす必要があるため、勉強効率が非常に悪いです。しっかり準備してから受講しましょう。筋トレするのにウォーミングアップするのと全く同じです。

 

そのため、まずは私のステップをやってみることが大事です。Railsチュートリアルに入る前、もしくはRailsチュートリアルを試しにやってみて難しすぎる場合に、スクールに入りましょう。まったく未経験者でも大丈夫!とりあえず始めよう!などと書かれている場合も、Progateを一通りやった方が理解が早く身につきやすいです。なお、これだけProgateを推薦している理由は、私がほとんどのコースを実際にやってみて、めちゃくちゃ分かりやすかったからです。中の人に一切知り合いいないんですが、マジでおすすめです。

 

また、スクール高すぎて死にそう...もう少し安くならないのか、という場合はRailsチュートリアルが公式で下記3つをサポートしているのでそちらでも良いかもです。投げっぱなしで申し訳ないんですが、評判等については私は知らないので、ググってみてください。

 

・動画で学ぶ 29,800円

・動画 + 質問で学ぶ 54,630円

・ スクールで学ぶ 150,000円

Ruby on Rails チュートリアル:実例を使って Rails を学ぼう

 

コラム2:さらに優秀なエンジニアになるために

 後日書きます。