フロントエンド ド初心者へのススメ

はじめまして、リンクアンドモチベーションで主にフロントエンドをやっています、下田です。
本記事では、プログラミング完全未経験だった僕がフロントエンドエンジニアとして成長するために実際に勉強してよかった記事や本、サイト、やって良かったことを載せています。

新人エンジニアの方で主にフロントを触っていきたいと考えている方が、読んでくださると嬉しいです。

####対象
・プログラミング未経験で今後フロントエンドエンジニアとしてやっていきたいと思っている方向け。
・フロントエンド開発を初めて ~ 2年目くらいまでの新人Webエンジニア向け。

####補足
・あくまで初級者向けの記事になります。
・自分がやったことをベースに話しているので、漏れがあるのはお許しください。
・弊社で使っているのはJavaScript + Vueなので、ReactやTSにはここでは触れていません。

##Lv1: まずはWeb、サーバー、ネットワークの基礎を理解しよう

いきなりコードを書き始めてしまう人が多いですが、しっかりWebの用語を覚えた上で開発に入りましょう！
全ての理解が出来なくても良いので、どのようにWebページが表示されているのかを掴めると良いと思います！

####おすすめの教材
・Web技術の基本

・サーバーの基本

・ネットワークの基本

####実際にやってみると良いこと
・普段使っているブラウザでF12を押してDeveloper Toolsを開いてみましょう。
・実際一つのwebサイトを開くだけで、どれくらいのネットワーク通信が行われているのかイメージをつかんでみると良いかもしれません。

##Lv2: いよいよコードの内容に入ろう

ここでは自分が読みやすかった入門書を置いてます！
まずはHTMLとCSSによってWebページの型が作られているんだなってことを知ってください。
JavaScriptには次のレベルで触れているので、とりあえず自らコードを書いたものがブラウザで表示されることを目指しましょう！

####おすすめの教材
・HTML&CSS, JavaScriptのきほんのきほん

・ [1冊ですべて身につくHTML&CSSとWebデザイン入門講座]
(https://www.amazon.co.jp/【Amazon-co-jp-限定】1冊ですべて身につくHTML-CSSとWebデザイン入門講座-DL特典-Flexbox/dp/4797398892/ref=mp_s_a_1_1?crid=2IZXLLARCG210&keywords=1冊ですべて身につくHTML%26CSSとWebデザイン入門講座&qid=1639171561&sprefix=1冊ですべて身につくhtml%26cssとwebデザイン入門講座%2Caps%2C613&sr=8-1)

・Progate HTML&CSSコース

##Lv3: JavaScriptに触れよう

フロントエンドエンジニアにとって、JavaScriptは避けては通れない言語です。
挫折する人が多いのもこのポイントだと思っているので、辛抱強く続けてください！

####おすすめの教材・記事
・JavaScript「超」入門

・Progate JavaScriptコース

・JavaScript本格入門
（Progateをやった後に読めると良い）

####実際にやってみると良いこと
・JavaScriptで簡単なタイマーなどのアプリは作ることができます。実際に何かを作るのが一番です。
・初心者は配列やオブジェクトなどの型が理解できずに、挫折してしまうことが多いので実際に変数に対してconsole.logでどんな中身になっているか見てみましょう。

##Lv4: 開発に必要なツール群もここで覚えておこう
プログラミングの知識だけでは開発は出来ません。
フロントエンドエンジニアもJSだけを書いておけば良い訳ではないです。
開発で高頻度で用いる、GithubやESlint、AWSの軽いインプットもここで行いましょう。

####おすすめの教材
・Github実践入門

・フロントエンド開発入門

・AWS しくみと技術がしっかりわかる教科書

##Lv5: プログラミングの考え方&良いコードの書き方を身につけよう

JavaScriptの文法を知っているだけでは良いコードは書けません！
一流のプログラマーがどういう考え方をしているのか、どのようなコードが良いとされるのかをここで学んでいきましょう！

####おすすめの教材
・プログラミング作法

・達人プログラマー

・リーダブルコード

・プリンシプルオブプログラミング

####実際にやってみると良いこと
・実際に本だけ読んで身につくことは少ないので、先輩にたくさんレビューしてもらいましょう。そして、こちらも先輩のコードを読みましょう。
・コードを書くだけでなく、読むことも大事な勉強です！

##Lv6: Web APIについての理解を深めよう

今どきAPIを使わないアプリケーションはありません。RESTを学び、どのようなエンドポイントの形式が良いのか学びましょう！フロントエンドエンジニアも、POSTやPUTなどのリクエストを送る際に正しい形式で送れないと失敗するので苦労します。

####おすすめの教材
・Web API The Good Parts

・Webを支える技術

##Lv7: フレームワークを使った開発を覚えよう

今時はVueやReactなどのフレームワークを用いてのフロントエンド開発が主流になってきています。
弊社はVue.jsを使っているので、今回はVue.jsを中心にお話しします。

####おすすめの教材
・JavaScriptフレームワーク入門

・基礎から学ぶVue.js

・Vue.js 入門

####実際にやってみると良いこと
・本だけでは網羅されていないこともあるので、やはり公式ドキュメントを読むことが大事です。
→Vueはこちら

##Lv8: もう一つ踏み込んでJavaScriptの理解を深めよう

非同期処理や高階関数がしっかり理解できると開発の幅がグッと広がります！
初学者にとっては難しい内容になりますが、諦めずに学びましょう。

####おすすめの教材
・JavaScriptモダンプログラミング

・JavaScript関数型プログラミング

・JavaScript Promiseの本

##Lv9: 応用的にフロントを学ぼう

ここからは一歩ステップアップしてフロントを学びたい人向け。

####おすすめの教材
・Webフロントエンド ハイパフォーマンスチューニング

・ハイパフォーマンス ブラウザネットワーキング

・CSS設計の教科書

##おまけ： UI・UXデザインについても学んでおこう

フロントエンジニアならデザイナーさんとの関わりも多いはず。エンジニア視点でも最低限のデザイン知識は持っておきましょう。

####おすすめの教材
・ノンデザイナーズ デザインブック

・UXデザインの教科書

##最後に
・ここにある内容を満たしてもまだまだ先は長いです。Lv9に書いてある書籍が理解できるようになって、やっとフロントエンドエンジニアと名乗って良いレベルなのかなと筆者は思っています。
・記事や書籍などインプットベースで紹介を行なってきましたが、一番伸びる方法はアウトプットを多くすることだと思っています。なのでただインプットを行うだけでなく、たくさん作りましょう。
・是非これ以上学びたい方は以下のサイト参考に、深めていってください。
2021 Frontend Developer Roadmap