内容紹介
本邦初のReact解説書! すべての情報が一冊にコンパクトにまとまっている!
Facebookが開発したJavaScriptライブラリ「React」の解説書。本書では、数多くのサンプルを用いてReact.jsのすべての側面を解説します。1章から7章でReactコンポーネントの作成と合成を学び、Reactの基本的な使い方を理解します。8章から13章ではワンランク上のコンポーネント作成について学びます。14章と15章ではReactと共に使用して堅牢なアプリケーションを実装するためのツールについて学びます。最後に16章と17章でReactを使ってアプリケーションを実際に作成します。読者はコンポーネントベースの最新のフロントエンド開発についての体系的な知識と技術を身につけることができます。
このような方におすすめ
JavaScriptプログラマー、Webアプリ開発者、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テストの基礎
続きを見る