【2022年】Reactの参考書「おすすめ8選/人気本BEST10」

Chapter 1　Web開発の動向
1　現在の課題とその背景
　　　1　Webフロントエンドを取り巻く環境
　　　2　デザイナーとエンジニア
　　　3　開発現場の悩み
　　　4　フロントエンジニアの理想像
2　開発者が考えるべきこと
　　　1　ブラウザ実装
　　　2　HTMLとCSS
　　　3　CSSが抱える問題
3　設計の必要性
　　　1　今までのWebフロントエンドコード
　　　2　コードは生き物
Chapter 2 Reactの基本
1　Reactの概略
　　　1　Reactの特徴
　　　2　React推奨の理由
2　基本構文と実行環境
　　　1　ECMAScript
　　　2　開発環境の準備
　　　3　オンラインエディタCodeSandbox
3　JSX
　　　1　JSXとは
　　　2　Babel
4　Reactの記述方法
　　　1　Components
　　　2　render
　　　3　Functional Components
　　　4　Props
　　　5　State
　　　6　イベント
　　　7　key
5　ライフサイクル
　　　1　Reactにおけるライフサイクル
　　　2　処理の流れ
　　　3　Functional Componentsのライフサイクル
　　　［コラム］Babel 7へのアップデート
Chapter 3　Atomic Design
1　Atomic Designとは
　　　1　Atomic Designの基本概念
　　　2　Atoms
　　　3　Molecules
　　　4　Organisms
　　　5　Templates
　　　6　Pages
2　メリット
　　　1　デザインシステム
　　　2　開発におけるデザインの基準
3　コンポーネント開発のUIデザイン
　　　1　スタイリング
　　　2　レイアウト
　　　3　トーン＆マナー
4　Reactとの相性
　　　1　肥大化しないコンポーネント
　　　2　拡張性
　　　［コラム］Fragments
Chapter 4　ソースコードのビルド89
1　ビルドする理由
　　　1　Node.js
　　　2　人間がやるべきこと・機械にやらせること
　　　3　開発環境の拡張性
2　webpack
　　　1　webpackの基本
　　　2　webpackのセットアップ
　　　3　webpack.config.js
　　　4　ローダー
　　　5　プラグイン
3　webpack-dev-server
　　　1　基本的な使い方
　　　2　Hot Module Replacement
Chapter 5　コンポーネントの実装
1　ベストプラクティス
　　　1　PresentationalとContainer
　　　2　データの反映
　　　3　Local State
2　コンポーネントレベル
　　　1　Atomic Designとの照合
　　　2　Molecules・OrganismsとTemplates・Pages
　　　3　実運用と妥協点
3　プロジェクト構成
　　　1　コンポーネントディレクトリ
　　　2　UIライブラリの活用
4　サーバーサイドレンダリング
　　　1　サーバーサイドレンダリングとは
　　　2　Reactでのサーバーサイドレンダリングの実践
Chapter 6　CSSの実装
1　コンポーネント化とCSS
　　　1　従来のアプローチ
　　　2　解決すべき課題
2　CSS in JS
　　　1　CSS in JSの基本概念
　　　2　CSS modules
　　　3　styled-components
　　　4　styled-jsx
3　CSSの分離
　　　1　依存性の分離
　　　2　ローカルスコープの実現
　　　3　PostCSS
　　　［コラム］Portals
Chapter 7　ロジックの実装
1　コンポーネントの状態管理
　　　1　フロントエンドが持つ状態とは
　　　2　従来の状態管理とFlux
2　Reduxの基本
　　　1　基本概念と3原則
　　　2　実装
　　　3　データフロー
3　Reduxの実践
　　　1　Reactコンポーネントとの接続
　　　2　Middleware
　　　3　Storeを元にしたUI制御
4　非同期処理
　　　1　Reduxにおける遅延処理
　　　2　redux-thunk
　　　3　redux-saga
　　　［コラム］Error Boundary
Chapter 8　プロダクトの品質
1　品質の維持
　　　1　プロダクトの品質
　　　2　品質維持の必要性
　　　3　品質維持のポイント
2　コンポーネントのテスト
　　　1　テストフレームワーク
　　　2　Reactコンポーネントのテスト
　　　3　enzyme
　　　4　enzymeのレンダリング処理
3　Lint
　　　1　ESLint
　　　2　ESLintのセットアップ
　　　3　Rule
　　　4　stylelint
4　flow
　　　1　型の恩恵
　　　2　flow
　　　3　flowの実践
　　　4　型指定の応用と型定義
5　スタイルガイド
　　　1　スタイルガイドの必要性
　　　2　Storybook
　　　3　Storybookのセットアップ
　　　4　ストーリーファイルの作成
　　　5　アドオン

