はじめに
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シミュレータが起動します。
![](https://qiita-user-contents.imgix.net/https%3A%2F%2Fqiita-image-store.s3.ap-northeast-1.amazonaws.com%2F0%2F243061%2F6e7408b6-063b-023b-3e6e-ca93b331dc8c.png?ixlib=rb-4.0.0&auto=format&gif-q=60&q=75&s=886be36e9095277a0fa76428e1e78080)
とりあえず土台ができたので、ここから色々と遊んで試していきたいと思います。
つづく