タイトルのとおり、 React Native の本を共著で書きました。
gihyo.jp
発売日
新型コロナウイルスの影響で大型書店が軒並み休業となり、売上をそういった書店での初動に頼る技術書は発売日延期ということのようです。 Amazon その他では 5/30 の発売となっているようですが、仮日程です。
https://www.amazon.co.jp/dp/4297113910/?coliid=I1M06P05C023EN&colid=PMKGIDJ61HPE&psc=1&ref_=lv_ov_lig_dp_it_imwww.amazon.co.jp
ただし、当初の発売日であった 4/27 に電子版が発売となります。プラットフォームは次です。
Gihyo Digital Publishing さんのページはこちらです。
gihyo.jp
内容
688 ページです。目次は長いので折りたたんでいます。
はじめに
第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による変数定義
ArrowFunctions
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による拡大縮小時の挙動指定
背景画像を指定する
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 画面遷移を考える 279
仕様書のラフ画
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 画面遷移の基本 296
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に提出する
アプリの作成
ストアの掲載情報
アプリのリリース
コンテンツのレーティング
アプリのコンテンツ
価格と配布
公開
さくいん
Frontend シリーズの第 2 弾として発売されます。第 1 弾は五藤祐典さんの Atomic Design 本です。
gihyo.jp
ユタマこたろう さんと nitawaki さんとの共著です。僕の担当はユタマさんと本の全体像とサンプルアプリの仕様を決め、第 1 章から第 6 章と第 9 章、第 10 章、第 12 章を書き、章に対応する内容をサンプルアプリに実装しました。
かなりのボリュームですが、初学者をターゲットとしてかなり基礎から説明しているのでこれだけの紙面が必要となりました。これ一冊で TypeScript の基礎、 ECMAScript 2015 の基礎、 React の基礎、 React Native の大枠を理解し、基礎的なものならアプリ作成とメンテナンスが可能となるレベルまでステップアップ可能な構成としました。
また、初学者のみならずすでに使っている方も新たな知識を得られるよう、現場のノウハウを散りばめ、締め切りギリギリまで各種依存パッケージを最新に更新していました。 React Navigation v5 の実践的な内容はユタマさんの努力の賜物ですし、 E2E で開発で安定感を得るために nitawaki さんも最後まで走ってくれました。
さらに本書は React Native 界隈の知識のベースラインとして機能するよう構成しています。次は長くてボツになった「おわりに」です。
フロントエンド開発は流行が速く、勉強するのが大変だ、という時代ではなくなりました。ベストプラクティスが週ごと、短いときは日ごとに変化していく状況はすでに過去のものです。アプリ構築における定石が蓄積されはじめ、開発をはじめるためのハードルも日々下がっています。
本書はReact Nativeの解説書ですが、現代のソフトウェア開発や事業構築の方法論における定石や共通認識のまとめという側面も持っています。執筆陣がスタートアップ企業で経験してきたことが、文脈の解説とともにそのまま散りばめられているのです。ぜひこの生の体験に触れてみてください。少しでも熱量を感じることができたなら、ぜひ手を動かして自分のものとしてください。
裏を返すと、本書の執筆は非常に骨が折れました。フロントエンドの文脈のみならず、様々な技術の融合であるReact Nativeを、ひとつひとつ地固めをしながら解説する必要があったのです。編集を担当してくださった西原さまには何度も相談し、スケジュール延長にご快諾いただきました。この場を借りてお礼申し上げます。
長い時間がかかったことは事実ですが、初学者でも実力がつく書籍になった自信があります。なにより、フロントエンドエンジニア間で共有できるベースラインを築く作業ができたことは誇らしいと感じています。本書で得た知識をもとに、職場や勉強会での議論に花を咲かせてくださると光栄の極みです。
ただし、本書に書かれていることが全てではありません。エッジケースでのみ有用な手法や、現在メインストリームでない技術の潮流については触れられていません。また、書き上げた直後から情報は古くなります。ぜひ、継続的なインプットを続けてください。本書を読むことで、同時に学習するための地力も身についているはずです。
この思いが結実した本となっていると思います。
謝辞
共著のユタマこたろうさん、 nitawaki さん、おかげさまで出版までこぎつけましたね。特にユタマさんはかなり長い間一緒に議論しながら書いていた気がします。仕事終わってからもう一度気合を入れる、という二重生活をお互いによく頑張りました。
編集の西原さまには最後までご面倒をおかけしました。 React Hooks が出た際の書き直しの相談など、様々なお願いや相談に載っていただいてありがとうございます。おかげさまでいい本に仕上がったと思います。さらに、献本を電子版で可能としてくださった敏腕ぶりで最後まで頼りっぱなしでした。
また、カバーデザインをしていただいたキタダデザインさま、本文デザイン・レイアウトをしていただいた SeaGrape さま、図版作成のご協力をいただいた石橋力さま、ありがとうございました。みなさまのおかげで読みやすく、主張のあるカバーとなりました。
最後に、妻に感謝を。帰りが遅くなっても休日もずっと書いていても、許容し、執筆を支えてくれてありがとう。