吉田裕美（ヨシダユウミ）
ＣＡＤのベンチャー企業でＣＡＤのコア部分の開発に従事したあと、２０００年に独立し有限会社ＥＹ-Ｏｆｆｉｃｅを設立。ＷｅｂやｉＯＳアプリの受託開発を開始し多数のＷｅｂアプリやｉＯＳアプリを開発、また独自のプログラム開発教育も行うようになる。ここ数年はＲｕｂｙ　ｏｎ　Ｒａｉｌｓ、ｉＯＳ、Ｒｅａｃｔを使ってアプリの開発や教育を行っている（本データはこの書籍が刊行された当時に掲載されていたものです）

●はじめに
■■■第1章　React / React Nativeの概要とその背景
■■1-1　Reactとは
■特徴1. Declarative
■特徴2. Component-Based
■コラム　コンポーネントベースを採用しているその他の標準化仕様・フレームワーク
■特徴3. Learn Once, Write Anywhere
■■1-2　Reactが必要とされた背景
■React isn't an MVC framework
■React doesn't use templates
■Reactive updates are dead simple
■コラム　表示速度と仮想DOM
■■1-3　React Nativeが必要とされた背景
■1.Native Experience
■コラム　ネイティブUIとブリッジ
■2.Learn Once, Write Anywhere
■3.Keeping Development Velocity
■■■第2章　TypeScriptとECMAScript 2015の基本を押さえる
■■2-1　TypeScriptとは
■型があることによる2つのメリット
■■2-2　TypeScriptの構文
■明示的な型付け
■暗黙的な型付け
■基礎的な型
■新たな型を作成する
■noUnusedParametersオプションとアンダーバー
■Optional Chaining
■Assertion Functions
■コラム　効率的な型付け
■■2-3　ECMAScript 2015の新記法
■letとconstによる変数定義
■Arrow Functions
■Default Parameter Values
■Template Literals
■Property Shorthand
■Computed Property Names
■Destructuring
■SpreadOperator
■classキーワード
■非同期処理
■ES Modules
■■■第3章　開発環境の構築
■■3-1　IDEの導入
■コード編集ツールが満たすべき機能
■■3-2　Visual Studio Codeのインストールと設定
■Visual Studio Codeをインストールする
■TypeScriptの設定
■コラム　Visual Studio Codeの設定とその対象
■■3-3　React Nativeプロジェクトのセットアップ
■HomeBrewのセットアップ
■Node.jsのセットアップ
■yarnのインストール
■watchmanのインストール
■Xcodeのインストール
■CocoaPodsのインストール
■Java8のインストール
■Android Studioのインストール
■古いコマンドラインツールのアンインストール
■React Nativeプロジェクトの生成
■環境診断
■Android用の設定
■■3-4　開発効率を向上させるプロジェクト設定
■依存パッケージのバージョンを固定する
■コラム　セマンティックバージョニングとpackage.json
■Prettierの設定
■ESLintの設定
■EditorConfigの設定
■■3-5　GitHubのセットアップ
■GitHubを用いた開発の流れ
■レビューを推奨する設定
■■■第4章　React Nativeの基本
■■4-1　React Nativeを使った開発
■React Nativeを起動する
■TypeScriptファイルを1つにまとめるMetro Bundler
■RedBox／YellowBox
■■4-2　React Nativeのデバッグメニュー
■Reload
■Debug
■Show Inspector
■■4-3　コンポーネントでUIを作成する
■JSX文法で開発する
■コンポーネントを定義する
■式の評価
■コラム　truthy/falsyとショートサーキット評価
■フラグメント
■style propsによる装飾
■Flexbox
■props
■state
■コラム　propsとstateの設計
■副作用を持つコンポーネント
■Context
■ref
■■4-4　React Native標準コンポーネント
■Viewコンポーネント
■Textコンポーネント
■Imageコンポーネント
■sourceプロパティによる表示画像の指定
■resizeMode propsによる拡大縮小時の挙動指定
■背景画像を指定する
■ScrollView
■FlatList/SectionList
■Touchable系コンポーネント
■Buttonコンポーネント
■TextInputコンポーネント
■コラム　React HooksとCustom Hooks
■StatusBarコンポーネント
■ActivityIndicatorコンポーネント
■Switchコンポーネント
■■4-5　React Native標準ユーティリティー
■Alert
■AppState
■BackHandler
■Clipboard
■Dimensions
■Linking
■PermissionsAndroid
■Share
■Vibration
■■4-6　コミュニティから提供されているコンポーネント
■AsyncStorageモジュール
■SafeAreaViewコンポーネント
■ProgressView／ProgressBarAndroidコンポーネント
■■4-7　コンポーネントを作成する際の注意点
■モバイルアプリの制限
■propsとstateの更新頻度を抑える
■プラットフォームに沿ったコンポーネント作成
■コラム　バンドルされたJSの取得方法
■■4-8　コンポーネントにアニメーションをつける
■アニメーションの考え方
■React Nativeにおけるアニメーション実装
■効果的なアニメーション
■■■第5章　作成するアプリケーションの仕様策定
■■5-1　リーンキャンバス
■■5-2　ユースケース
■■5-3　画面遷移を考える
■仕様書のラフ画
■Initial
■ChooseLogin
■SignIn
■SignUp
■Home画面
■Statics
■Detail
■UserInfo
■Loading
■アプリを実装する手順
■■■第6章　テストによる設計の質の向上
■■6-1　React Nativeのテストの2つの目的
■要求や仕様を満たしていることを確かめるテスト
■設計改善のためのテスト
■■6-2　Jestによるユニットテスト
■コラム　テストで用いるパッケージの選択
■最初のテスト実行
■テストの書き方
■テストを書く
■テストを書かない対象を見極める
■■6-3　CIを取り入れ安定した開発をする
■CircleCIのセットアップ
■■■第7章　Navigationの概要と実装
■■7-1　画面遷移の基本
■Webアプリケーションの画面遷移
■モバイルアプリケーションのルーティング
■Navigationとは
■react-navigationの導入
■学習環境を準備する
■構成を変更する
■■7-2　Stackを実装する
■Stackの実装
■ライブラリの読み込み
■スタイルの定義
■画面の作成
■ルーティングの実装
■NavigationContainerを使用する
■■7-3　Tabを実装する
■Tabの実装方法
■Tabの種類
■■7-4　Drawerを実装する
■■7-5　Optionsを定義する
■Optionsを定義する2つの方法
■navigationOptionsを動的に変化させる
■options、screenOptionsで受け取れる引数
■■7-6 headerModeとmode
■mode
■headerMode
■■7-7　サンプルを作りながら、ページ遷移を実装してみよう
■プロジェクトの準備
■アプリケーションの起動
■事前準備
■作るべき画面を整理する
■画面パスを管理するためのファイル作成
■定数化する理由
■画面作成の事前の準備
■各画面の作成
■画面の接続
■ルーティングの確認
■Tabを組み合わせる
■TabNavigatorとStackNavigatorを組み合わせる
■DrawerNavigatorとStackNavigatorを組み合わせる
■ドロワー遷移する遷移先でタブが表示されないようにする
■Modalを組み込む
■複数のStackNavigatorを使う
■■■第8章　Atomic Designとコンポーネントの実装
■■8-1　コンポーネント設計のメリット
■1.コンポーネントの再利用によって開発効率が向上する
■2.保守面のメリット
■3.関心の分離を実現できる
■4.テスト面におけるメリット
■■8-2　ユニットテストを実装する
■ライブラリを用意する
■スナップショットテスト
■動作のテスト
■■8-3　Atomic Designを理解する
■ボタンをAtomsとして分離する
■■8-4　アプリケーションのレイアウトを整える
■アプリケーションのテーマ設定
■各画面に色を入れ込む
■StackNavigatorにテーマを適用する
■DrawerNavigatorへのデザイン適用
■TabNavigatorにデザインを適用する
■■8-5　アプリケーションの画面を作り込む
■react-native-paperをインストールする
■CHOOSE_LOGINの実装
■ChooseLoginの作成
■Signupの作成
■Signinの作成
■Initialの実装
■Homeの作成
■Todoを作成する
■Inputの作成
■Detailの作成
■UserInfoの作成
■Statisticsの作成
■■■第9章　データフローの設計および実装
■■9-1　Reduxとは
■特徴1. Single source of truth
■特徴2. State is read-only
■特徴3. Changes are made with pure functions
■どのような場合にReduxを使うのが有効か
■React Stateの限界
■■9-2　Reduxの基本
■Reducerのベース作成と初期状態の設計
■Actionの設計
■Storeの作成
■Reduxの世界とReactの世界をつなぐ
■コラム　useSelector、useDispatchとconnectの比較
■Reduxにおけるディレクトリー構造
■Ducks
■■9-3　Reduxにおける非同期処理
■ネットワーク通信の結果をActionに載せdispatchする
■Redux middleware
■middlewareを実装する
■コラム　便利なmiddleware
■ReduxにおけるStore設計
■表示用データの生成
■アプリケーションが動作する環境や状況の文脈データ
■ディレクトリー構成を整理する
■■9-4　アプリのデータフローの実装
■必要パッケージのインストール
■ドメイン層の実装
■todo管理モデル
■Ducks Moduleの定義
■Storeの実装
■Selectorの実装
■Container Componentの実装
■ルートコンポーネントの実装
■その他、画面制御に必要なデータ
■■■第10章　Firebaseを使ったバックエンド連携
■■10-1　Firebaseとは
■Firebase Authentication
■Firebase Cloud Firestore
■Firebase Analytics
■■10-2　Firebaseをアプリへ組み込む
■インストール
■認証を実装する
■データ同期を実装する
■ユーザートラッキングを実装する
■■■第11章　E2Eを実装する
■■11-1　E2Eテストとは
■E2Eテストの範囲
■E2Eテストの対象基準
■React NativeにおけるE2Eテストパッケージ
■■11-2　Detoxによる検証
■依存パッケージのインストール
■プロジェクトへDetoxのインストール
■Detoxでの検証方法
■Debug/Releaseビルド
■API
■■11-3　Detoxテストを実装する
■今回作成するテストケース
■Detoxでテストを実装する
■ChooseLoginまでのテストケース
■テスト：～Home
■画面遷移テスト：SignUpページ
■画面遷移テスト：SignInページ
■アカウント登録
■サインアウト
■サインイン
■テスト：Todo追加
■Todo完了
■Todo更新
■Todo削除
■■11-4　CIでE2Eテストをおこなう
■Bitriseの利点と欠点
■Bitriseのセットアップ
■Detoxビルドの追加
■Bitrise Workflow
■■■第12章　アプリストアへの公開
■■12-1　リリースビルド
■Firebaseの本番環境を作成する
■iOSのビルド設定
■Androidのビルド設定
■コラム　開発用とリリース用を共存させる
■■12-2　アプリをApp Storeに提出する
■アイコン設定
■App IDの登録
■アプリの登録
■アプリの送信
■アプリの登録の続き
■リリース
■■12-3　アプリをGoogle Play Consoleに提出する
■アプリの作成
■ストアの掲載情報
■アプリのリリース
■コンテンツのレーティング
■アプリのコンテンツ
■価格と配布
■公開
●さくいん

