私について
2020年4月より某プログラミングスクールに通い、卒業後フロントエンジニアとして働いている20代です。
この記事は、自分がスクールに通い得たもの・思った事を中心に「独学でweb系エンジニアを目指す方の手助けになれば」と思い作成しております。
ゴール・前提条件
ゴール
・独学で学習開始から4〜5ヶ月以内にポートフォリオを完成させる（ようにする）
前提条件
・1日最低でも2時間は学習できる方
内容
・学習順序
・参考教材
・心構え等
についてまとめました。
独学ですと、「まず何からやれば良いの・・・？」「学習方法は？」等の不安が生まれると思うので、そちらを解消できればなと思います。
対象の方
・スクールに通わず、独学&未経験でフロントエンドエンジニアを目指している方
学習順序
まず始めに学習順序ですが、以下の通りです。
①HTML&CSS学習［1〜2週間］
②JavaScript学習［4週間］
③Vue.js学習［2週間］
④ポートフォリオ作成［4〜8週間］
［小話］Vue.jsってなんやねん
③のVue.jsですが、こちらはJavaScriptのフレームワークです。
んで、フレームワークというのが「開発を効率良くできるようにするもの」です。
つまり、Vue.jsは「JavaScriptでの開発をより効率よく行うためのもの」です。
ちなみに、JavaScriptのフレームワークは他にもAngular、Reactというものもあるのですが、その中でも、Vue.jsを選んだ理由は以下の通りです。
①学習コストが低い
②採用している企業が多い
③今まで利用されていたjQueryというフレームワークに比べ効率的に開発ができる
参考教材
種類
教材には大きく分けて三種類あります。
動画
YouTubeやUdemyです。
実際に手を動かしながら解説している方が多く、細かいところまで勉強になるので一番おすすめです。注意点としては、見ているだけでは頭に入らないので、必ず手を動かすようにしましょう。
Udemyについては30日以内なら返金もできるのバンバン買えます！
サイト
Progateやドットインストールです。
自分のペースで学習を進めることができ、無料コースが多いのが特徴です。正直最初の方は一番お世話になりました。
書籍
所謂参考書です。カラーでわかりやすいものも多いですが、情報が古かったりするので今回においてはあまりお勧めはしません。（深いところまで学びたい！となると書籍の方がいい時もあります。）
結局どれ使えばいいの？
先ほどの順序に当てはめると、おすすめはこちらです。
①HTML&CSS学習 ［1〜2週間］
Progate（HTML&CSSコース）
『わかりやすさ』、『学習効率の良さ』から選ばせていただきました。（私も最初はProgateからプログラミング学習を開始しました）また、有料コース（月980円）も含まれますが、他のコースも学べるので実質タダみたいなもんです。
②JavaScript学習 ［4週間］
Youtube&Progate(JavaScriptコース)
おすすめ動画を載せたのですが、正味Youtubeの動画だけで学習の半分は完結すると思います。そして、もう半分はProgateで補うという感じです。
プログラミングが初めての方は理解がしづらく、ここで心が折れる方が多いと思いますが、逆にここを乗り越えればとても楽になりますし、焦らずやる事を大事にしましょう！
おすすめ動画
【Youtube】【JavaScript超入門講座】わずか50分で知識ゼロから基礎をマスター！
【Udemy】JavaScriptをとことんやってみよう【超初心者から脱初心者へレベルアップ】【わかりやすさ重視】
③Vue.js学習 ［2週間］
Udemy
公式ドキュメントがあるのですが、正味わかりづらさMAXなのでこちらもUdemyに頼りましょう。
ちょっと早口な気もするので最初は流し見して、2回目にコードを書くという流れがお勧めです。
そして、時間に余裕があれば公式ドキュメントを見て再度学習する事をお勧めします。
おすすめ動画
超Vue.js 2 完全パック - もう他の教材は買わなくてOK！ (Vue Router, Vuex含む)
公式ドキュメント
④ポートフォリオ作成 ［4〜8週間］
さぁ、ラストであるポートフォリオ作成です。
ポートフォリオを作成する理由は、転職をする際に相手側に自分のスキルを見せるためです。
そして、Vue.jsのポートフォリオとなると基本的には「自己紹介ポートフォリオ」になるかなと思います。
具体的には、以下の方たちの記事を参考にしていただくとイメージがつきやすいと思います。
Vue.js を vue-cli を使ってシンプルにはじめてみる
フロント未学習の大学生が1週間でVue.jsを使ったポートフォリオを作った話
動画教材ですと、Udemyにて作成から公開までの方法を解説している方もいるのでこちらがお勧めです。（返金できるしね）
また、BootStrap（CSSの強化版）のようなもの、Vuetifyについても解説もされているようなので安心だと思います。
Vue.js + Firebaseで作るシングルページアプリケーション
心構え等
①完璧を求めない
完璧を求めすぎると心が折れてしまうからです。
これはプログラミング学習に限ったことではないですが、全てを理解しようとせず、教材の7割を理解するくらいの気持ちでOKです。
どんどん進めていきましょう。
②#駆け出しエンジニアと繋がりたい、エンジニアインフルエンサー系の動画を見過ぎない
見ても時間の無駄だからです。
＃駆け出しエンジニアと繋がりたい は、Twitterでよく使われるタグですが自慢に感じるものも多く、Twitterを利用した転職活動をしたいという方なら良いと思いますが、自分は他人と比較しがちなので心が折れてしまい、やる気を無くしました。また、YouTubeについても当たり前のこと、やる気を削ぐ発言をだらだらと話している方が多く時間の無駄でした。（技術について話している方は別として）
③スケジュール管理をする
独学となると費用がかからない反面、全てがフリーなのでだらけようと思えばいくらでもだらけられます。（それはそう）
そこを防ぐためにも、アプリ等を使いスケジュール管理をしましょう。
スクールのカリキュラム終了後は私も、無印のスケジュール帳にて予定を書き管理していました。
おわりに
簡単ではありますが、まとめさせていただきました。
今後も、独学でweb系エンジニアを目指す方の手助けになる」記事を投稿していきますので、ご質問・ご要望があればコメントください。