Reactハンズオンラーニング 第2版
――Webアプリケーション開発のベストプラクティス

[cover photo]
  • 2021年08月 発行
  • 368ページ
  • ISBN978-4-87311-938-0
  • 原書: Learning React, 2nd Edition
  • フォーマット 本 PDF EPUB

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

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

Facebookが開発したJavaScriptライブラリ「React」の解説書。2013年にオープンソース化されたReactですが、ここ数年で大きな変更が加えられ、またReactを取り巻くエコシステムも大きく変化しました。本書では実際に動くコンポーネントを作りながら、最新のReactの記法について解説しつつ、最新のツールやライブラリも紹介します。初心者から中上級者まで、Reactの今をすばやく学習することができます。

関連書籍

Node.jsデザインパターン 第2版
初めてのGraphQL
初めてのJavaScript 第3版
初めてのThree.js 第2版
初めてのWebGL 2 第2版
ハンズオンJavaScript
ハンズオンNode.js
プログラミングTypeScript

賞賛の声
まえがき

1章 Reactの世界へようこそ
    1.1 本書のねらい
    1.2 Reactの過去と未来
        1.2.1 第2版の変更点
    1.3 環境の構築
        1.3.1 GitHubリポジトリ
        1.3.2 React Developer Tools
        1.3.3 Node.jsのインストール

2章 React学習に必要なJavaScriptの知識
    2.1 変数の定義
        2.1.1 constキーワード
        2.1.2 letキーワード
        2.1.3 テンプレート文字列
    2.2 関数の作成
        2.2.1 関数宣言
        2.2.2 関数式
        2.2.3 デフォルト引数
        2.2.4 アロー関数
    2.3 JavaScriptのコンパイル
    2.4 オブジェクトと配列
        2.4.1 デストラクチャリング
        2.4.2 配列のデストラクチャリング
        2.4.3 オブジェクトリテラルの改善
        2.4.4 スプレッド構文
    2.5 JavaScriptと非同期処理
        2.5.1 Promiseとfetch
        2.5.2 async/await
        2.5.3 Promiseの生成
    2.6 クラス宣言
    2.7 ECMAScriptモジュール
        2.7.1 CommonJSモジュール

3章 JavaScriptにおける関数型プログラミング
    3.1 関数型とは?
    3.2 命令型vs.宣言型
    3.3 関数型プログラミングの基本概念
        3.3.1 イミュータブルなデータ
        3.3.2 純粋関数
        3.3.3 データの変換
        3.3.4 高階関数
        3.3.5 再帰
        3.3.6 関数の合成
        3.3.7 アプリケーションの構築

4章 Reactの基本
    4.1 使用するライブラリ
    4.2 React要素
        4.2.1 ReactDOMで要素をブラウザに描画する
        4.2.2 子要素
        4.2.3 配列から子要素を生成する
    4.3 Reactコンポーネント
        4.3.1 Reactコンポーネントの歴史

5章 ReactとJSX
    5.1 JSXを使ってReact要素を記述する
        5.1.1 JSXとHTMLの違い
        5.1.2 BabelによるJSXの変換
    5.2 レシピのコンポーネントをJSXで記述する
        5.2.1 Reactフラグメント
    5.3 webpackを使ってビルド環境を構築する
        5.3.1 プロジェクトの作成
        5.3.2 バンドルファイルのロード
        5.3.3 ソースマップ
        5.3.4 Create React App

6章 ステート管理
    6.1 StarRatingコンポーネント
        6.1.1 useStateフックを使ってクリックイベントに対応する
        6.1.2 再利用性を考慮したリファクタリング
    6.2 アプリケーション全体のステート管理
        6.2.1 ステート値をコンポーネントツリーの上から下に伝える
        6.2.2 ユーザーの操作をコンポーネントツリーの下から上に伝える
    6.3 フォーム入力を処理するアプリケーション
        6.3.1 refを使ったデータアクセス
        6.3.2 制御されたコンポーネント
        6.3.3 カスタムフック
        6.3.4 入力をステート値に反映させる
    6.4 Reactコンテキスト
        6.4.1 コンテキスト経由でデータを公開する
        6.4.2 useContextフックからデータを取得する
        6.4.3 コンテキストとステートの併用
        6.4.4 コンテキストとカスタムフックの併用

7章 フック
    7.1 useEffect
        7.1.1 依存配列
        7.1.2 依存配列の同一性チェック
    7.2 useLayoutEffect
        7.2.1 フックの使い方に関するルール
    7.3 useReducer
        7.3.1 useReducerを使った複雑なステート管理
    7.4 コンポーネントのパフォーマンス改善
        7.4.1 いつパフォーマンスチューニングを行うか

8章 データ
    8.1 データの受信
    8.2 データの送信
        8.2.1 fetchを使ったファイルアップロード
        8.2.2 リクエストの認証
    8.3 データの保存
    8.4 非同期リクエストの状態管理
        8.4.1 レンダープロップ
        8.4.2 仮想リスト
        8.4.3 useFetchフック
        8.4.4 Fetchコンポーネント
    8.5 複数のリクエスト
        8.5.1 関数のメモ化
        8.5.2 ウォーターフォールリクエスト
        8.5.3 並列リクエスト
    8.6 GraphQL
        8.6.1 GraphQL API
        8.6.2 JavaScriptでGraphQLを利用する

9章 サスペンス
    9.1 エラーバウンダリ
    9.2 コードスプリッティング
    9.3 Suspenseコンポーネント
        9.3.1 サスペンスの応用
        9.3.2 Promiseをthrowする
        9.3.3 サスペンスデータソース
    9.4 Fiber

10章 テスト
    10.1 ESLint
        10.1.1 ESLintプラグイン
    10.2 Prettier
        10.2.1 Prettierを設定する
        10.2.2 VSCodeでPrettierを使用する
    10.3 型チェック
        10.3.1 PropTypes
        10.3.2 Flow
        10.3.3 TypeScript
    10.4 テスト駆動開発(TDD)
        10.4.1 TDDへの移行
    10.5 Jest
        10.5.1 テスト環境の構築
    10.6 Reactコンポーネントのテスト
        10.6.1 React Testing Library
        10.6.2 要素の検索
        10.6.3 イベントのテスト
        10.6.4 コードカバレッジ

11章 ルーティング
    11.1 React Routerの導入
    11.2 React Routerプロパティ
    11.3 ネストしたルート
    11.4 リダイレクト
    11.5 ルーティングパラメータ
    11.6 ナビゲーション関数

12章 サーバーサイドReact
    12.1 アイソモーフィックとユニバーサル
        12.1.1 クライアントとサーバーの環境差分
    12.2 Reactにおけるサーバーサイドレンダリング
    12.3 Next.js
    12.4 Gatsby
    12.5 Reactの未来

付録A 開発環境の構築
    A.1 npm
    A.2 ESLint
    A.3 Prettier
    A.4 Jest
    A.5 webpack
    A.6 Babel
    A.7 まとめ

索引

コラム目次
    旧クラスコンポーネントにおけるステート管理
    レガシーコードにおけるsetState
    shouldComponentUpdateとPureComponent

Feedback

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