こんにちは！
ねこじょーかー（@nekojoker1234）と申します。
「自分でWebサービスを作れたら、楽しいだろうな」と思ってWeb系のプログラミングを始めた、もしくはこれから始めたい人も多いのではないでしょうか？
私もその1人で、ゼロから勉強を初めて193日でLookmineを完成させました。
ゼロから完成させて、1つ感じたことがあります。
それは、何をどういう手順で勉強したら、Webサービスを作れるようになるのかが、どこにもまとまっていないということです。
- HTMLの勉強方法
- Rubyの勉強方法
- Railsの勉強方法
これらは、調べたらいくらでも出てきますよね。
Webサービスを作ろうと思ったら、いきなり「Railsの勉強から始めてみよう」という間違った発想になってしまいがちです。
そこで、具体的にどういう順番で勉強していくべきかについて、以下のことをまとめました。
- ドットインストールはどんな順番で勉強するべきか？
- どんな書籍を使って勉強すればいいのか？
- 実践的な練習ができる２つのサービスとは？
この記事のとおりに学習を進めていけば、少なくともLookmineを作るくらいの技術力には達しているはずです。
ちなみに、この記事ではRubyonRailsを学習する手順をまとめているので、PHPなどは一切出てきません。
前置きはこれくらいにして、詳しく見ていきましょう。
##ドットインストールで基礎をさらっと学ぶ
プログラミングの基礎知識については、ドットインストールで学ぶのが良いと思います。
ドットインストール
https://dotinstall.com
ドットインストールは、無料の動画学習サイトで、コーディングしている様子を動画で見ながら、自分も同じようにコーディングして勉強していくことができるサービスです。
基本は無料ですが、一部は有料になっているので、「月額980円」の課金が必要な場合もあります。
「ちょっと高い」と感じる人もいるかもしれませんが、ドットインストールは1ヶ月以内でだいたい卒業します。
無料の男性ボイスも好みの声ではなく、女性ボイスにしたかったので、私は早々に課金しました。
ドットインストールでの実績はこんな感じです。
21日で約15時間ですね。
以下のレッスンを上から順番にやっておけば、基礎についてはひと通り大丈夫です。
まずは、学習環境を整える準備をしましょう。
使っているパソコンに合わせて、どちらかをやればOKです。
HTML/CSSの学習環境を整えよう [Windows編]
HTML/CSSの学習環境を整えよう [macOS編]
次に、HTMLとCSSをさらっと学習します。
はじめてのHTML
はじめてのCSS
HTMLとCSSの基礎がわかったところで、実際に画面を作ってみましょう。
実践！ウェブサイトを作ろう
実践！スマートフォンサイトを作ろう
実際に画面を作っても、ところどころ「この書き方ってなんだ？」というのが出てきているはずなので、以下のレッスンでさらに詳しく学習しましょう。
詳解HTML 基礎文法編
詳解CSS 基礎文法編
ここまでHTMLとCSSを学習した人は、「CSSって結構大変なんだな」と感じていることでしょう。
ですが、面倒なCSSをフレームワークとして作った「Bootstrap」という素晴らしいものがあるので、初心者のうちはこれを使うと便利です。
Bootstrap 4入門
もちろん、「俺はCSSでイチから実装するぜ！」という考えもいいのですが、それなりに学習コストが高いのと、今回の目的は「Webサービスを作る」なので、あまりおすすめはしません。
（正直なところ、私も深いところまでは理解できていません...）
次に、画面に動きをつけようと思うと、JavaScriptの学習は避けられません。
以下で基礎を学習しましょう。
はじめてのJavaScript
詳解JavaScript 基礎文法編
詳解JavaScript オブジェクト編
詳解JavaScript DOM編
JavaScriptをもう少し使いやすくしたjQueryというものもあり、こちらも使いますので、合わせて覚えておきましょう。
jQuery入門
ここまできたら、ようやくRubyの勉強に入ります。
まずは、Rubyを勉強するための環境構築から行います。
ローカル開発環境の構築 [Windows編]
ローカル開発環境の構築 [macOS編]
Rubyの基礎を学習しましょう。
Ruby入門
ようやくメインとなるRubyonRailsのレッスンまで来ました。
ここまでで、ドットインストールは終了です。
Ruby on Rails 5入門
ちなみに、動画学習サービスとしてもう一つ、Progateというものが有名ですが、これは使ったことがないのでよくわかりません。
##書籍を買って理解を深める
ドットインストールをひと通り完了させても、正直なところあまり成長は感じませんでした。
（基礎ばかり勉強していたので当然かも知れませんが）
そこで、書籍を買って、改めて勉強をすることにしました。
###スラスラわかるHTML&CSSのキホン
この本はタイトルの通り、HTMLとCSSの基本について解説している本ですが、チュートリアル形式になっているため、とてもわかりやすいです。
自分も一緒になってコーディングして、実際にWebサイトを作ることができるので、おすすめです。
一般的なWebサイトの作り方や、実践的な内容について詳しく学ぶことができました。
イラストも多くわかりやすいので、そこまで時間はかからずに終わると思います。
###Bootstrap4 フロントエンド開発の教科書
Bootstrapもよくわかっていなかったので、参考書を購入しました。
これはチュートリアル形式ではなく、辞書的に使うものです。
「スラスラわかるHTML&CSSのキホン」の勉強と並行して、「ふーん、そんな感じなんだ」という程度に読み流していました。
コードと実際の画面イメージが合わせて載っているので、実際にコードを書かなくてもイメージしやすかったです。
この後、Bootstrapを使用して開発を進めるときに、辞書として使っていました。
ネットで検索すればいくらでも出てくるので、購入は必須ではありません。
###プロを目指す人のためのRuby入門
Rubyについて詳しく書かれている参考書ですが、これはものすごいわかりやすいです。
この1冊があれば、他のRubyの参考書はいりません。
わかりやすく、かつ網羅的に書かれていて、何度も読み返したい参考書です。
本当は読みながら自分で書くと効果がグッと上がりますが、それなりにページ数があるため、とりあえずは読む程度にしておくことをオススメします。
わからなくなったら、この本に戻って復習しましょう。
###基礎RubyonRails
表紙は少しイマイチですが、ものすごい良書です。
チュートリアル形式で、ブログ投稿サイトを作っていきます。
中身の解説が本当にわかりやすく書いており、良書すぎて私は2周しました。
この参考書の内容が全く理解できない場合は、この先のWebプログラミング学習は諦めたほうがいいかもしれません。
それくらいわかりやすいです。
分厚いですが、最初から最後までやり通すことをオススメします。
Webサービス開発の全体像も、ここで掴むことができます。
###現場で使える RubyonRails5速習実践ガイド
これもひと通り学習しましたが、正直わかりにくいのでおすすめできません。
この参考書のいいところを挙げるなら、「Slim」を使用している点です。
Railsは基本的に「erb」という拡張子のファイルを修正していくのですが、記述方法が結構だるいです。
そこで、erbを簡潔に記述できるようにしたのが「Slim」というもので、圧倒的に書きやすくなりますし、見た目もすっきりするので、Slimは絶対に使うべきです。
Slimを詳しく知りたい人はこちら
https://github.com/slim-template/slim/blob/master/README.jp.md
###RubyonRails5アプリケーションプログラミング
この本は中身を見ずに買ったのですが、チュートリアル形式ではなく、文法や部分的な使い方を集めた本になっており、ほとんど読まずに終わりました。
中身も少し古い感じがしたので、あまりおすすめできません。
###書籍の勉強で気をつけるべきこと
書籍の勉強で気をつけるべきは、始める前に正誤表をチェックする、ということです。
正誤表というのは、「本の中にこれだけ間違いがあるから、自分で直してね」という内容のリストです。
ここをチェックしないで勉強を進めていくと、間違って覚えてしまうだけでなく、「何でこういう結果になるのだろう？」と無駄に考えてしまう可能性があります。
「書籍名＋正誤表」とかで調べると出てくると思うので、事前にチェックしておきましょう。
##実践的な練習をする
ドットインストールと書籍での学習をクリアした人は、もう基本的な知識は問題ありません。
あとは、実践的な練習をするだけです。
###Techpit
Teckpitとは、リアルに１つのWebサービスを開発することを疑似体験できるサービスです。
「Qiitaのような記事形式の参考書で勉強できる」という表現が正しいですかね。
チュートリアル形式で、実践的な内容を勉強することができます。
以下のレッスンを購入しましたが、これは本当におすすめできます。
【Ruby on Rails 5】Instagram風簡易SNSアプリを作ってみよう！
書籍には載っていなかった、実践的なテクニックや実装方法が盛りだくさんで、非常に参考になりました。
値段も安くはないですが、2倍、3倍の値段を出す価値があると思います。
###Udemy
Udemyは動画で勉強するサービスですが、アプリ開発手順だけでなく、本番環境を用意して、リリースまでの手順を勉強することができます。
Railsの勉強は、以下のレッスンが最強でした。
はじめての Ruby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう
普段は15,000円くらいするのですが、一定期間（1ヶ月くらい？）ごとにセールを実施していて、1,500円くらいまで値下がりします。
値下げ時期まで待ってから、購入しましょう。
間違っても定価では買わないようにご注意ください。
##自分でWebサービスを作ってみる
ドットインストール、書籍での勉強、Teckpit、Udemyを乗り越えた人は、もう1人でWebサービスを開発できるレベルまで来ています。
何か自分がほしいものを考えて、実際にゼロから作ってみましょう。
その中で、「あれ、これってどうやるんだっけ？」というのが必ず出てきますが、大丈夫です。
これまで勉強した内容のどこかに、間違いなくヒントがあります。
「わからない→調べる→書いてみる→動くものができる」というサイクルを高速に回し、徐々に覚えていきましょう。
この手順で、私はLookmineというWebサービスを立ち上げるまでになりました。
正確に記録していなかったので参考値ですが、この記事に書いている内容を約100時間で終わらせて、Lookmineの開発で約100時間、合計で約200時間といった感じですかね。
1人でWebサービスを立ち上げたいなと思っている人に、少しでも参考になれば幸いです。
あわせて読みたい
HTMLもわからない初心者が、独学で「投稿型SNSサービス」を作ったって本当？【193日間の死闘】
運営している PlayFab 専用ブログ
https://playfab-master.com