概要

ReactとReduxをインストールから本番デプロイまで一冊で習得する

想定読者

JavaScriptの基礎があり、Reactをゼロから体系的に学びたいフロントエンド入門者。create-react-appでの環境構築から、SSR(サーバサイドレンダリング)を含む本格的なSPA開発の全体像を掴みたい人。

こんな人には向いていない

• すでにReact・ReduxをプロジェクトでHooksベースで使いこなしている開発者。2018年刊行でHooks以前の設計パターンが中心のため、現代的なReact(v16.8以降)の知識を深掘りしたい人には別書が適している。
• TypeScriptでのReact開発を前提としている人。本書のサンプルコードはJavaScript(ES2015+)ベースであり、TypeScript統合は扱っていない。
• SSRやNext.jsの詳細なアーキテクチャを追求したい中〜上級者。サーバサイドレンダリングの章は概念と導入に留まる。

読了後にできるようになること

• Flux/Reduxのデータフロー(Action/Reducer/Store)の概念を理解し、アプリケーション状態を一元管理できる
• JSXの文法とコンポーネント指向の設計原則を習得し、再利用可能なUIコンポーネントを作成できる
• react-routerを使った画面遷移(SPA routing)を実装できる
• redux-middlewareとReduxの非同期処理パターン(redux-thunk等)を実装できる
• Material-UIなどのUIライブラリを導入してアニメーションを含む画面を構築できる
• Jestを用いたReactアプリケーションのテスト作成と、Heroku等へのデプロイ手順を一通り実施できる

本書のキー概念(章解説)

• 第 1 章 React・Reduxとは？ — Flux設計思想とReduxの位置付けを解説。概念理解の基礎固めに相当する章。
• 第 2 章 create-react-appで開発をはじめよう — 環境構築を最短で終えるためのチャプター。詰まりやすいポイントがコンパクトにまとまっている。
• 第 3 章 JSX — JSXの文法ルールを体系的に整理。HTML経験者が引っかかりやすいポイントを網羅。
• 第 4 章 Reactコンポーネント — コンポーネント指向の中核。Propsとstateの使い分けはここで理解する。
• 第 5 章 Reduxでアプリケーションの状態を管理しよう — 本書の中心的なトピック。Action・Reducer・Storeの三要素を実装しながら学ぶ。
• 第 6 章 ルーティングを実装しよう — react-routerによるSPA遷移。ブラウザ履歴との連携も扱う。
• 第 7 章 ReduxMiddleware — middlewareの仕組みと自作パターン。redux-loggerなど定番middlewareの使い方を習得できる。
• 第 8 章 Reduxの非同期処理 — SPAに必須の非同期API呼び出しをRedux上でどう扱うかを学ぶ実践的な章。
• 第 9 章 UIをきれいにしよう — Material-UIを用いたスタイリングとアニメーション実装。実務での画面品質向上に直結する。
• 第 10 章 より実践的なアプリケーションを作ろう — 本書最大の総合演習。1〜9章の知識を統合してアプリを完成させる。前章の復習として機能する。
• 第 11 章 アプリケーションのテストを書こう — Jestを使ったコンポーネントテスト。教材で扱われることが少ない領域を補える章。
• 第 12 章 作ったアプリケーションを公開しよう — デプロイ手順を網羅。開発から公開までの一連の流れを完走できる。
• 第 13 章 サーバサイドレンダリング — SEOやFCP改善の動機となるSSRの概念と基本実装を紹介する導入章。

ハイライト

• インストールの解説から、チュートリアルを通したコードの説明など、Reactを用いた開発がはじめての方でも安心して入門することができます。また情報が少ないテストやデプロイ、またUI/UXの適切な設定など実際の開発の現場で、役立つ事柄についても詳しく説明しています。(テストとデプロイまで扱う入門書は当時珍しく、本書の差別化ポイントが端的に示されている)

編集メモ

Qiita言及記事0件・累計likes 0。Rakutenランキング履歴なし。2018年刊行でHooks以前の内容のため、現時点では補完的な選択肢として位置付ける。

読む前に押さえておきたいこと

• JavaScriptのES2015+構文(アロー関数・分割代入・モジュールimport/export)の基本的な読み書き
• HTMLとCSSによるページ構築の経験
• npmやNode.jsのコマンドライン基本操作(package.jsonの読み方・npm installの実行)

学習のコツ

• 1〜4章はReactの基礎固め、5章からReduxの核心に入る構成のため、Reduxに既存の知識がある読者は5〜8章を重点的に読むと効率的。
• 10章の総合演習は1〜9章の知識を統合する設計になっているため、詰まったときは前の章に戻る参照読みが有効。
• 11章(テスト)と12章(デプロイ)は独立度が高く、Reactの知識がある読者が特定スキルだけ補いたい場合に単独で参照できる。
• 13章のSSRは概念紹介に留まるため、SSRを本格実装したい場合はNext.jsの公式ドキュメントや専門書を次のステップとして参照するとよい。