はじめに

第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に提出する

• アプリの作成
• ストアの掲載情報
• アプリのリリース
• コンテンツのレーティング
• アプリのコンテンツ
• 価格と配布
• 公開

• さくいん