この記事では、Windows 10にExpoを使ったReact Nativeの開発環境を1から構築し、サンプルアプリを作成するところまでをゴールとします。
1つの記事ですべてカバーできないので、いくつかの記事に分けて少しずつ投稿していく連載にしていきます。
なお、筆者はアメリカで開発業務を行っているため、選択するトレンドなどはアメリカ主体となります。
環境
開発環境は、2019年8月時点最新の以下のソフトウェアで構築します。
- Chrome 最新 (76.0.3809.100 (64-bit))
- Visual Studio Code 最新 (1.37.1)
- Node.js + npm 最新 (10.16.3)
※npmが最新なので、npmでのinstallは--saveを省略します。
なぜExpo?
モバイルアプリ開発のクロスプラットフォームには、Cordova (ionicやMonaca含む)、Xamarin、最近ではFlutterなどいくつもの選択肢がありますが、その中で以下のメリットが強いときにReact Native + Expoを使うのがよいかと思います。
- とにかく開発工数を小さくしたい。
- 業務用アプリなどで、細部にはあまりこだわらない
- Web開発の知識をなるべくそのまま応用したい。
- JavaScriptの知識をメインにして作りたい
- Reactの知識がすでにある
- デバイスに依存した機能は使わないプロジェクト、またはモックアップ用
- 実機でデバッグを簡単に実施したい
- 簡単に配布したい
同じような条件では、Monacaが競合に入ってきます。実際私も過去にMonacaを使って開発しましたが、Reactのメリットを感じない場合はMonacaでもいいかなと思います。ただ、最近よくReactを使うから今さらjQueryはあまり積極的に使いたくないとか、データ取り扱いでやっぱりReactにメリットを感じるといった場合は、Expoサイコーでよいと思います。
なお、React Native (=react-native-cli)じゃなくてReact Native + Expoな理由は、この辺りの記事が参考になります。
記事一覧
連載内容の予定です。途中で大幅に変更する可能性があります。
- Expoのアカウントを作ってReact Nativeの開発環境を整える
- React Native Expoの編集環境をVisual Studio Codeで準備する
- React Native + Expo + Visual Studio Code + Chrome で実機デバッグする
- エミュレータでデバッグする -> スキップ
- React Native + Expo に、ルート管理ライブラリreact-navigationを導入する
- React Native + Expo + react-navigationで、アプリの画面構成を作成する
- React Native + Expo + unstated (+ react-navigation)で、簡単グローバルState管理＋ローカルデータ管理を実現する
- React Native + Expo アプリに Native Base 導入で楽々画面デザイン
- React Native + Expo アプリで unstatedのStateにaxiosを使って簡易テストサーバーからデータ取得
- React Native + Expo アプリで QRコードを読んでJSON取得
- React Native + Expo アプリでunstatedのデータを永続化
- React Native + Expo アプリをPublish(公開)する：テスト配布する
- React Native + Expo アプリをDeploy(ネイティブビルド)する