ReactNativeでのアプリ開発、ExpoSDKがいい感じになってきたようなので試してみた：その１

はじめに

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シミュレータが起動します。

とりあえず土台ができたので、ここから色々と遊んで試していきたいと思います。

つづく