React Native
JavaScriptによるiOSAndroidアプリ開発の実践

[表紙]React Native ~JavaScriptによるiOS/Androidアプリ開発の実践

A5判/688ページ

定価(本体3,980円+税)

ISBN 978-4-297-11391-9

電子版

→学校・法人一括購入ご検討の皆様へ

書籍の概要

この本の概要

「iOS/Androidの2つのアプリをもっと効率良く開発したい」
「ハイブリッドアプリだと,速度やUIがネイティブより劣ってしまいがち」

こんな課題は,React Nativeを使えば解決できます。
React Nativeは,iOS/Androidの両方のアプリをたった1つのスキルセットで開発できるJavaScriptライブラリです。本書は,ReactやReact Nativeが生まれた背景を見直しながら,React Nativeの基本はもちろん,ReactやTypeScript,アプリ設計・開発,テスト,リリースまで,React Nativeによるアプリ開発のすべてを解説。日本でまだ無名だった頃からReact Nativeを追い続けた著者陣が,現場実践をふまえて開発手法を伝授します。
フロントエンドの方はもちろん,アプリ開発の技術選択を広げたいすべてのエンジニアにおすすめの1冊です。

こんな方におすすめ

  • 開発技術の幅を広げたいアプリエンジニア
  • 仕事の幅を広げたいフロントエンドエンジニア

この書籍に関連する記事があります!

モバイルアプリ開発の幅を拡げる
スマホが生活必需品となり,iOSとAndroidの2つのプラットフォームにおけるアプリ開発も欠かせないものとなりました。

目次

  • はじめに
  • 第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に提出する

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

    著者プロフィール

    髙木健介(たかぎけんすけ)

    ネットワーク構築,Web開発,ネイティブアプリ開発を経て,当時日本では無名だったReact Nativeを用いて医療系スタートアップ企業でプロダクトを構築。同時にReact Native Japanスタッフとして活動し,日本におけるReact Nativeの普及に尽力した。現在,クラスメソッド株式会社においてエンジニアリングマネージャーとして最高のチーム構築と後進の育成に努めている。
    Twitter:@janus_wel
    GitHub:januswel


    ユタマこたろう

    新卒入社した大手Sier企業にて,「たった1人のフロントエンドエンジニア」となり,社内向けフロントエンドフレームワークの制作をおこなう。その後,興味本位で触ったReact Nativeをきっかけに,同著者であり師となる髙木健介と出会い,同じくReact Native Japanスタッフとして普及活動をおこなう。現在は,エアークローゼットにてエンジニア,データサイエンティストの両チームの構築と育成に務める。
    Twitter:@YutamaKotaro
    GitHub:YutamaKotaro


    仁田脇理史(にたわきさとし)

    SIer,小売業でのバックエンドエンジニア,社内SEを経験後,株式会社エアークローゼットへ所属。ユタマこたろう氏の指導を受け,既存SwiftアプリからReact Nativeアプリへリプレースを牽引。React Nativeアプリを中心にAtomic Designの導入や,社内の日数見積の廃止,E2Eテストを使用したリリース前テストの自動化などの提案をおこない,サービス・プロダクトの改善活動をおこなっている。
    Twitter:@nitaking_
    GitHub:nitaking