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

[cover photo]
  • 2015年04月 発行
  • 280ページ
  • ISBN978-4-87311-719-5
  • フォーマット Print PDF ePub mobi
  • 原書: Developing a React Edge

オライリー・ジャパンで書籍を購入:
定価2,808円

Ebook Storeで電子版を購入:
価格2,246円

Facebookが開発したJavaScriptライブラリ「React」の解説書。本書では、サンプルアプリケーションを用いてReact.jsのすべての側面を解説します。「第I部 基礎」でReactコンポーネントの作成と合成を学び、Reactの基本的な使い方を理解します。「第II部 応用」ではワンランク上のコンポーネント作成について学びます。「第III部 ツール」ではReactと共に使用して堅牢なアプリケーションを実装するためのツールについて学びます。最後の「第IV部 実践」では大規模なアプリケーション開発に必要な知識やWeb以外のユースケースについて解説します。読者はコンポーネントベースの最新のフロントエンド開発についての体系的な知識と技術を身につけることができます。日本語翻訳版の本書ではReactの開発環境の構築手順とAPIリファレンスを巻末付録として収録。

関連書籍

AngularJSアプリケーション開発ガイド
Backbone.jsアプリケーション開発ガイド
JavaScript: The Good Parts
Reactビギナーズガイド
Web API: The Good Parts
シングルページWebアプリケーション
実践 Selenium WebDriver
ステートフルJavaScript
モダン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テストの基礎

Feedback

皆さんのご意見をお聞かせください。ご購入いただいた書籍やオライリー・ジャパンへのご感想やご意見、ご提案などをお聞かせください。より良い書籍づくりやサービス改良のための参考にさせていただきます。
[feedbackページへ]