フロントエンド開発入門

toc.txt

Part 1 導入編 なぜ使うかを知る
　Chapter 1 フロントエンドエンジニアの歴史
　　1-1 Web の始まりと HTML
　　1-2 Web と HTML で何ができるようになったのか
　　1-3 ブラウザ戦争と標準化
　　1-4 ブログの流行とインターネットインフラ
　　1-5 静的な UI から動的な UI へ
　　1-6 「フロントエンドエンジニア」という専門職
　　1-7 Node.js による開発基盤の構築
　　1-8 ECMAScript 規格更新に伴う周辺事情の活性化
　　1-9 止まらないフロントエンド
　Chapter 2 フロントエンドエンジニアに求められるスキル
　　2-1 「フロントエンドエンジニア」が取り組む実務
　　　想定される実務例
　　2-2 JavaScript の成長と要求の変化
　　2-3 変容する中で維持すべき開発者の姿勢
　　　「Web は止まらない、求められる技術要素も止まらない」
　　　パブリックな存在として
　　2-4 本書におけるフロントエンドエンジニア像
　Chapter 3 フロントエンドにおける一般的なツール群
　　3-1 Node.js とその周辺のエコシステム
　　　パッケージマネージャー
　　　Node.js がもたらす恩恵
　　3-2 コンパイラ・モジュールバンドラー
　　　コンパイラ：Babel
　　　モジュールバンドラー：webpack
　　　Babel, webpack が解決すること
　　3-3 JavaScript 代替言語：TypeScript
　　　TypeScript の特徴
　　　コンパイラとしての TypeScript
　　　TypeScript によって解決できること
　　3-4 フレームワーク・ビューライブラリ：Vue.js, Angular, React
　　　Vue.js
　　　Angular
　　　React
　　　コンポーネント指向のフレームワーク・ライブラリであること
　　3-5 状態管理・データレイヤ：Redux
　　　ブラウザにおける状態管理は煩雑である
　　　クライアント MVC
　　　簡易的なクライアント MVC
　　　フロントエンドで抽象化されるモデル、扱ううえでの課題とは
　　　役割があいまいになる Controller
　　　Flux というアプリケーションアーキテクチャパターン
　　　Redux：データの一極管理
　　　Redux が解決できること
　　3-6 CSS：CSSメタ言語、設計手法、CSS-in-JS
　　　CSS を取り巻く現状
　　　各ブラウザの対応状況について
　　　CSS の表現力を高めた Sass、CSS メタ言語
　　　JavaScript で作成された PostCSS
　　　CSS 設計手法
　　　CSS を弱点を補うためには
　　3-7 静的解析ツール：Prettier, ESLint
　　　Prettier
　　　ESLint
　　　ほかのリンターやチェッカーについて
　　　静的解析ツールが可能にすること
　　3-8 ユニットテスト：Mocha, Jest, Karma
　　　ユニットテストとフロントエンド開発
　　　Mocha Jest Karma それぞれどういった特性があるのか
　　　ユニットテストやテストフレームワークが解決できること
　Chapter 4 開発の現場における仕事の進め方
　　4-1 アジャイルといった考え方
　　4-2 スクラムという開発手法
　　4-3 個人との対話と他者との協調
　　　プロダクトオーナー
　　　スクラムマスター
　　　デザイナー
　　　サーバサイドエンジニア
　　　テストエンジニア・テスター
　　　コミュニケーションハブとして
　　4-4 変化に対応しながら提供するサイクルを上げる

Part 2 実践編 どう使うかを学ぶ
　Chapter 5 開発環境
　　5-1 既存アプリケーションの開発環境構築
　　　Docker のインストール
　　　Node.js のインストール
　　　Yarn のインストール
　　　API サーバの起動
　　　クライアントの起動
　　5-2 既存機能の把握
　　　どんなアプリケーションなのかを知る
　　　アプリケーションが抱える課題を探る
　Chapter 6 設計と実装
　　6-1 フロントエンド環境の構築
　　　Yarn の利用準備
　　　webpack のインストール
　　　Babel のインストール
　　6-2 TypeScript の導入
　　　TypeScript のインストール
　　　Babel 経由で TypeScript のコンパイルを行う
　　　既存コードを TypeScript で書き換える
　　　コンパイルエラーを解消する
　　6-3 コードの分割
　　　処理を別ファイルに切り出す
　　6-4 Jest を利用したユニットテスト
　　　Jest のインストール
　　　jest.config.js の設定
　　　描画された DOM の検査
　　6-5 React の導入
　　　React のインストール
　　　JSX のためのコンパイル設定
　　　JSX で要素を表示する
　　　webpack-dev-server のインストールと設定
　　　jQuery で書いたコードを React に書き換える
　　　イベントハンドラの記述
　　6-6 Enzyme を使ったコンポーネントのテスト
　　　Enzyme のインストール
　　　Jest の設定
　　　React Component をテストする
　　6-7 styled-components の導入
　　　styled-components のインストール
　　　CSS から styled-components への移行
　Chapter 7 CI/CD によって受けられるメリット
　　7-1 CI/CD によって受けられるメリット
　　　CI/CD について
　　　GitHub Actions を始める
　　　ESLint を導入し動作させる
　　　CI で自動化するメリット
　　7-2 パフォーマンスと改善
　　　パフォーマンスの問題とは
　　　基礎的なパフォーマンス知識：クリティカルレンダリングパス
　　　Lighthouse を利用した定期的なパフォーマンス計測
　　　強力な武器はない、ひとにはひとのパフォーマンス

Part 3 応用編 より深く学ぶために知る
　Chapter 8 解析とモニタリング
　　8-1 サービスの成長とともに開発する
　　　仮説検証、AB テストの目的
　　　ツールの導入： Google アナリティクス
　　　ツールの導入： Google オプティマイズ
　　　プロダクトコードに組み合わせる
　　　サードパーティスクリプトとの兼ね合い
　　8-2 ユーザーモニタリング・エラーイベント監視
　　　ユーザーを取り巻く環境を知る
　　　ブラウザで起きるエラーイベントなどからユーザーを知る
　　　エラーイベント検知のため Sentry を導入する
　　　Sentry の動作とコードへの組み込み
　　　React Error Boundary を利用する
　　　収集したエラーイベントを役立てる
　Chapter 9 チーム開発と Web への貢献
　　9-1 チームで働く
　　　あらためてスクラムという開発手法について
　　　スクラムを採用したチームに入ったら
　　　ストーリー：スプリントプランニング
　　　タイムボックスという考え方
　　　ストーリー：スプリントが開始する
　　　デイリースクラム
　　　ストーリー：スプリントの終わり
　　　振り返り
　　　チーム開発とはテクニカルスキルではない
　　9-2 コミュニティへの貢献活動
　　　OSS への貢献はコードコミットだけではない
　　　できることから OSS へコミットする
　　　寄付する、翻訳するといった違ったアプローチ
　　　Web というプラットフォームに貢献する
　　9-3 Web プラットフォームに関わるフロントエンド開発者として
　　　仕様を知るには
　　　ライトにキャッチアップする
　　　フロントエンド技術を楽しむために