目次

Chapter 1　Web開発の動向
1　現在の課題とその背景
　　　1　Webフロントエンドを取り巻く環境
　　　2　デザイナーとエンジニア
　　　3　開発現場の悩み
　　　4　フロントエンジニアの理想像
2　開発者が考えるべきこと
　　　1　ブラウザ実装
　　　2　HTMLとCSS
　　　3　CSSが抱える問題
3　設計の必要性
　　　1　今までのWebフロントエンドコード
　　　2　コードは生き物

Chapter 2 Reactの基本
1　Reactの概略
　　　1　Reactの特徴
　　　2　React推奨の理由
2　基本構文と実行環境
　　　1　ECMAScript
　　　2　開発環境の準備
　　　3　オンラインエディタCodeSandbox
3　JSX
　　　1　JSXとは
　　　2　Babel
4　Reactの記述方法
　　　1　Components
　　　2　render
　　　3　Functional Components
　　　4　Props
　　　5　State
　　　6　イベント
　　　7　key
5　ライフサイクル
　　　1　Reactにおけるライフサイクル
　　　2　処理の流れ
　　　3　Functional Componentsのライフサイクル
　　　［コラム］Babel 7へのアップデート

Chapter 3　Atomic Design
1　Atomic Designとは
　　　1　Atomic Designの基本概念
　　　2　Atoms
　　　3　Molecules
　　　4　Organisms
　　　5　Templates
　　　6　Pages
2　メリット
　　　1　デザインシステム
　　　2　開発におけるデザインの基準
3　コンポーネント開発のUIデザイン
　　　1　スタイリング
　　　2　レイアウト
　　　3　トーン＆マナー
4　Reactとの相性
　　　1　肥大化しないコンポーネント
　　　2　拡張性
　　　［コラム］Fragments

Chapter 4　ソースコードのビルド89
1　ビルドする理由
　　　1　Node.js
　　　2　人間がやるべきこと・機械にやらせること
　　　3　開発環境の拡張性
2　webpack
　　　1　webpackの基本
　　　2　webpackのセットアップ
　　　3　webpack.config.js
　　　4　ローダー
　　　5　プラグイン
3　webpack-dev-server
　　　1　基本的な使い方
　　　2　Hot Module Replacement

Chapter 5　コンポーネントの実装
1　ベストプラクティス
　　　1　PresentationalとContainer
　　　2　データの反映
　　　3　Local State
2　コンポーネントレベル
　　　1　Atomic Designとの照合
　　　2　Molecules・OrganismsとTemplates・Pages
　　　3　実運用と妥協点
3　プロジェクト構成
　　　1　コンポーネントディレクトリ
　　　2　UIライブラリの活用
4　サーバーサイドレンダリング
　　　1　サーバーサイドレンダリングとは
　　　2　Reactでのサーバーサイドレンダリングの実践

Chapter 6　CSSの実装
1　コンポーネント化とCSS
　　　1　従来のアプローチ
　　　2　解決すべき課題
2　CSS in JS
　　　1　CSS in JSの基本概念
　　　2　CSS modules
　　　3　styled-components
　　　4　styled-jsx
3　CSSの分離
　　　1　依存性の分離
　　　2　ローカルスコープの実現
　　　3　PostCSS
　　　［コラム］Portals

Chapter 7　ロジックの実装
1　コンポーネントの状態管理
　　　1　フロントエンドが持つ状態とは
　　　2　従来の状態管理とFlux
2　Reduxの基本
　　　1　基本概念と3原則
　　　2　実装
　　　3　データフロー
3　Reduxの実践
　　　1　Reactコンポーネントとの接続
　　　2　Middleware
　　　3　Storeを元にしたUI制御
4　非同期処理
　　　1　Reduxにおける遅延処理
　　　2　redux-thunk
　　　3　redux-saga
　　　［コラム］Error Boundary

Chapter 8　プロダクトの品質
1　品質の維持
　　　1　プロダクトの品質
　　　2　品質維持の必要性
　　　3　品質維持のポイント
2　コンポーネントのテスト
　　　1　テストフレームワーク
　　　2　Reactコンポーネントのテスト
　　　3　enzyme
　　　4　enzymeのレンダリング処理
3　Lint
　　　1　ESLint
　　　2　ESLintのセットアップ
　　　3　Rule
　　　4　stylelint
4　flow
　　　1　型の恩恵
　　　2　flow
　　　3　flowの実践
　　　4　型指定の応用と型定義
5　スタイルガイド
　　　1　スタイルガイドの必要性
　　　2　Storybook
　　　3　Storybookのセットアップ
　　　4　ストーリーファイルの作成
　　　5　アドオン

著者プロフィール

• 石橋啓太（著者）

  1987年生まれ。ウェブサイトデザインやHTML・CSSを中心にデザイナーとして4年ほど経験後、2014年5月に株式会社DMM.comラボ入社。ネイティブアプリのUI/UXデザインやWebフロントエンド業務に携わる。現在では各種イベントでの登壇やOSSへのコミット活動を行う。デザインから実装まで担当できる強みを活かして、ユーザビリティ・アクセシビリティなどを重視した高品質なWeb開発を研究している。サービスやガジェットなど新しいものが好き。梨とビールと音楽が好き（楽器は弾けない）。

• 丸山弘詩（編集）

  書籍編集者。早稲田大学政治経済学部経済学科中退。国立大学大学院博士後期課程(システム生産科学専攻)編入、単位取得の上で満期退学。大手広告代理店勤務を経て、現在は書籍編集に加え、さまざまな分野のコンサルティング、プロダクトディレクション、開発マネージメントなどを手掛ける。編集した書籍に『ブロックチェーンアプリケーション開発の教科書』『ビッグデータ分析・活用のためのSQLレシピ』（マイナビ出版）など多数。