はじめに
2018年ごろからReactNativeを利用してのiOS/Androidモバイルアプリ開発に関わってきました。
（もっと前はJavaとObjective-Cで・・・）
Expoというものの存在は知ってはいたのですが、「手っ取り早くアプリを作れるが制約が多いツール」という認識でした。
特に、予め用意されている以外のネイティブ利用コードを使うためにはejectが必要になる、という点が、業務で利用する場合は使えないことが多いだろうと考え、深く知る機会もないままでした。
月日は流れ2022年の終わり頃、OTAアップデートを導入しようとCodePush（VisualStudio AppCenterのアレ）とExpoを比較するために調査していて、Expo SDK 47のドキュメントを眺めていました。
どうやら以前とかなり様子が違うようで、Development Buildを利用することでカスタムネイティブコードを導入することが可能で、かつExpo Goのような手軽さで開発が回せそうなこと、"eject"も死語になっていること、などが書かれており、これはちょっと試してみよう、と思い立って少し触ってみました。
せっかくなので、整理して記録しておきます。
何回かに分けて、次のようなネタを扱う予定です。
- 土台作り
- Expo Module作成
- の前にモノレポ化
- Development BuildをEASで作る
- Expo Router
ReactNativeそのものや、コンポーネントの作り方・・・などについては触れないつもりです。
最初のサンプルアプリを作る
事前準備
使用マシンはMacですが、Mac依存な部分はそれほどないつもりです。
（iOSシミュレータを利用してる箇所などはWindowsでは無理なのでAndroidエミュレータで）
以下がインストールされている環境です。
（とりあえず関係ありそうなものだけ）
- Visual Studio Code
- Node.JS (v16だった)
- yarn (v1)
- ruby (プリインストール)
- cocoapods
rubyとcocoapodsはMacの場合ですが、ネイティブのビルドをローカルで実施しない限り不要なはず。
後ほどEAS(Expo Application Services)を使いますが、それまではExpoアカウントは不要です。
Create a new app
公式ドキュメントを参考に、テンプレートから作成します。
が、yarn使いたいので、コマンドは以下です。
yarn create expo-app ExpoLab -t expo-template-blank-typescript@sdk-47
アプリ名はExpo実験場なのでExpoLabとしました。
TypeScriptのテンプレートを選択しています。
本記事執筆時点でSDK48がリリース済みで、後ほどアップグレードを確認したいために、あえて@sdk-47を指定しています。
（最新でいい場合はSDK指定はナシで大丈夫です）
作成されたExpoLabディレクトリ以下はこうなっていました。
├── assets
│ ├── adaptive-icon.png
│ ├── favicon.png
│ ├── icon.png
│ └── splash.png
├── node_modules
├── App.tsx
├── app.json
├── babel.config.js
├── package.json
├── tsconfig.json
└── yarn.lock
自動でgitに"initial commit"までされています。
何はともあれ動かしてみます。
yarn start
yarn run v1.22.19
$ expo start
Starting project at *****/ExpoLab
Starting Metro Bundler
（ここにQRコード）
› Metro waiting on exp://192.168.0.11:19000
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)
› Press a │ open Android
› Press i │ open iOS simulator
› Press w │ open web
› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› Press ? │ show all commands
Logs for your project will appear below. Press Ctrl+C to exit.
「ここにQRコード」の部分にQRコードが表示されます。
（行間が広くて、いい感じに表示させられなかったので割愛）
このコードを手持ちのスマホで読み込むとExpo Goが起動して、JSバンドルがロードされます。
（Expo Goが未インストールならインストールされるはず。多分。知らんけど）
手元にスマホがない場合（？）、iキーでiOSシミュレータが起動します。
とりあえず土台ができたので、ここから色々と遊んで試していきたいと思います。
つづく