概要

ExpoでiOS/Android両対応アプリをJavaScriptで構築する

想定読者

ReactやJavaScriptでWebアプリを開発した経験があり、スマートフォン向けネイティブアプリ開発へ踏み出したいWeb系開発者

こんな人には向いていない

• JavaScript/Reactの基礎が未習得の状態では、本書はJS文法の説明から始まらないため独力での読み進めが困難
• 2018年出版のため、最新のExpo SDK(SDK 50以降)やReact Native新アーキテクチャを前提に開発を始めたい読者は、API変更への対応を自力で補う必要がある
• iOS/AndroidのネイティブSDKを直接操作する高度なカスタマイズが主目的の読者には、Expoの抽象化レイヤが制約として働く局面が多い

この本で身につくこと

• Expo CLIで開発環境をゼロから構築し、実機・エミュレータ両方でのデバッグフローを確立できる
• FlexboxレイアウトでiOS/Android共通のレスポンシブUIを設計できる
• FluxアーキテクチャによるReact Nativeアプリの状態管理パターンを実装に落とし込める
• GPS・カメラなどスマートフォン固有のデバイス機能をExpo API経由で利用できる
• React Native CLIによるネイティブモジュール統合でExpoサンドボックスを超えた拡張を行える
• Google Play/App Storeへのアプリ配信フローをひとおり習得できる

ハイライト(外部からの言及)

ほとんどのコードをJavaScriptで記述でき、AndroidとiOSに両対応したネイティブアプリの開発が可能です。コンポーネントを組み合わせてUIを構築できます。 — 出典

クロスプラットフォーム開発の核心価値が端的に示されており、本書を手に取る動機と直結する記述

本書は、Web開発の知識があり、これからスマートフォンのネイティブアプリ開発に取り組む人に向けて書かれています。 — 出典

想定読者を明示した一文。「Web知識あり・モバイル未経験」という具体的なプロファイルを確認できる

読了後にできること

Before(読む前): Webアプリは構築できるが、iOS/Android両対応のネイティブアプリのビルドと配信の経路が分からない

After(読み終えた後): ExpoワークフローでTODOアプリから地図・GPS連携アプリまで実装し、App Store/Google Playに配信できる

章立て

第1章 React NativeとExpo/CRNAの概要

全体像把握に留める。手を動かすのは2章から

第2章 Node.jsとExpoの導入

第3章 エミュレータ/シミュレータとデバッグ環境の構築

実機確認方法も解説。詰まった場合は12章と照合するとよい

第4章 TODOアプリでReact Nativeの基本を習得

コンポーネント設計の感覚を掴む基礎演習の核。写経だけでなく自分で改造してみると定着が速い

第5章 Flexboxレイアウト(逆ポーランド電卓)

電卓UIを素材にレイアウトの仕組みを体系的に学ぶ。意図を理解してから写経すると効果的

第6章 UIライブラリを使ったTODOアプリの拡張

第7章 FluxアーキテクチャによるTODOアプリの再設計

状態管理の考え方を掴む重要章。後にReduxへ移行する際の下地になる

第8章 地図アプリ/GPSロガーで実践的なデバイスAPI利用を学ぶ

本書で最も実務直結度が高い章。GPS・カメラ・ライブラリ統合を一気通貫で体験できる

第9章 WebViewを使ったWebコンテンツ表示

第10章 React Native CLIとネイティブモジュール

Expoの制限を超えてネイティブコードと連携したい場合に参照する

第11章 Google Play/App Storeへの配信

第12章 React Native/Expoのバージョンアップ対応

2018年出版のため現行バージョンとの差分確認に活用。環境構築で詰まった際の参照先として使うと効率的

関連記事 / 参考情報

• 筋肉にちゃんと「お願いマッスル!」するために、1からReact学んでアプリをリリースした話 — Reactをゼロから学びスマホアプリをリリースするまでの実体験記。本書を参照した学習の記録
• react-nativeでstorageを使おうとすると、cosole.errorが出てしまう — React Nativeでのローカルストレージ利用時にconsole.errorが発生する問題のトラブルシューティング

学習のヒント

• 1〜3章の環境構築は出版後のAPIバージョン差分が大きいため、Expo公式ドキュメント(expo.dev)と並行して進めると詰まりにくい
• 4章のTODOアプリを写経するだけでなく、機能を1〜2つ自力で追加してから5章へ進むと、6〜7章の拡張演習の意図が理解しやすくなる
• 8章のGPS/地図アプリは本書の実践演習の中で最も実務に近い内容。ここを自力で動かせれば本書の核心は習得できたと判断してよい
• 12章のバージョンアップ対応は最初に読まず、環境構築や実行時にエラーが出た際の参照先として活用するのが効率的

前提知識

• JavaScript ES6以降の基本構文(アロー関数・分割代入・Promiseの非同期処理)
• Reactのコンポーネント概念とJSXの基礎(本書はReact自体の解説は薄い)
• npmまたはyarnを使ったパッケージ管理の基本操作

次に読む本

Expo公式ドキュメント(expo.dev)

EAS Build/EAS Submitなど、本書発行後に追加された本番デプロイワークフローを習得するための一次ソース

React Native公式ドキュメント(reactnative.dev)

新アーキテクチャ(Fabric/TurboModules)への移行や最新コンポーネントAPIのキャッチアップに不可欠