HTML, CSS を触ったことがあるくらいから、なんか本当にちょっとだけ業務でフロントエンドかけそうな気持ちが湧いてくるまでの学習ソースや学習法をまとめてみました。
独断と偏見に基づいておりますのでご容赦ください。
主だったフレームワークとして Vue, Nuxt を前提とした書き方になっています。
おすすめの学習ソース、方法あればぜひ教えて下さい！
ロードマップ
全体のロードマップは言わずとしれた Developer Roadmaps の Frontend Developer のページを参考にしていきます。ロードマップに登場するすべての要素をカバーするものではありません。
公式ページにも主に英語にはなりますが Internet、 HTML, CSS、 JavaScript の基礎に関するおすすめ学習リソースがまとめられています。
大まかには以下の要素ごとにおすすめの書籍、記事、動画をまとめていきます。
- まずは
- インターネット
- HTML、CSS
- JavaScript
- Web セキュリティ
- パッケージマネージャー
- モジュールバンドラー
- JavaScript フレームワーク
- テスト
- TypeScript
- (番外編)ホスティング
- (番外編)トレンド
以下のようなにアイコンをつけています
- 📗 : 書籍
- 📌 : 記事
- 🎥 : 動画
まずは
📗 技術基礎研修「クックパッドを支える仕組み」 / Introduction to the Internet
Web の全体イメージをつかむために素晴らしいです。
総合職・デザイナー向け技術基礎研修で使った資料
と説明に書いてあるとおり、エンジニアリングの前提知識なく読み進められます。
p154 までの前半だけでもまずはおすすめ
インターネット
理解できたと思える瞬間がいつまでも訪れないのではないかと思うほど広大なテーマなので、ずっと学んでいられます笑
ロードマップの順番にこだわりすぎず、まずは 1 つだけでも読んでみて、あとは手を動かしててわからないものに出会ったら見返すのもおすすめです。
📗 ネットワークはなぜつながるのか
まずは 1 章だけ読んでみるのがおすすめ。
URL をいれてからリクエストが返ってくるまでの概要、DNS の概要がわかります。
ネットワーク系のコマンドを叩いてみる
dig, curl など実際にコマンドを叩いてみて、書籍でみた知識を試してみます。
📌 最低限知っておくべきネットワーク系コマンド
📌 curl コマンド 使い方メモ
なども試してみるとイメージ付きやすいかもしれません
📌 インターネットの仕組みとISPの構造
ネットワークが繋がって、インターネットになり、バケツリレーでつながっていることを理解しやすいスライドです。
専門用語も多いですが、家の PC から海の向こうのサーバーにつながるステップがイメージしやすくなります。
📗 Web を支える技術
まずは第三部までだけでもおすすめ。Web 上でのリソースの一意な表し方、HTTP の基礎がコンパクトに学べます。
📗 Real World HTTP
HTTP、Web について深く理解でき、一気にではなくともことあるごとに読み返したい一冊。
個人的には HTTP への言及ではありませんが 12 章 Web アプリケーションの基礎の説明が Web アプリケーションのアーキテクチャーの変遷がわかりやすいなと思ってます。
📗 Webフロントエンド ハイパフォーマンスチューニング
正直チューニングの詳細まで理解しきれてませんが、この本のブラウザのレンダリングの仕組みの説明がすごくわかりやすいです。
Web フロントエンドはブラウザと蜜月なので、ブラウザのレンダリングの仕組みの理解があると、フロントエンド開発の理解にも繋がりやすいと想います。
より細かくブラウザの仕組みを理解するには 📌ブラウザの仕組み: 最新ウェブブラウザの内部構造
HTML、CSS
📌 困ったら MDN : HTML
なにかあればここ
📌 困ったら MDN : CSS
なにかあればここ
📗 HTML5＆CSS3デザイン 現場の新標準ガイド【第２版】
ギュッと詰まっていて、セマンティクスへの理解なども深まる一冊。
ごりごりにグラッフィクス表現をしないのであれば、この本の知識で十分なのではと思ってしまう。
JavaScript
📗 スラスラ読める JavaScriptふりがなプログラミング
はじめてのマークアップ言語以外が JavaScript ならまずはこの本からがおすすめ。
困ったら MDN : JavaScript
なにかあればここ
📗 改訂新版JavaScript本格入門 ～モダンスタイルによる基礎から現場での応用まで
JavaScript のオブジェクトの関係性(Array オブジェクトのメンバーがどのような関係性なのかなど)を図解したものが随所にあり、理解がはかどります。
📌 JavaScript Primer
プログラミングをやったことがあるが、今のJavaScriptがよくわからないという人が、
今のJavaScriptアプリケーションを読み書きできるように書かれています。
書籍もありますが、Web 版が無料で見れます。以下のような使い分けだそうです。
この書籍は先頭から順番に読んでいくように書かれています。
そのため、読み物としては書籍版の方が読みやすくなっています。 ウェブ版では検索機能やサンプルコードを実行できる機能が組み込まれているため、必要に応じて併用してください。
🎥 Udemy : 【JS】初級者から中級者になるためのJavaScriptメカニズム
JavaScript の実行環境理解の第一歩に最適だと思ってます。
どのように JavaScript が実行されていくかが動画で示されていて、理解が深まります。
個人的には非同期処理のタスクキューとコールスタックの関係の動画がわかりやすかったです。
Web セキュリティ
📗 体系的に学ぶ 安全なWebアプリケーションの作り方 第2版
この本には感謝しか無いです。もっと理解を深めたい
🎥 徳丸浩のウェブセキュリティ講座
安全なWebアプリケーションの作り方の著者の Youtube チャンネル。隙間時間にみれていいです。
パッケージマネージャー
ここから実行環境として Node.js が必要になります。
モジュールシステムの違い、仕様と実装の差などのつまづきポイントも多いかなと思います。
📌 Yarn 公式
ESLint, prettier も導入してタスクランナーと合わせて リント、フォーマット も行っていきたいところです。
内容とは少しずれますが、複数のプログラミング言語の複数バージョン管理には asdf を使ってます。
📌 anyenv vs asdf vs Docker で asdf を使う理由
モジュールバンドラー
📌 webpack 公式
📌 webpack 4 入門
webpack 4 を対象としたものですが、わかりやすい記事です。(執筆時の最新は 5 系)
5 系の変更点など 📌webpack@5の主な変更点まとめ
JavaScript フレームワーク
Vue.js に絞って書いていきます。 React.js などは筆者がなれたら追加するかもしれません。
📌 Vue.js 公式
ドキュメントがよくできているのでこちらを参照します。
現在最新は ｖ3 です。v2, v3 で大きく書き方が変わった部分があるので、使うバージョンに合わせて参照してください
仮想DOM とライフサイクルフックの理解が深まると、Vue.js の動きがわかりやすいのではないかと思います
📗 改訂2版 基礎から学ぶ Vue.js
第1版しか読んだことないですが良かったのできっと第2版もおすすめです。
第1版は Vue.js の基礎文法、基本的な動作をまるっと理解するのに良かったです。
📗 Nuxt.js 公式
ドキュメントが充実しているのでこちらを参照します。
最初は TypeScript 対応が大変でしたが、いまでは create-nuxt-app で TypeScript を選べるようになりだいぶ楽になりました。
型推論を効かせるには型定義、拡張などが必要なことがままあります。
テスト
📗 知識ゼロから学ぶソフトウェアテスト 【改訂版】
そもそも何をテストしたらいいんだろうがわかる一冊。平易な書き方で入門にはピッタリだと思う。
📌jest 公式
jest を好んで使っているので、独断と偏見で jest だけ載せておきます。
📌 twitter : t_wada
もはや勝手に公式ドキュメントだと思ってます。特にテストで困ったら t_wada さんのブログ、twitter を検索してみてます
📌 これで迷わないテストダブルの分類(ダミー、スタブ、スパイ、モック、フェイク)
テストダブルの分類はこの記事がとてもわかり易いです。
TypeScript
モダンな JavaScript ≒ TypeScript といわれるほど、TypeScript 1ｓｔ になってきてると感じます。
📗 プログラミングTypeScript ―スケールするJavaScriptアプリケーション開発
手元においておきたい一冊。
🎥 Understanding TypeScript - 2020年最新版
エディター上で型推論が効く、効かないを映像としても見れて参考になります。
📌 TypeScript Deep Dive 日本語版
公式の DeepDive の日本語訳
📌 twitter : suin
TypeScript で困ったらだいたい suin さんの記事を目にするイメージあります。
インフラ
フロントエンドがフロントだけを書くにとどまらなくなってきていると思ってます。少なくとも ホスティングとそのデプロイメントパイプラインは任せられることも多くなってくるのはないでしょうか？
簡易なステップで実現できるので、ホスティングまたは、ホスティングとデプロイメントパイプラインツールがセットになったものを触ってみるのはおすすめです
- Firebase Hosting
- Amplify Hosting, Amplify Console
- Vercel
- Netlify
etc
トレンド
📗 Micro Frontends Architecture Patterns
まだ読み切れてはいないのですが、最高です。
マイクロフロントエンドだけではなく、フロントエンドのアーキテクチャの変遷、意図、メリデメが分かる構成です。
しかも無料。。。
🎥 Front-End Study #1「Cloud Native時代のフロントエンド」
リッチになり続け、担当範囲が広がり続けているフロントエンドの展望が語られています。
Bliｔｚ などの FullStack Node.js の未来感、どこまでがフロントエンジニアなんだっけ？という議論がすごく刺激になります。
まとめ
フロントエンドはよりリッチに、より複雑になり続けています。
バックエンドで培われてきた、大きく複雑なシステムを扱う技術がフロントでも求められてきているなと感じます。
Front-End Study #1 の動画でも取り上げられていましたが、「フロントエンドエンジニア」「バックエンドエンジニア」の区分けは曖昧になってまた再定義されるかもしれません。
すこしでもどなたかの学習の参考になれば嬉しいです。
おすすめの本、おすすめ読む順番ご存知だったらぜひおしえてください！