目次
第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に提出する
- アプリの作成
- ストアの掲載情報
- アプリのリリース
- コンテンツのレーティング
- アプリのコンテンツ
- 価格と配布
- 公開
- さくいん