react native + expo でスマホアプリ開発を始めるとき、アプリのコードを書くまでにやること

簡単に言うと以下をやっておく＆知っておくほうが良いです

• アプリ開発環境を整える
• easワークフロー作る
  • developmentビルドで確認する環境を整える（expo goを使わない場合）

他にもExpoのtips記事を公開しているので、気になる方は著者フォローお願いします！

expoでのアプリ開発環境を整える

最初のテンプレートだけは自力でやったほうがいいです

npx create-expo-app@latest

これでアプリを作ります

このあと

npx start expo

を起動するとQRコードがでます

次にお手持ちのiPhoneやAndroidに、expo goアプリをAppStoreなどから入れておきます

そのあと、カメラアプリなどで先程のQRコードを読み取ります

PCと同じLANに繋いでいれば、expo goアプリが勝手に立ち上がり、さらに今の開発中のアプリ画面が開きます

通常のreact native + expoでのアプリ開発とここまで全く同じです
本来はここでコードを書き換えていくんですが、

今回はここからcodexに任せます

そのため、現在の状態で一度githubのリポジトリに全てコミットします

（npx start expoは終了していいです。Ctrl+Cで止まる）

eas セットアップして、ワークフロー作る

公式ドキュメントとしてはこの流れです
https://docs.expo.dev/eas/workflows/examples/
説明のYouTube動画が日本語対応してるので見るとイメージつきやすいです
https://www.youtube.com/watch?v=v_rzRcVSQYQ

EASワークフローは無料プランでも使えます
無料枠： 月30 ビルド / 100 分の CI ジョブ / 1 000 MAU OTA / 100 GiB 帯域

まずexpoにアカウント登録します

その後以下コマンド実行

npx eas-cli@latest init

√ Would you like to create a project for ....
と聞かれるので yes

expo.devに自分のアプリのプロジェクトがつくられる

eas updateを設定する

アプリのjs部分を更新するやつです
https://docs.expo.dev/eas-update/getting-started/

ネイティブ機能更新してなければこれだけですみます
開発時のほとんどの確認はこれで更新して確認です

expoで作ったアプリは本番アプリでもこの機能を活用でき、AppStore使わずに更新できます
OTAアップデートと呼んだりするみたいです

eas-cliのインストール

npm install --global eas-cli

expoにloginする

eas login

OTAを設定

eas update:configure

eas update:configureっていうのは、EAS Update（OTAアップデート機能）を使えるようにプロジェクトを自動で設定してくれるコマンド

一応buildの設定もしとく

eas build:configure

ためしに expo goアプリに現在のコードを反映できるか試す
コードのどこかを修正して以下コマンドを実行

eas update --channel development --auto -m "init!"

まだios, androidともにアプリをビルドしたことがあるわけではないので、
No compatible builds found for the following fingerprints～
は出てOKです！

expo goで見るだけなら関係なし

ということでexpo goアプリを開く
expo goにログインする
するとProject のなかに今回作っていたProjectが存在するはずなので、それを開く

すると、うまくできてれば先程のコード修正が反映された状態でアプリを開くことができる㊗️

ちなみに...
development channelを指定してeas updateしたので、本来はチャンネルがdevelopment設定になってるビルドでしかこのupdateは受け取れないのだが
expo goはチャンネルフリーなので何でもうけとれる
↓のpolicy:appVersionも重要で、こうなっているとexpo goのバージョン1.0.0で読めるらしい

app.json

"runtimeVersion": {
  "policy": "appVersion"
},

github連携

expoプロジェクトのgithub連携をここから行う
https://expo.dev/accounts/%5Baccount%5D/projects/%5BprojectName%5D/github
all repositoryにした

eas ワークフロー設定

アプリのほうで

.eas\workflows\publish-preview-update.yml

を作成し、以下を書く

name: Publish preview update

on:
  push:
    branches: ['*']

jobs:
  publish_preview_update:
    name: Publish preview update
    type: update
    params:
      branch: ${{ github.ref_name || 'test' }}

workflowを実行＆expoのサーバ側に登録する

eas workflow:run publish-preview-update.yml

これでワークフローが登録されます

まず初回に１度実行されています

expo.devのダッシュボードの、以下から登録されているか確認

見ると、こんな感じでpreview updateが実行されて、QRコードが発行されてるので、スマホでよみこむ

コレを開くとexpo goが立ち上がり最新のコード状態でロードされる

この状態でためしにmaster(main)ブランチに何かしら修正してコミットすると、、、

無事うごきました

このワークフローが成功したあとでさらにexpo goを開いて
（シェイクするとメニューがでるので go homeしとくといい）
今回のアプリのprojectから最新のビルドを選択すると
最新のコード修正が入った状態のアプリが見れる

eas workflowsの書き方

ドキュメントとしてはここ
https://docs.expo.dev/eas/workflows/syntax/

今回設定したワークフローの内容をo3に解説してもらいますた

行	やってること
name: Publish preview update	ワークフローのタイトル。EAS Dashboard でこの名前が表示される
on: push: branches: ['*']	GitHub の push イベントがトリガー。'*' だからすべてのブランチで発火する設定
jobs:	ここから実際に動くジョブを定義
publish_preview_update:	ジョブ ID（好きな名前で OK）
name: Publish preview update	ジョブの表示名
type: update	“update” というプリセットジョブを使う宣言。中身は eas update … を実行して OTA を公開する処理

params キー	意味
branch:	eas update --branch <ここ> に渡す値。どの Update ブランチ（≒チャンネル）に公開するかを決めるパラメータ
${{ github.ref_name }}	GitHub Actions の式。トリガーになった ブランチ名（例: feature/camera）が自動で入る
|| 'test'	JavaScript と同じ「OR」演算子。もし github.ref_name が空（手動実行など）だったら 'test' を代わりに使う保険

easにはブランチチャンネルという概念があって
ブランチはgitのブランチと同じで並行開発用

チャンネルはdevelopment, stagingなどがあり、要するに
stagingをfeature/avatarというブランチに付け替える、というような操作によって
それぞれの環境で見れる内容をかえる、というスタイルで開発していくものみたいだ

eas channel:edit staging --branch feature/avatar

ステージング環境をこのブランチに、という感じで切り替えられるらしい

なので普段は

eas update --branch feature/xxxxx

（これはワークフローで実行される）
これでeas上でpreviewが作られるので、これをexpo goなどで確認し

問題なかったらstagingに反映させる、という手順で昇格させてQAなどするのが良いみたいだ

以上

これで、PRを作ったり、そこへのコミットをするたびに、自分の端末にいれたdevelopmentビルドの内容が更新される環境が整いました

あとはごりごりとアプリの実装をするだけです