Webプログラミング初心者のための勉強方法
ここ1年くらい、仕事やプライベートを含め、フロントからサーバーサイドまで色々な言語を触ってきました。
やってみて感じた、私が思うおすすめの勉強方法をまとめます！これからプログラミングを勉強しようと思っている方の参考になれば幸いです。
ちなみに私はWebをやっている人なので、WebサイトやWebアプリについての勉強法になります。機械学習とか、スマホアプリとか、ロボットとか作りたい人は別の詳しい人に聞いてくださいね…
STEP1 静的なページを作ってみよう！
まずは静的なページと言われる動きのないページ作成から始めます。いわゆるホームページと呼ばれるやつです。
初心者の勉強におすすめな教材はprogateなので、ぜひ登録してみましょう。登録したら以下の言語の順番でレッスンをクリアしてみましょう。
HTML・CSS
まずは基本中の基本のHTML。WebサイトはHTMLで作られています。
CSSはスタイルシートと呼ばれる、色をつけたり文字の大きさを変えたりと装飾をするものです。HTMLと必ずセットで覚えましょう。
この2つを覚えるだけでも最低限のホームページは作れます！！
ただ、HTML,CSSだけだとできることが限られてきます。最近のサイトは色々動いたりと華やかですよね。もう少し動きのあるサイトを作るために次の言語を覚えましょう。
Javascript
HTML,CSSでは作れない画面の動きを作れます。
jQuery
Javascriptのライブラリと呼ばれるもので、Javascriptで書くとめんどくさい処理を簡潔に書ける便利なやつなので覚えておきましょう。世の中の多くのサイトで使用されています。
ここまできたら、STEP1は終了です！！Webサイトの作り方が分かったはずです。
STEP UP!
Progateを使ってここまで学んだら、次のステップとして以下に挑戦してみるといいでしょう。Webサーバーがなくてもローカル（自分のパソコンの中）だけで出来ます。
1.入門書を買ってもう一度やってみる。
Progateは非常に良い教材ですが、これだけでは足りない部分もあります。本は細かい部分も載っていますので、買ってやってみると良いでしょう。チュートリアル形式に学べるものが良いです。
→オススメの本：「作りながら学ぶ HTML/CSSデザインの教科書」
2.既存サイトを真似してみる。
実際にあるサイトで見た目が気に入ったサイトを選び、Chromeで右クリック→「検証」を押すと、見ているサイトのHTML、CSSが見れます。これを写して真似して見ましょう！！プロが書いたコードを真似することで構造や書き方を覚えられます。
3.オリジナルサイトを作ってみる。
真似したサイトを自分なりにアレンジしてみるもよし、一から自分でデザインを考えるものよし。オリジナルサイトを作ってみましょう。
STEP1 まとめ
さあ、ここまでやってみていかがでしたか？
今、思った感想に近いものを下からお選びください。
（1）次はログイン機能とか投稿ができるWebアプリを作りたい！SNSを作りたい！ショッピングサイトとか作りたい！
→そんなあなたは、STEP2へ進み、プログラミングを勉強しましょう。
（2）ここまでで十分。静的なページを作る仕事がしたい！プログラミングはあまりしたくない。
→そんなあなたは見た目（フロントエンド）を作る仕事がおすすめでしょう。コーダーやフロントエンドエンジニアの道があります。色々作品を作って見せれば、仕事は見つかるでしょう。
Javascriptのフレームワークとかを勉強して、さらにステップアップを目指すのもおすすめです。
（3）コードを書くより、画面のデザインをするほうがやりたくなった。
→そんなあなたはWebデザイナーの道があります。デザインの勉強をするといいでしょう。
（4）あまり楽しくない。難しくて無理。
→人には向き不向きがあります。ここで辞めるも、もう少し頑張るのもあなた次第です。良い選択を！
STEP2 動的なページを作ってみよう！
STEP1では静的なページと呼ばれる、いつ見ても同じ情報が表示されるページを作りました。STEP2では動的なページと呼ばれる、投稿が出来たり、ログインユーザーに応じて表示が変わったりする動きのあるWebアプリを作ってみましょう！
コマンドライン
プログラミングには欠かせないコマンドです。黒い画面で文字を打つアレです。これからよく出てくるので、慣れておきましょう。コマンドの勉強法は使いまくって慣れるしかありません。私は仕事で毎日使っていたら慣れました。
PHP,Ruby
サーバーサイドを動かす言語です。PHPでもRubyでもできることは似たようなものなので、好きな方で良いです。Rubyの方がこの後の教材が充実しているので私はオススメします。が、PHPのほうが仕事は多いです。どちらか覚えてしまえば後からもう一方を覚えるのもやりやすいのでどちらを選んでも大丈夫です。
SQL
動的なページにはデータベース（DB）というデータを保管するものが欠かせません。SQLはデータベースを操作したり、必要なデータを抽出する言語です。勉強しなくてもWebアプリは作れますが、非常に大事な概念なので知識として覚えましょう。
Git
ファイルのバージョン管理システムです。仕事のように複数人で開発するときは必要になります。必要な知識なので使えるようにしましょう。
フレームワーク
Webアプリ制作が簡単にできる便利なやつです。PHPならCakePHP、Laravel、RubyならRuby on Railsが有名です。CakePHP、LaravelはProgateにはレッスンがないので（2018年6月現在）教材は自分で探してください。
ここまできたら、STEP2は終了です！！Webアプリの作り方が分かったはずです。
STEP UP!
Progateを使ってここまで学んだら、次のステップとして以下に挑戦してみるといいでしょう。
1.ローカルに環境構築をしてみる。
自分のパソコン上で動かせるように開発環境を構築してみましょう。
2.チュートリアルをやってみる。
Ruby on Railsを選択した方はRailsチュートリアルをやってみましょう。
3.オリジナルWebアプリをつくってみる。
オリジナルのものを作ってみましょう。ログイン機能、投稿・編集・削除機能、画像の投稿機能などが含まれているといいでしょう。オリジナルが思いつかない場合は、掲示板サイトかTwitterの模倣でも良いでしょう。
4.デプロイしてみる
作ったアプリをWeb上に公開（デプロイ）してみましょう。Herokuを使うとWebサーバーがなくても無料でできます。Railsチュートリアルでやり方は学べます。
STEP2 まとめ
さあ、ここまでやってみていかがでしたか？
今、思った感想に近いものを下からお選びください。
（1）Webアプリ作るの楽しい！プログラマーになりたい！
→オリジナルアプリを作って、勉強したことをアピールすればきっと仕事が見つかるでしょう。まだまだスタート地点です。日々、勉強し続けましょう！
（2）やっぱり、プログラミングより見た目を作る方が楽しい！
→そんなあなたにはフロントエンドエンジニアの道があります。色々作品を作って見せれば、仕事は見つかるでしょう。Javascriptのフレームワークとかを勉強して、さらにステップアップを目指しましょう！
（3）さらに人工知能とか取り入れたい！
→機械学習ですね。Pythonを勉強しましょう。私は詳しくないので詳しい人に聞いてください。。
（4）サイトやアプリの企画とかのほうがやりたい。プログラミングはできる人に任せれば良い！
→Webプランナーやディレクターになるか、企業したほうがいいかも。
（5）あまり楽しくない。難しくて無理。
→人には向き不向きがあります。もっと違う道があるかもしれません。ここで辞めるも、もう少し頑張ってみるのもあなた次第です。良い選択を！
さいごに
ここはまだスタート地点です。この世界は一生勉強です。
挫折しないためには、わからない所を教えてくれるメンターを見つける。そして、共に励まし、切磋琢磨できる勉強仲間を見つけるのが良いでしょう。
勉強会とか参加してみるのもいいですし、Twitterには積極的に勉強している方々が沢山いるので、フォローしてみると切磋琢磨出来ますのでおすすめです！！
ちなみにプログラミングの一番の上達方法は、仕事にすることです。何年も独学しているくらいだったら、さっさと就職した方が、成長しますよ！これは私が身を以て体感しました。
私も日々勉強です。共に頑張りましょう。