React Native＋Expoではじめるスマホアプリ開発 JavaScriptによるアプリ構築の実際

備考

地理空間系プログラマー。合同会社Georepublic Japanで（顔がおっさんなので）シニアエンジニアとして働く。専門分野は、地図タイルおよびWeb／スマートフォンアプリケーション開発。古くからMozillaコミュニティやLinux/OpenSourceコミュニティで活動し、某組の組長だったことから、いまだに「くみちょ」と呼ばれている。日本UNIXユーザ会理事、OSGeo財団日本支部理事、OpenStreetMap Foundation Japanのメンバーでもある。趣味はブレイクコアなどの音楽を聞くこと。Twitterは、@smellman。

目次

第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-1-1　nodistによるnode.jsのインストール（Windows）
　　2-1-2　nodebrewによるnode.jsのインストール（macOS/Linux）
　2-2　Expoを導入

第3章　エミュレータ／シミュレータによる確認
　3-1　Androidエミュレータのセットアップ
　　3-1-1　WindowsにおけるAndroid Studioのインストール
　　3-1-2　macOSでのAndroid Studioのインストール
　　3-1-3　LinuxでのAndroid Studioのインストール
　　3-1-4　Android Studioでエミュレータのセットアップ
　3-2　iOSシミュレータのインストール
　3-3　Expoの確認用プロジェクトと開発サーバの起動
　3-4　ExpoでAndroidエミュレータの確認
　3-5　iOSシミュレータでの確認
　3-6　Expoのネットワークについて
　3-7　実機での確認
　　3-7-1　Androidの実機での確認
　　3-7-2　iOSの実機での確認
　3-8　Expoの動作モード
　　3-8-1　Reload／Reload JS Bundle
　　3-8-2　Live Reload
　　3-8-3　Toggle Inspector／Toggle Element Inspector
　　3-8-4　Debug JS Remotely／Debug remote JS
　3-9　エディタを選ぶ
　　3-9-1　Atom
　　3-9-2　Visual Studio Code
　　3-9-3　EditorConfig

第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-3-1　逆ポーランド記法
　　5-3-2　レイアウトを作成
　　5-3-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-1-1　react-native-mapsとは
　　8-1-2　react-navigationとは
　8-2　トイレマップを作成
　　8-2-1　Overpass APIとは
　　8-2-2　turf.jsとは
　8-3　GPSロガーの作成

第9章　WebViewプログラミング
　9-1　経路探索アプリの作成
　9-2　WebViewにデータを渡す
　9-3　WebViewからデータを受け取る
　9-4　駅すぱあとWebサービスとの連携

第10章　ネイティブモジュールを利用した開発
　10-1　開発環境のセットアップ
　　10-1-1　Java 8以降のインストール
　　10-1-2　React Native CLI
　10-2　React Native Cameraで作るバーコードリーダー
　　10-2-1　Androidの実機テスト
　　10-2-2　iOSの実機テスト
　10-3　Mapbox Maps SDKで作るトイレマップ
　　10-3-1　Androidのセットアップ
　　10-3-2　iOSのセットアップ
　　10-3-3　アカウントの用意
　　10-3-4　アプリケーションの作成

第11章　Storeへの配信
　11-1　スプラッシュスクリーンの作成
　11-2　アイコンの作成
　11-3　Google Playでの配信
　　11-3-1　ExpoでのAPKファイルの作成手順
　　11-3-2　React NativeでのAPKファイルの作成手順
　11-4　App Storeでの配信
　　11-4-1　App Storeの準備
　　11-4-2　ExpoでのIPAファイルの作成およびApp Storeへの配信手順
　　11-4-3　React NativeでのApp Storeへの配信手順

第12章　React Native／Expoのバージョンアップ
　12-1　Expoのバージョンアップ
　12-2　React Nativeのバージョンアップ
　　12-2-1　react-native-git-upgradeによるアップグレード
　　12-2-2　react-native ejectによるアップグレード

付録
　A-1　tvOSプログラミング
　　A-1-1　環境構築
　　A-1-2　プログラムの修正
　　A-1-3　実機での検証
　A-2　Windowsプログラミング