個人的にオススメするWebアプリを作るまでの勉強方法（初心者向け）

#はじめに
この記事は
**「プログラミングのこと分かんないよー！」**
**「でもWebサービス作れたらいいなー！」**
**「自分で勉強始めたいけど、そもそも何が分からないのかが分からない…」**
というフェーズの方を対象にした記事です。

初めての投稿なので稚拙な文章だとは思いますが、お手柔らかにお願いいたします。

追記：
エンジニア転職してから1年ぐらい立ったタイミングで、noteにもうちょっと詳しくいろいろ書きました。
良ければそちらもご覧ください！
[【50万円払う前に】WEBエンジニアに転職する方法【まとめ】](https://note.com/fukudanotanka/n/ne409bf5bbeff)


#なぜこの記事を書くのか
Webサービスを作るまでには色々な知識が必要です。
一つ一つの情報はインターネットで見つけられるのですが、
**「まずはじめに何を勉強すればいいのか？」**
**「どういった流れで勉強を進めていくべきなのか？」**
といった勉強の流れは自分自身で考えなければならなかったように感じます。

ですので今回の記事では、
**「プログラミング」の「プ」の字も知らない人**が、
**Webサービスを作れるようになる**ためには、
**どういった順序で、何をどうやって勉強すればいいのか**、を記載しようと思います。
「勉強始めようと思っているけど何から始めればいいのか悩んでいる」という方の手助けに少しでもなれたら嬉しいです。

（※自分自身まだまだ駆け出しエンジニアなので、もっといい勉強方法知っている方いればコメントいただければ嬉しいです！）
~~「っていうかそもそもQiita見てるユーザーって時点で、そういったフェーズ抜け出してるんじゃね？」っていう部分ありますがそこらへんは多めに見てください。~~

##①そもそもWebサービスを作るには何が必要なのか
まずはWebサービスを作るためには何が必要になってくるのか考えてみましょう。
**Webサービス**って色々ありますよね？　TwitterやFacebook、食べログにAirbnb、
この世の中にはホントにたくさんのWebサービスがあります。

しかも各Webサービスによって出来ることや提供してくれている機能は違います。
お気に入りのご飯屋さんを探せたり、友達とコミュニケーションをとったり、
あるいは転職先を見つけたり、動画や写真を加工してくれるものなどもあります。

そんな無数に存在するWebサービスなんですが、実は共通することがあるのです！
それは**Webブラウザを使用している**ということです。

「当たり前やん」と思うかもしれませんが、もう少し詳細にお伝えすると、
ユーザーが**Webブラウザ**を用いることにより使用できる**Webアプリ**というものを、**プログラミングして**作っているのです。

ここで大事になってくるのが、
**スマホアプリ**（インストールしているゲームアプリや音楽アプリなど）や、
**Webブラウザ**を使用しないパソコンソフト（エクセルやパワーポイントなど）とは、
**必要になる知識が少し変わってくる**、ということです。
まずはここを把握しておくことが個人的には重要かなと思います。

なのでこれからは、
**「Webブラウザ」**とはなにか
**「Webアプリ」**とはどういうものか、
**「プログラミング」**とはどうやって行えば良いのか
を勉強するオススメの方法を記載していきたいと思います！

##②プログラムって何？Webってどういう仕組み？
**「コンピューターってなんですか？」**
**「プログラムってなんですか？」**
**「Webってなんですか？」**
**「ブラウザってなんなんですか？」**

こういった質問って改めて聞かれると答えるのって難しくないですか？
少なくとも僕は完璧には答えられる自信ないですし、完璧に答えられる人ってそんなに多くないと思います。

でもこの辺りの話って、Webサービスを作るにあたって、すごい**土台の部分の領域の話**なんです。
かつ**流行り廃りがそこまで多くない**ので、**長い間使える知識**になるんです。
（後からプログラミングの仕方の勉強方法も記載しますが、実は意外とプログラミング方法は流行り廃りが激しいのです…）

基礎固めとして、まずはここから勉強することをオススメします！


**「プログラムってなんですか？」**のオススメ勉強方法
→[書籍：プログラムはなぜ動くのか 第2版　　知っておきたいプログラムの基礎知識](https://www.amazon.co.jp/%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AF%E3%81%AA%E3%81%9C%E5%8B%95%E3%81%8F%E3%81%AE%E3%81%8B-%E7%AC%AC2%E7%89%88-%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%AE%E5%9F%BA%E7%A4%8E%E7%9F%A5%E8%AD%98-%E7%9F%A2%E6%B2%A2-%E4%B9%85%E9%9B%84-ebook/dp/B00HRN7VK0/ref=sr_1_1?s=digital-text&ie=UTF8&qid=1552507300&sr=1-1&keywords=%E3%83%97%E3%83%AD%E3%82%B0%E3%83%A9%E3%83%A0%E3%81%8C%E3%81%AA%E3%81%9C)

**「コンピューターってなんですか？」**のオススメ勉強方法
→[書籍：コンピュータはなぜ動くのか　知っておきたいハードウエア＆ソフトウエアの基礎知識](https://www.amazon.co.jp/%E3%82%B3%E3%83%B3%E3%83%94%E3%83%A5%E3%83%BC%E3%82%BF%E3%81%AF%E3%81%AA%E3%81%9C%E5%8B%95%E3%81%8F%E3%81%AE%E3%81%8B-%E7%9F%A5%E3%81%A3%E3%81%A6%E3%81%8A%E3%81%8D%E3%81%9F%E3%81%84%E3%83%8F%E3%83%BC%E3%83%89%E3%82%A6%E3%82%A8%E3%82%A2%EF%BC%86%E3%82%BD%E3%83%95%E3%83%88%E3%82%A6%E3%82%A8%E3%82%A2%E3%81%AE%E5%9F%BA%E7%A4%8E%E7%9F%A5%E8%AD%98-%E7%9F%A2%E6%B2%A2%E4%B9%85%E9%9B%84-ebook/dp/B00GSHI02Y/ref=pd_sim_351_1/357-7087124-8222239?_encoding=UTF8&pd_rd_i=B00GSHI02Y&pd_rd_r=d3848b17-45ca-11e9-9d1d-ff37577c5ff7&pd_rd_w=5oZnV&pd_rd_wg=eRSaZ&pf_rd_p=b88353e4-7ed3-4da1-bc65-341dfa3a88ce&pf_rd_r=N48GW40XDS9H0DW723J2&psc=1&refRID=N48GW40XDS9H0DW723J2)

**「Webってなんですか？」「ブラウザってなんなんですか？」**のオススメ勉強方法
→[書籍：Webを支える技術](https://www.amazon.co.jp/Web%E3%82%92%E6%94%AF%E3%81%88%E3%82%8B%E6%8A%80%E8%A1%93-HTTP%EF%BC%8CURI%EF%BC%8CHTML%EF%BC%8C%E3%81%9D%E3%81%97%E3%81%A6REST-WEB-PRESS-plus-ebook/dp/B07JK7FZH2/ref=sr_1_5?s=digital-text&ie=UTF8&qid=1552507674&sr=1-5&keywords=web)
→[参考サイト：MDN　開発者向けのウェブ技術（基礎技術の部分）](https://developer.mozilla.org/ja/docs/Web)

とりあえずこれらを読んでおけば、
**「プログラムって何？　Webってどういう仕組み？」**という疑問はなんとなく解決されると思います。
次からは**「じゃあプログラミングのやり方ってどうやって勉強すればいいの？」**という部分を記載していきたいと思います。

##③プログラミングってどうやるの？
**「プログラミング言語っていっぱい種類あるやん…」**
**「どの言語を勉強していけばいいの…？」**
一人でプログラミングを学び始める際、おそらく誰しもが経験したことがある悩みだと思います。

今の世の中、ネットには色々な情報があります。
でも情報量が多すぎて、きっと中には、
**「Javaってやつは需要が多そうだなー」**
**「今流行りのディープラーニングにはPythonが向いているらしいぞ！」**
**「あれ？　HTMLってプログラミング言語じゃないの…？」**
と、何から勉強していけばいいのか分からなくなってしまう人もいると思います。

悩むコストがもったいないと思いますので独断と偏見で決めてしまいます！
まず初めは、メイン武器として**Ruby**を勉強していきましょう！
いちおう主な理由は下記に書いておきます。

- **言語仕様や文法が比較的簡単。**
- **Webサービスを作るための便利アイテムを使える（後述するRuby on Railsというもの）**
- **学習サイトを用いて勉強できる。**

ちなみに先ほど「メイン武器はRuby」と記載したのですが、
サブ武器として以下のモノも勉強する必要があります。

- **HTML**
- **CSS**
- **JavaScript（jQuery）**

これらを勉強するためのオススメ勉強法は下記です。

**手を動かしながら勉強したい人**へのオススメ勉強方法
→[参考サイト：progate　(HTML→CSS→jQuery→Ruby→Ruby on railsの順がオススメ)](https://prog-8.com/)

**まずは文章を読んで理解していきたい人**へのオススメ勉強方法
→[参考サイト：MDN　Web入門（Rubyは勉強できません…）](https://developer.mozilla.org/ja/docs/Learn/Getting_started_with_the_web)

progateに関しては「プログラミング勉強しよう！」と考えたことがあれば、一度は聞いたことがあると思います。
月１０００円ほどかかりますが、すごく勉強しやすいサービスなのでぜひ使ってみてください！
上に書いてある範囲であれば、だいたい目安２週間ぐらいで勉強できるかと思います！

##④実際にWebアプリってどう作るの？
①〜③を進めていけば、
**「Webって何？」****「ブラウザって何？」****「プログラミングってどうやるの？」**
といった部分に関しては、実態が掴めてきたはずです。

ただそれだけではWebアプリは作れません。
今の段階では**「Web」「ブラウザ」「プログラミング」**といった各領域の知識は付いてきているのですが、
実際には、それら各領域の武器を組み合わせなければならないからです。

ここからは、それらの武器の組み合わせ方を勉強することで、
ブラウザを通して**実際に使うことができるWebアプリ作成**を目指しましょう！
オススメ勉強方法は下記です！

**Webアプリケーションの開発〜公開**のオススメ勉強方法
→[参考サイト：Ruby on Rails チュートリアル](https://railstutorial.jp/)

Webアプリケーションの開発方法はもちろん、
実際にブラウザ上で見れるように公開するところまで、一貫して勉強することができます。
しかも**無料**です。無料でこの内容量は半端じゃないです！（PDF換算で811ページもあるそうです）　

ボリュームが多い上に、内容も少し難しい部分ありますが、
今まで勉強してきた内容を振り返りながら進めればきっと理解できるはずです！
（もしどうしても理解ができない時は、有料ですが解説動画などもあります。）

##⑤より本格的なWebアプリを作るために
①〜④で、実際にブラウザを用いて利用できるWebアプリを作成できたと思います。
今の状態でも利用できる状態なのですが、ここからはより本格的なWebアプリの作成を目指しましょう！

実はWebアプリ作成には、
**サーバー構築はどうするのか**
**ネットワーク環境はどうするのか**
といった部分を考える必要があります。

**「Webサーバー」「DBサーバー」「HTTPS通信」**などのインフラと呼ばれたりする部分の勉強です。
④ではherokuというサービスが上手くカバーしてくれていたので、考えなくてもよかったのですが、
より本格的なWebアプリとするためには避けては通れない部分になるはずです。

勉強するオススメの勉強方法は下記です！

実際に**サーバー構築を行える**オススメ勉強方法
→[書籍：Amazon Web Services 基礎からのネットワーク＆サーバー構築 改訂版](https://www.amazon.co.jp/Amazon-Web-Services-%E5%9F%BA%E7%A4%8E%E3%81%8B%E3%82%89%E3%81%AE%E3%83%8D%E3%83%83%E3%83%88%E3%83%AF%E3%83%BC%E3%82%AF%EF%BC%86%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E6%A7%8B%E7%AF%89-%E6%94%B9%E8%A8%82%E7%89%88-ebook/dp/B06Y5ZSYY4)
→[参考サイト:Qiita「世界一丁寧なAWS解説。EC2を利用して、RailsアプリをAWSにあげるまで」](https://qiita.com/naoki_mochizuki/items/f795fe3e661a3349a7ce)

**HTTPをHTTPSに変更するため**のオススメ勉強方法
→[参考サイト:Qiita「初心者向け：AWS(EC2)にRailsのWebアプリをデプロイする方法 目次」](https://qiita.com/iwaseasahi/items/d5f2ef3eac5e349a8f7d)
→[参考サイト:Qiita「AWSでドメイン、SSL証明書の取得、設定」](https://qiita.com/masch/items/a5ef84998fb7784f9115)

厳密にはAWSもクラウドサービスのため、インフラ構築の基礎的な勉強とは違うかもしれません。
ですが現実的に、AWS等のクラウドインフラサービスを使用するケースが非常に多くなっています。
より専門的な知識を求めていく場合を除けば、いったんは上記の勉強で大丈夫かなと思います。

#おわりに
ここまでの内容を進めれば、なんとかWebアプリ作成はできるようになったのではないかなと思います。
これから勉強始める方の手助けに、少しでもなれたなら嬉しいです！
最後にはなりますが、自分自身まだまだ駆け出しエンジニアでございますので、
ベテランエンジニアの皆様**「もっといい勉強方法知ってるよ！」「間違った情報書いてるよ！」**などありましたらコメントいただけますと幸いです！