【実体験】Web経験ゼロから、1人でWebサービスを作れるようになるまでのロードマップ

こんにちは！
ねこじょーかー（[@nekojoker1234](https://twitter.com/nekojoker1234)）と申します。

「自分でWebサービスを作れたら、楽しいだろうな」と思ってWeb系のプログラミングを始めた、もしくはこれから始めたい人も多いのではないでしょうか？

私もその1人で、ゼロから勉強を初めて193日で[Lookmine](https://lookmine.herokuapp.com/)を完成させました。

ゼロから完成させて、1つ感じたことがあります。

それは、**何をどういう手順で勉強したら、Webサービスを作れるようになるのかが、どこにもまとまっていない**ということです。

- HTMLの勉強方法
- Rubyの勉強方法
- Railsの勉強方法

これらは、調べたらいくらでも出てきますよね。

Webサービスを作ろうと思ったら、いきなり「Railsの勉強から始めてみよう」という間違った発想になってしまいがちです。

そこで、具体的にどういう順番で勉強していくべきかについて、以下のことをまとめました。

- **ドットインストールはどんな順番で勉強するべきか？**
- **どんな書籍を使って勉強すればいいのか？**
- **実践的な練習ができる２つのサービスとは？**

この記事のとおりに学習を進めていけば、少なくとも[Lookmine](https://lookmine.herokuapp.com/)を作るくらいの技術力には達しているはずです。

ちなみに、この記事ではRubyonRailsを学習する手順をまとめているので、PHPなどは一切出てきません。

前置きはこれくらいにして、詳しく見ていきましょう。

##ドットインストールで基礎をさらっと学ぶ

**プログラミングの基礎知識については、ドットインストールで学ぶのが良いと思います。**

ドットインストール
https://dotinstall.com

ドットインストールは、無料の動画学習サイトで、コーディングしている様子を動画で見ながら、自分も同じようにコーディングして勉強していくことができるサービスです。

基本は無料ですが、一部は有料になっているので、**「月額980円」の課金が必要な場合もあります**。

「ちょっと高い」と感じる人もいるかもしれませんが、**ドットインストールは1ヶ月以内でだいたい卒業します**。

無料の男性ボイスも好みの声ではなく、女性ボイスにしたかったので、私は早々に課金しました。

ドットインストールでの実績はこんな感じです。

<img width="292" alt="スクリーンショット 2019-09-08 16.15.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/1419d738-a26a-2aa4-df0f-b5190b95ede9.png">

21日で約15時間ですね。

以下のレッスンを上から順番にやっておけば、基礎についてはひと通り大丈夫です。

まずは、**学習環境を整える準備**をしましょう。
使っているパソコンに合わせて、どちらかをやればOKです。
[HTML/CSSの学習環境を整えよう [Windows編]](https://dotinstall.com/lessons/basic_pcsetup_win_v2)
[HTML/CSSの学習環境を整えよう [macOS編]](https://dotinstall.com/lessons/basic_pcsetup_mac_v2)

次に、HTMLとCSSをさらっと学習します。
[はじめてのHTML](https://dotinstall.com/lessons/basic_html_v5)
[はじめてのCSS](https://dotinstall.com/lessons/basic_css_v5)

HTMLとCSSの基礎がわかったところで、実際に画面を作ってみましょう。
[実践！ウェブサイトを作ろう](https://dotinstall.com/lessons/website_html_v3)
[実践！スマートフォンサイトを作ろう](https://dotinstall.com/lessons/spsite_html)

実際に画面を作っても、ところどころ「この書き方ってなんだ？」というのが出てきているはずなので、以下のレッスンでさらに詳しく学習しましょう。
[詳解HTML 基礎文法編](https://dotinstall.com/lessons/basic_html_tags)
[詳解CSS 基礎文法編](https://dotinstall.com/lessons/basic_css_styles)

ここまでHTMLとCSSを学習した人は、「CSSって結構大変なんだな」と感じていることでしょう。
ですが、**面倒なCSSをフレームワークとして作った「Bootstrap」という素晴らしいものがあるので、初心者のうちはこれを使うと便利です**。
[Bootstrap 4入門](https://dotinstall.com/lessons/basic_twitter_bootstrap_v5)

もちろん、「俺はCSSでイチから実装するぜ！」という考えもいいのですが、それなりに学習コストが高いのと、今回の目的は「Webサービスを作る」なので、あまりおすすめはしません。
（正直なところ、私も深いところまでは理解できていません...）

次に、画面に動きをつけようと思うと、JavaScriptの学習は避けられません。
以下で基礎を学習しましょう。
[はじめてのJavaScript](https://dotinstall.com/lessons/basic_javascript_v4)
[詳解JavaScript 基礎文法編](https://dotinstall.com/lessons/basic_javascript_grammer)
[詳解JavaScript オブジェクト編](https://dotinstall.com/lessons/basic_javascript_objects)
[詳解JavaScript DOM編](https://dotinstall.com/lessons/basic_javascript_dom)

JavaScriptをもう少し使いやすくしたjQueryというものもあり、こちらも使いますので、合わせて覚えておきましょう。
[jQuery入門](https://dotinstall.com/lessons/basic_jquery_v2)

ここまできたら、ようやくRubyの勉強に入ります。
まずは、Rubyを勉強するための環境構築から行います。
[ローカル開発環境の構築 [Windows編]](https://dotinstall.com/lessons/basic_localdev_win_v2)
[ローカル開発環境の構築 [macOS編]](https://dotinstall.com/lessons/basic_localdev_mac_v2)

Rubyの基礎を学習しましょう。
[Ruby入門](https://dotinstall.com/lessons/basic_ruby_v3)


ようやくメインとなるRubyonRailsのレッスンまで来ました。
ここまでで、ドットインストールは終了です。
[Ruby on Rails 5入門](https://dotinstall.com/lessons/basic_rails_v3)

ちなみに、動画学習サービスとしてもう一つ、[Progate](https://prog-8.com/)というものが有名ですが、これは使ったことがないのでよくわかりません。

##書籍を買って理解を深める
ドットインストールをひと通り完了させても、正直なところあまり成長は感じませんでした。
（基礎ばかり勉強していたので当然かも知れませんが）

そこで、書籍を買って、改めて勉強をすることにしました。

###スラスラわかるHTML&CSSのキホン

<img width="328" alt="スクリーンショット 2019-09-08 17.01.25.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/907bfe64-592f-6f29-c718-02a5f4b0d2c7.png">

この本はタイトルの通り、HTMLとCSSの基本について解説している本ですが、**チュートリアル形式になっているため、とてもわかりやすいです。**

自分も一緒になってコーディングして、実際にWebサイトを作ることができるので、おすすめです。

一般的なWebサイトの作り方や、実践的な内容について詳しく学ぶことができました。
イラストも多くわかりやすいので、そこまで時間はかからずに終わると思います。

###Bootstrap4 フロントエンド開発の教科書

<img width="328" alt="スクリーンショット 2019-09-08 17.04.08.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/49412553-3ae1-faa3-21e3-dbd8874bbc34.png">

Bootstrapもよくわかっていなかったので、参考書を購入しました。

**これはチュートリアル形式ではなく、辞書的に使うものです。**

「スラスラわかるHTML&CSSのキホン」の勉強と並行して、「ふーん、そんな感じなんだ」という程度に読み流していました。

コードと実際の画面イメージが合わせて載っているので、実際にコードを書かなくてもイメージしやすかったです。
この後、Bootstrapを使用して開発を進めるときに、辞書として使っていました。

ネットで検索すればいくらでも出てくるので、**購入は必須ではありません。**

###プロを目指す人のためのRuby入門

<img width="328" alt="スクリーンショット 2019-09-08 17.03.59.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/7541c442-5c6c-02e7-73b4-49c9d4ce3cc5.png">

Rubyについて詳しく書かれている参考書ですが、これはものすごいわかりやすいです。

**この1冊があれば、他のRubyの参考書はいりません。**

わかりやすく、かつ網羅的に書かれていて、何度も読み返したい参考書です。

本当は読みながら自分で書くと効果がグッと上がりますが、それなりにページ数があるため、とりあえずは読む程度にしておくことをオススメします。

わからなくなったら、この本に戻って復習しましょう。

###基礎RubyonRails

<img width="328" alt="スクリーンショット 2019-09-08 17.03.34.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/8df757c6-a8c8-00f8-1f0f-b863104bba5f.png">

表紙は少しイマイチですが、ものすごい良書です。

チュートリアル形式で、ブログ投稿サイトを作っていきます。

**中身の解説が本当にわかりやすく書いており、良書すぎて私は2周しました。**

この参考書の内容が全く理解できない場合は、この先のWebプログラミング学習は諦めたほうがいいかもしれません。

それくらいわかりやすいです。

分厚いですが、最初から最後までやり通すことをオススメします。
Webサービス開発の全体像も、ここで掴むことができます。

###現場で使える RubyonRails5速習実践ガイド

<img width="328" alt="スクリーンショット 2019-09-08 17.03.48.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/ed574b08-8198-5e17-e9ff-5a38b2198754.png">

これもひと通り学習しましたが、**正直わかりにくいのでおすすめできません。**

この参考書のいいところを挙げるなら、「Slim」を使用している点です。

Railsは基本的に「erb」という拡張子のファイルを修正していくのですが、記述方法が結構だるいです。

そこで、**erbを簡潔に記述できるようにしたのが「Slim」というもので、圧倒的に書きやすくなりますし、見た目もすっきりするので、Slimは絶対に使うべきです。**

Slimを詳しく知りたい人はこちら
https://github.com/slim-template/slim/blob/master/README.jp.md

###RubyonRails5アプリケーションプログラミング
<img width="328" alt="スクリーンショット 2019-09-08 17.04.16.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/487218/e6253b1c-c39a-2edc-1731-5e5f472ea2e8.png">

この本は中身を見ずに買ったのですが、チュートリアル形式ではなく、文法や部分的な使い方を集めた本になっており、ほとんど読まずに終わりました。

中身も少し古い感じがしたので、あまりおすすめできません。

###書籍の勉強で気をつけるべきこと

**書籍の勉強で気をつけるべきは、始める前に正誤表をチェックする、ということです。**

正誤表というのは、「本の中にこれだけ間違いがあるから、自分で直してね」という内容のリストです。

ここをチェックしないで勉強を進めていくと、間違って覚えてしまうだけでなく、「何でこういう結果になるのだろう？」と無駄に考えてしまう可能性があります。

「書籍名＋正誤表」とかで調べると出てくると思うので、事前にチェックしておきましょう。

##実践的な練習をする
ドットインストールと書籍での学習をクリアした人は、もう基本的な知識は問題ありません。

あとは、実践的な練習をするだけです。

###Techpit

[Teckpit](https://www.techpit.jp/)とは、リアルに１つのWebサービスを開発することを疑似体験できるサービスです。

「Qiitaのような記事形式の参考書で勉強できる」という表現が正しいですかね。

チュートリアル形式で、実践的な内容を勉強することができます。

以下のレッスンを購入しましたが、これは本当におすすめできます。
[【Ruby on Rails 5】Instagram風簡易SNSアプリを作ってみよう！](https://www.techpit.jp/courses/enrolled/378648)

**書籍には載っていなかった、実践的なテクニックや実装方法が盛りだくさんで、非常に参考になりました。**

値段も安くはないですが、2倍、3倍の値段を出す価値があると思います。

###Udemy

Udemyは動画で勉強するサービスですが、**アプリ開発手順だけでなく、本番環境を用意して、リリースまでの手順を勉強することができます。**

Railsの勉強は、以下のレッスンが最強でした。

[はじめての Ruby on Rails入門-RubyとRailsを基礎から学びWebアプリケーションをネットに公開しよう](https://www.udemy.com/the-ultimate-ruby-on-rails-bootcamp/)

普段は15,000円くらいするのですが、一定期間（1ヶ月くらい？）ごとにセールを実施していて、1,500円くらいまで値下がりします。

**値下げ時期まで待ってから、購入しましょう。**
間違っても定価では買わないようにご注意ください。

##自分でWebサービスを作ってみる
ドットインストール、書籍での勉強、Teckpit、Udemyを乗り越えた人は、もう1人でWebサービスを開発できるレベルまで来ています。

何か自分がほしいものを考えて、実際にゼロから作ってみましょう。

その中で、「あれ、これってどうやるんだっけ？」というのが必ず出てきますが、大丈夫です。

これまで勉強した内容のどこかに、間違いなくヒントがあります。
**「わからない→調べる→書いてみる→動くものができる」というサイクルを高速に回し、徐々に覚えていきましょう。**

この手順で、私は[Lookmine](https://lookmine.herokuapp.com/)というWebサービスを立ち上げるまでになりました。

正確に記録していなかったので参考値ですが、この記事に書いている内容を約100時間で終わらせて、[Lookmine](https://lookmine.herokuapp.com/)の開発で約100時間、合計で約200時間といった感じですかね。

1人でWebサービスを立ち上げたいなと思っている人に、少しでも参考になれば幸いです。

## あわせて読みたい

[HTMLもわからない初心者が、独学で「投稿型SNSサービス」を作ったって本当？【193日間の死闘】](https://qiita.com/nekojoker/items/2497b4f81ffd1cd7025c)

運営している PlayFab 専用ブログ
https://playfab-master.com