フロントエンド技術を学ぼう まとめ

Front-end Developer Handbookを教科書にフロントエンド周りの技術を習得する連載のまとめです。

序章

• フロントエンド技術を学ぼう 序章

• フロントエンド技術を学ぼう 2018の統括と2019の予想（2019年分追記）

パート1. フロントエンドの概要　2019年分追記済み

10項目からなる、フロントエンド職とはどんなものかという紹介です。

• 1-1.フロントエンドの職種
• 1-2.一般的に採用されるWeb技術
• 1-3.フロントエンド開発スキル
• 1-4.フロントエンドデベロッパーの開発対象
• 1-5.チーム内でのフロントエンドデベロッパー
• 1-6.ジェネラリスト/フルスタック神話
• 1-7.フロントエンドの面接
• 1-8.フロントエンド職の求人
• 1-9.フロントエンド職の給与
• 1-10.フロントエンドデベロッパーになるには

パート2. フロントエンド開発の学習

42項目からなる、フロントエンドに関わる、なにをどう学ぶべきかという紹介です。

• 2-1.独学のやり方　←2019年分追記済み
• 2-2.インターネット/Webについて学ぶ　←2019年分追記済み
• 2-3.Webブラウザについて学ぶ　←2019年分追記済み
• 2-4.DNSについて学ぶ　←2019年分追記済み
• 2-5.HTTPとネットワークについて学ぶ　←2019年分追記済み
• 2-6.Webホスティングについて学ぶ　←2019年分追記済み
• 2-7.一般的なフロントエンド開発について学ぶ　←2019年分追記済み
• 2-8.UI/インタラクションデザインについて学ぶ　←2019年分追記済み
• 2-9.HTMLとCSSについて学ぶ　←2019年分追記済み
• 2-10.SEOについて学ぶ　←2019年分追記済み
• 2-11.JavaScriptについて学ぶ　←2019年分追記済み
• 2-12.Webアニメーションについて学ぶ　←2019年分追記済み
• 2-13.DOM、BOM、jQueryについて学ぶ
• 2-14.Webフォントとアイコンについて学ぶ
• 2-15.アクセシビリティについて学ぶ
• 2-16.ブラウザのAPIについて学ぶ
• 2-17.JSONについて学ぶ
• 2-18.JSテンプレートについて学ぶ
• 2-19.静的サイトジェネレータについて学ぶ
• 2-20.JSを通じてコンピュータサイエンスについて学ぶ
• 2-21.フロントエンドアプリケーションアーキテクチャについて学ぶ
• 2-22.Web APIデザインについて学ぶ
• 2-23.ReactとReduxについて学ぶ
• 2-24.プログレッシブWebアプリについて学ぶ
• 2-25.JavaScriptAPIのデザインについて学ぶ
• 2-26.Webデベロッパーツールについて学ぶ
• 2-27.コマンドラインについて学ぶ
• 2-28.Node.jsについて学ぶ
• 2-29.JavaScriptのモジュールについて学ぶ
• 2-30.JavaScriptのモジュールローダー/バンドルについて学ぶ
• 2-31.パッケージマネージャについて学ぶ
• 2-32.バージョン管理について学ぶ
• 2-33.ビルドとタスクの自動化について学ぶ
• 2-34.サイトパフォーマンスの最適化について学ぶ
• 2-35.テストについて学ぶ
• 2-36.ヘッドレスブラウザについて学ぶ
• 2-37.オフライン開発について学ぶ
• 2-38.Web/ブラウザ/アプリのセキュリティについて学ぶ
• 2-39.マルチデバイス開発について学ぶ
• 2-40.フロントエンドの学校、コース、ブートキャンプ
• 2-41.フロントエンドデベロッパーは何から学ぶか
• 2-42.フロントエンドのニュースレター、ニュースサイト、ポッドキャスト

パート3. フロントエンド開発ツール

41項目からなる、フロントエンド開発に便利なツール群という紹介です。

• 3-1.ドキュメント/APIのブラウジングツール
• 3-2.SEOツール
• 3-3.プロトタイピング&ワイヤーフレームツール
• 3-4.ドローツール
• 3-5.HTTP/ネットワークツール
• 3-6.コード編集ツール
• 3-7.ブラウザツール
• 3-8.HTMLツール
• 3-9.CSSツール
• 3-10.DOMツール
• 3-11.JavaScriptツール
• 3-12.静的サイトジェネレーター
• 3-13.アクセシビリティツール
• 3-14.アプリケーションフレームワーク(デスクトップ、モバイル、タブレット、その他)
• 3-15.プログレッシブウェブアプリケーションツール
• 3-16.スキャフォールディングツール
• 3-17.一般的なフロントエンド開発ツール
• 3-18.テンプレート/データバインディングツール
• 3-19.UIウィジェット＆コンポーネントツールキット
• 3-20.データ可視化(チャートなど)ツール
• 3-21.グラフィック(SVG、canvas、webGLなど)ツール
• 3-22.アニメーションツール
• 3-23.JSONツール
• 3-24.プレースホルダコンテントツール
• 3-25.テストツール
• 3-26.フロントエンドデータストレージツール(クライアントのデータストレージソリューションなど)
• 3-27.モジュールローディング/バンドリングツール
• 3-28.モジュール/パッケージリポジトリツール
• 3-29.ホスティングツール
• 3-30.プロジェクトマネージメント&コードホスティングツール
• 3-31.コラボレーション&コミュニケーションツール
• 3-32.コンテンツマネジメント ホステッド/API ツール
• 3-33.バックエンド/API ツール
• 3-34.オフラインツール
• 3-35.セキュリティツール
• 3-36.タスクランナー/ビルドツール
• 3-37.デプロイメントツール
• 3-38.サイト/アプリケーション モニタリングツール
• 3-39.JavaScriptエラー リポート/モニタリング ツール
• 3-40.パフォーマンスツール
• 3-41.ツールを探すツール