第1章　React Nativeとは
　1-1　React Nativeとは
　1-2　Expoとは
　1-3　Create React Native Appとは
　1-4　React NativeとExpo/CRNAの違い
第2章　開発環境の構築
　2-1　node.jsのインストール
　2-2　Expoを導入
第3章　エミュレータ／シミュレータによる確認
　3-1　Androidエミュレータのセットアップ
　3-2　iOSシミュレータのインストール
　3-3　Expoの確認用プロジェクトと開発サーバの起動
　3-4　ExpoでAndroidエミュレータの確認
　3-5　iOSシミュレータでの確認
　3-6　Expoのネットワークについて
　3-7　実機での確認
　3-8　Expoの動作モード
　3-9　エディタを選ぶ
第4章　TODOアプリで学ぶ初めてのReact Native
　4-1　作成準備
　4-2　import
　4-3　const／let／var
　4-4　Componentとrender関数
　4-5　Reactにおけるkeyとloop
　4-6　setState関数
　4-7　React.Componentのライフサイクル
　4-8　JavaScriptの非同期処理
第5章　電卓アプリ開発で学ぶFlexboxレイアウト
　5-1　Flexboxの「軸」
　5-2　Flexboxでの配置
　5-3　電卓アプリを作ってみよう
　5-4　画面の回転
第6章　UIライブラリによるTODOアプリの拡張
　6-1　nativebaseとReact Native Elements
　6-2　React Native Elementsの導入
　6-3　SearchBarの導入
　6-4　テキスト入力とボタンをReact Native Elementsに置き換える
　6-5　ListItemを実装
　6-6　iPhone Xへの対応
第7章　React Nativeの状態管理
　7-1　Fluxアーキテクチャとは
　7-2　ReduxによるTODOアプリの状態管理
　7-3　redux-persistによる永続化
第8章　地図アプリとGPSロガーアプリ制作で学ぶ実践的React Native開発
　8-1　react-native-mapsとreact-navigation
　8-2　トイレマップを作成
　8-3　GPSロガーの作成
第9章　WebViewプログラミング
　9-1　経路探索アプリの作成
　9-2　WebViewにデータを渡す
　9-3　WebViewからデータを受け取る
　9-4　駅すぱあとWebサービスとの連携
第10章　ネイティブモジュールを利用した開発
　10-1　開発環境のセットアップ
　10-2　React Native Cameraで作るバーコードリーダー
　10-3　Mapbox Maps SDKで作るトイレマップ
第11章　Storeへの配信
　11-1　スプラッシュスクリーンの作成
　11-2　アイコンの作成
　11-3　Google Playでの配信
　11-4　App Storeでの配信
第12章　React Native／Expoのバージョンアップ
　12-1　Expoのバージョンアップ
　12-2　React Nativeのバージョンアップ
付録
　A-1　tvOSプログラミング
　A-2　Windowsプログラミング

１　ＪａｖａＳｃｒｉｐｔフロントエンドフレームワークの最新動向（ＪａｖａＳｃｒｉｐｔフロントエンドフレームワークの興隆
ＳＰＡ、ＰＷＡ-フロントエンド実装技術の最新トピック）
２　フロントエンドＪａｖａＳｃｒｉｐｔ開発のための基礎知識と環境構築（フロントエンドＪａｖａＳｃｒｉｐｔ開発のための環境構築
フロントエンドＪａｖａＳｃｒｉｐｔ開発のための基礎知識
フロントエンドＪａｖａＳｃｒｉｐｔ開発のためのサーバ構築）
３　Ｓｌａｃｋライクなサンプルで比べて学ぶＲｅａｃｔ
Ａｎｇｕｌａｒ
Ｖｕｅ．ｊｓ（Ｒｅａｃｔ入門＆徹底活用
Ａｎｇｕｌａｒ入門＆徹底活用
Ｖｕｅ．ｊｓ入門＆実践活用）
４　Ｓｌａｃｋライクなサンプルで学ぶＲｅａｃｔ　Ｎａｔｉｖｅ（Ｒｅａｃｔ　Ｎａｔｉｖｅ入門＆徹底活用）