アプリ開発でExpoを使うことを考えてる方へ

はじめに

• Expoをこれから使い始めようと思う方向けに私がまとまっててほしかった情報をまとめてみました

Expoを使う

準備

• nodeを準備しておく
  • 個人はv16系がおすすめ
  • 古いnodeのバージョンを使うとstroybookやjestで色々問題があったため
• 下記のパッケージをインストールする
  • npm install -g expo-cli
  • npm install -g eas-cli

プロジェクトを作成

• 作成コマンド
  • expo init プロジェクト名
• 選択肢
  • 特に何もなければプレーンなTSを選択するのがおすすめ
    • blank (TypeScript) same as blank but with TypeScript configuration

開発サーバを起動

• 下記コマンドで開発サーバを起動する
  • expo start
• 補足
  • こちらと同じ内容で expo start で怒られたので対策として下記を実施
    • brew update
    • brew install watchman
  • watchman のインストール中にxcode-selectをインストールしろと怒られたので追加
    • xcode-select --install

動作確認

• 前提
  • Expoには実機で簡単に確認する仕組みがあります
  • Expo Goを使うと簡単に各OSごとに動作確認ができます
• iOS
  • 実機
    • Expo Goが必要のためiOSの端末にインストールしてExpoのQRコードを読み込ませてください
  • Simulator
    • expo start --ios
• Android
  • 実機
    • Expo Goが必要のためAndroidの端末にインストールしてExpoのQRコードをExpo Goで読み込ませてください
  • Emulator
    • expo start --android

EASを使う

EASとは

• Expoの背後にあるチームによるExpoおよびReactNativeアプリ向けの緊密に統合されたクラウドサービスです
  • Expoを使う理由はこのEASがあるからと言っても過言ではないと思います

expo build と eas buildどっち使えば？

• 新しく作るプロジェクトはeas buildを使いましょう
  • EAS Build に書いてありますが 次世代のexpo buildです

EASのbuildで利用する設定ファイルを生成する

• 前提
  • Storeにアップロードするファイルの生成を自動で行ってくれる
  • Expo Go を噛ませないで実機で動作確認したい場合に生成したファイルを利用する
• cli上でログインする
  • eas account:login
• buildの設定ファイルを作成する
  • eas build:configure

EASのbuildで利用するprofileの説明とbuildコマンド

• profileとは
  • EASのbuildコマンドにはprofileという概念があります
    • 簡単に言えばbuildの設定をまとめておくことができます
    • 作成したbuildの設定に名前をつけたものがprofileです
  • buildを実行する時にどのprofileを利用するか指定できます
• 作成したeas.jsonに定義されているprofile
  • development
    • 開発者が共通の環境を使ってbuildで利用するprofile
    • eas build --platform all --profile development
  • preview
    • いわゆるstage環境のbuildで利用するprofile
    • eas build --platform all --profile preview
  • production
    • 本番向けのbuildで利用するprofile
    • eas build --platform all --profile production

EASのbuildで利用する設定ファイルに設定を追加

• 下記では実機検証及びEmulatorとSimulatorで動作確認できる設定を追加しています
  • Androidをbuildすると.aabが生成される
    • storeにアップロードする時に推奨されている
    • 実機やEmulatorでは簡単に確認することができない
    • buildTypeでapkを指定することで簡単に実機やEmulatorにインストールが可能になる

"android": {
  "buildType": "apk"
}

• iOSをbuildすると.ipaが作成される
  • Simulatorでは.ipaを使った確認ができないためSimulatorで動作確認できるようにする

"ios": {
  "simulator": true
}

• 上記の設定を組み込んだ設定ファイル

...
"build": {
    "development": {
      "developmentClient": true,
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "preview": {
      "distribution": "internal",
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "production": {}
  },
...

ビルドした成果物の動作確認方法

iOS

• 実機
  • EAS上でインストールしたいiOSのbuildを選択する
  • 選択したbuildの詳細画面にInstallがあるのでクリックする
  • QRコードのモーダルが表示されるのでiPhoneで読み込む
  • アプリを検索して起動する
• Simulator
  • EAS上でインストールしたいiOSのbuildを選択する
  • 選択したbuildの詳細画面にDownloadがあるのでクリックする
  • 圧縮ファイルがダウンロードされるので下記コマンドで解凍する
    • tar -xvzf Downloadしたファイル名.tar.gz
  • 実行するとproute.appが作成されている
    • Downloadしたファイル名.tar.gzと同じ階層にある
  • 解凍したファイルをシュミレーターにドラッグアンドドロップして起動する

Android

• 実機
  • EAS上でインストールしたいAndroidのbuildを選択する
  • 選択したbuildの詳細画面にInstallがあるのでクリックする
  • QRコードのモーダルが表示されるのでAndroidで読み込む
  • 選択すると.apkファイルをダウンロードできるのでダウンロードする
  • ファイル関連のアプリを開きダウンロードしたファイルがあることを確認する
  • ダウンロードしたファイルを選択するとインストールするか聞かれるのインストールを選択
    • 開発者モードにしておく必要があるかも
  • アプリを検索して起動する
• Emulator
  • EAS上でインストールしたいAndroidのbuildを選択する
  • 選択したbuildの詳細画面にOptionsがあるのでクリックするとDownload buildが表示されるのでクリックする
  • DownloadしたファイルをEmulatorにドラッグアンドドロップしてインストールする
  • インストールしたアプリを起動する

さいごに

• Expoで開発していく上で最初に知っておきたい情報を1ページにまとめてみました