入門 React コンポーネントベースのWebフロントエンド開発

詳細目次

まえがき
第I部　基礎
1章　イントロダクション
1.1　背景
1.2　本書の構成
1.2.1　第I部 基礎
1.2.2　第II部 応用
1.2.3　第III部 ツール
1.2.4　第IV部 実践
2章　JSX
2.1　JSXとは？
2.2　JSXの利点
2.2.1　すでによく知られた構文
2.2.2　意味的なわかりやすさ
2.2.3　構造が可視化される
2.2.4　抽象化
2.2.5　関心の分離（Separation of concerns）
2.3　コンポーネント合成
2.3.1　カスタムコンポーネントの定義
2.3.2　動的な値
2.3.3　子ノード
2.4　JSXとHTMLの違い
2.4.1　属性
2.4.2　条件分岐
2.4.3　DOMに存在しない属性
2.4.4　イベント
2.4.5　コメント
2.4.6　特別な属性
2.4.7　スタイル
2.5　JSXなしでReactを使用したい場合
2.5.1　ReactElementの作成
2.5.2　簡略化
2.6　参考文献
2.6.1　JSX実行ツール
3章　コンポーネントのライフサイクル
3.1　ライフサイクルメソッド
3.1.1　コンポーネント作成時
3.1.2　コンポーネント作成後
3.1.3　コンポーネント破棄時
3.2　コンポーネント作成時に呼ばれるメソッド
3.2.1　getDefaultProps
3.2.2　getInitialState
3.2.3　componentWillMount
3.2.4　render
3.2.5　componentDidMount
3.3　コンポーネント作成後に呼ばれるメソッド
3.3.1　componentWillReceiveProps
3.3.2　shouldComponentUpdate
3.3.3　componentWillUpdate
3.3.4　componentDidUpdate
3.4　コンポーネント破棄時に呼ばれるメソッド
3.4.1　componentWillUnmount
3.5　アンチパターン：加工された値をstateに保存する
3.6　まとめ
4章　データフロー
4.1　props
4.1.1　propTypes
4.1.2　getDefaultProps
4.2　state
4.3　stateとpropsの使い分け
4.4　まとめ
5章　イベント処理
5.1　イベントハンドラの登録
5.2　イベントとstate
5.2.1　renderメソッド内でstateを参照する
5.2.2　stateの更新
5.3　イベントオブジェクト
5.4　まとめ
6章　コンポーネントの合成
6.1　HTMLの拡張
6.2　合成の例
6.2.1　HTMLの組み立て
6.2.2　動的なプロパティの追加
6.2.3　stateの監視
6.2.4　親コンポーネントへの統合
6.3　親子間の関係
6.4　まとめ
7章　Mixin
7.1　Mixinとは
7.2　まとめ
第II部　応用
8章　DOM操作
8.1　DOMノードへのアクセス
8.2　Reactフレンドリーでないライブラリの使用
8.3　行儀の悪いライブラリ
8.4　まとめ
9章　フォーム
9.1　管理されていないコンポーネント
9.2　管理されたコンポーネント
9.3　フォームのイベント
9.4　ラベル
9.5　textareaとselect
9.6　チェックボックスとラジオボタン
9.7　フォーム要素のname属性
9.8　複数のフォーム要素とchangeイベントハンドラ
9.9　カスタムフォームコンポーネント
9.10　フォーカス
9.11　ユーザビリティ
9.11.1　要求を明確に伝える
9.11.2　入力に即座に反応する
9.11.3　パフォーマンス
9.11.4　予測可能であること
9.11.5　アクセシビリティ
9.11.6　入力項目数の削減
9.12　まとめ
10章　アニメーション
10.1　CSSを用いたアニメーション
10.1.1　トランジションのクラスごとにスタイルを記述する
10.1.2　トランジションのライフサイクル
10.1.3　よくある過ち
10.2　タイマーを用いたアニメーション
10.2.1　requestAnimationFrameを使ったアニメーション
10.2.2　setTimeoutを使ったアニメーション
10.3　まとめ
11章　パフォーマンスチューニング
11.1　shouldComponentUpdate
11.2　イミュータビリティヘルパー関数
11.3　ボトルネックを調べる方法
11.4　key属性
11.4.1　制限事項
11.5　まとめ
12章　サーバーサイドレンダリング
12.1　サーバーサイドにおける描画関数
12.1.1　React.renderToString
12.1.2　React.renderToStaticMarkup
12.1.3　どちらの関数を使うべきか
12.2　サーバーサイドにおけるコンポーネントのライフサイクル
12.3　クライアントとサーバーの両方で使えるコンポーネントの設計
12.4　非同期データ
12.5　Isomorphicルーティング
12.6　シングルトンオブジェクト
12.7　まとめ
13章　Reactファミリー
13.1　Jest
13.1.1　インストール
13.1.2　デフォルトのモック
13.1.3　カスタムモック
13.2　Immutable.js
13.2.1　Immutable.Map
13.2.2　Immutable.List
13.3　Flux
13.4　まとめ
第III部　ツール
14章　ビルドとデバッグ
14.1　ビルドツール
14.1.1　Browserify
14.1.2　Webpack
14.2　デバッグツール
14.2.1　React Developer Tools
14.2.2　JSBinとJSFiddle
14.3　まとめ
15章　テスト
15.1　はじめに
15.1.1　テストの種類
15.1.2　テストツール
15.2　初めてのテスト：renderメソッド
15.3　コンポーネントのモック
15.4　関数のスタブ化
15.4.1　コールバック関数のテスト
15.5　イベントのシミュレーション
15.6　テストにおけるコンポーネントのセレクタAPI
15.7　Mixinのテスト
15.7.1　Mixinを直接テストする
15.7.2　ダミーコンポーネント経由でMixinをテストする
15.7.3　共有スペックを記述する
15.8　に対する描画
15.9　サーバーサイドのテスト
15.10　ブラウザを使ったテストの自動化
15.10.1　サーバーの起動
15.11　まとめ
第IV部　実践
16章　アーキテクチャパターン
16.1　ルーティングライブラリ
16.1.1　Backbone.Router
16.1.2　Aviator
16.1.3　react-router
16.2　Om（ClojureScript）
16.3　Flux
16.3.1　データフロー
16.3.2　Fluxを構成するパーツ
16.3.3　複数のStoreを管理する
16.4　まとめ
17章　その他のユースケース
17.1　デスクトップアプリケーション
17.2　ゲーム
17.3　HTMLメール
17.4　データビジュアライゼーション
17.5　まとめ
付録A　開発環境の構築について
A.1　Reactの配布形態
A.2　開発環境の構築
A.2.1　ファイル構成
A.2.2　Reactファイルの取得
A.2.3　JSXTransformerを使用してリアルタイムにJSX変換する
A.2.4　react-toolsを使用して事前にJSX変換する
A.3　本書のサンプルアプリケーション
A.3.1　ソースコードのダウンロード
A.3.2　サンプルアプリケーションの実行
付録B　APIリファレンス
B.1　用語の整理
B.2　トップレベルAPI
B.2.1　React
B.2.2　React.createClass
B.2.3　React.createElement
B.2.4　React.createFactory
B.2.5　React.render
B.2.6　React.unmountComponentAtNode
B.2.7　React.renderToString
B.2.8　React.renderToStaticMarkup
B.2.9　React.isValidElement
B.2.10　React.findDOMNode
B.2.11　React.cloneElement
B.2.12　React.DOM
B.2.13　React.PropTypes
B.2.14　React.initializeTouchEvents
B.2.15　React.Children
B.2.16　React.Children.map
B.2.17　React.Children.forEach
B.2.18　React.Children.count
B.2.19　React.Children.only
B.3　コンポーネントAPI
B.3.1　setState
B.3.2　replaceState
B.3.3　forceUpdate
B.3.4　getDOMNode
B.3.5　isMounted
B.3.6　setProps
B.3.7　replaceProps
B.4　コンポーネント仕様
B.4.1 オブジェクト
B.4.1.1 propTypes
B.4.1.2 mixins
B.4.1.3 statics
B.4.1.4 displayName
B.4.2 ライフサイクルメソッド
B.4.2.1 render
B.4.2.2 getInitialState
B.4.2.3 getDefaultProps
B.4.2.4 componentWillMount
B.4.2.5 componentDidMount
B.4.2.6 componentWillReceiveProps
B.4.2.7 shouldComponentUpdate
B.4.2.8 componentWillUpdate
B.4.2.9 componentDidUpdate
B.4.2.10 componentWillUnmount
索引
コラム目次
ReactにおけるHTMLの検査
スタブ関数のその他の例
done()呼び出しに注意
E2Eテストの基礎