入門 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テストの基礎