はじめに
こんにちは！
この記事ではExpoとEASを使ってiOSアプリ開発を始める方法をご紹介しています！
Expoやモバイル開発が初めての方でも、この記事を読みながら簡単にプロジェクトを立ち上げと動作確認ができるよう、ステップごとに丁寧に解説していきます！
ExpoとEASについて
実際の手順に入る前にまずはExpoとEASについてご紹介しようと思います。
Expo
Expoは、React Nativeを使ったモバイルアプリ開発を手軽に始められるツールです。
XcodeやAndroid Studioなどの複雑なセットアップが不要で、1つのコードベースからiOS・Android両方のアプリを開発できます。初心者でもすぐにアプリ開発に取り組めるのが大きな魅力です。
EAS（Expo Application Services）
EASは、Expoでは対応できない実機テスト・ビルド・ストア配信を可能にするサービスです。
中でも重要なのが「Development Build（開発ビルド）」と呼ばれるもので、今回の記事でご紹介する動作確認方法です。開発中にExpo Goでは動かない機能を試したい場合や、本番環境に近い検証をしたいときに必須の仕組みです。
事前準備
- Node.js がインストールされたMac
Node.jsのインストール方法はこちらを参考にしてください。
- エディタ (本記事ではVScodeを利用しています)
- iOSシミュレータのセットアップ
- Expoアカウントの作成
実際にやってみよう
手順1 新規Expoプロジェクトの立ち上げ
まずはExpoで新規プロジェクトを作成しましょう。
ターミナルでプロジェクトを作成先のディレクトリに移動し、以下のコマンドを実行してください。
npx create-expo-app@latest プロジェクト名
# 例: npx create-expo-app@latest TestProject
プロジェクトができたら、cdコマンドでプロジェクトのディレクトリに移動しましょう。
cd プロジェクト名
手順2 expo-dev-clientとeas-cliのインストール
続いて、Development Buildを実施するために必要なツールをインストールしましょう。
1. expo-dev-clientのインストール
まずは以下のコマンドを実行してexpo-dev-clientをインストールしましょう。
npx expo install expo-dev-client
次に、正常にexpo-dev-clientがインストールできたか確認しましょう。
以下のコマンドを実行してローカルサーバーを立ち上げてください。
npx expo start
以下の写真のようにUsing development buildが表示されていれば問題ないです。
2. eas-cliのインストール
続いて、以下のコマンドを実行してeas-cliをインストールをしましょう。
npm i -g eas-cli
以下のコマンドを実施して、バージョンが表示されれば正常にインストールされています。
eas --version
手順3 EASにログインする
以下のコマンドを実行してcli上でEASにログインしましょう。
eas login
Expoに登録したEmailとPasswordを聞かれるので、入力してログインします。
手順4 EASの初期設定をする
続いて、EASを利用するための初期設定を行いましょう。
以下のコマンドを実行してください。
eas init
cli上で、どのアカウントに今回作成するプロジェクトを紐付けるか聞かれます。
Expoのチームに所属している場合は選択肢として自分のアカウントとチームのアカウントが表示されます。個人での利用や個人開発の場合は一番上の自分のアカウントを選択しましょう。
アカウントを選択した後、Expoのプロジェクトを新しく作成するか聞かれます。
既存のプロジェクトを利用する場合はNoを選択しますが、今回は新規で作成したいのでYesを選択しましょう。
コマンド実行後、cli上に作成したプロジェクトのURLが表示されています。
URLからページを確認してみると、Expoのダッシュボードページに実際にプロジェクトが作成されたことを確認することができます。
手順5 EASの設定ファイル(eas.json)を作成する
EASを利用してビルドを実行するには、設定ファイルであるeas.jsonが必要です。
以下のコマンドを実行することでeas.jsonを作成することができます。
eas build:configure
cli上でどのプラットフォーム用の設定を作成するか聞かれます。
今回はiOSを選択してください。
code .コマンド(VScodeの場合)などで、エディタを開いてみましょう。
プロジェクトのルートディレクトリにeas.jsonファイルが作成されていることが確認できます。
今回はiOSシュミレータでビルドしたアプリを起動したいので、設定を変更します。
既存の内容を全て削除して、以下のコードに置き換えましょう。
{
"cli": {
"version": ">= 16.4.1",
"appVersionSource": "remote"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal",
"ios": {
"simulator": true
}
}
}
}
手順6 EASでビルドを実行する
ビルドを実施する準備が整ったので、以下のコマンドを実行してビルドを開始しましょう！
eas build --profile development --platform ios
初回のビルドなので、bundle identifierを何にするか聞かれます。
実際に App Store で配信する予定のないテストプロジェクトであれば、そのままEnterで問題ありません。
次に、アプリで使用している暗号化がAppleの標準または免除対象か聞かれます。
基本的にYesで問題ないので、Yesを選択しましょう。
以上二つの質問に答えると、実際のビルドのフェーズに入ります。
以下のようにBuild in Progressの文字が表示されていれば、無事にビルドが開始されています。
ビルドが完了するまで10分ほど時間がかかります。
待っている間に、iOSシミュレータで今回作成したアプリをダウンロードしたいデバイスを一つ立ち上げておきましょう。(お好みで選んでください)
iOSシミュレータの立ち上げ方
-
command+spaseでアプリ検索を立ち上げる - 「simulator」で検索し、アプリを開く
- 左上の
File→Open Simulatorから使用したいデバイスを選択する
手順7 シミュレータでアプリを起動する
ビルドが完了すると、作成したアプリをiOSシミュレータにダウンロードするか聞かれます。
シミュレータの立ち上げが完了している場合は、Yesを押してアプリをダウンロードしましょう。
シミュレータにアプリがダウンロードされていることを確認できたら、以下のコマンドを実行してローカルサーバを起動しましょう。
npm run start
サーバが起動するとcli上に使用できるコマンドが表示されます。
今回はiOSシミュレータでアプリを開きたいので、キーボードでiを押しましょう。
iを押すとシミュレータにダウンロードしたアプリが起動し、動作確認が実施できます！
おまけ Hotリロードを試してみよう
Expoを利用した開発中にとても便利な機能の一つが「Hotリロード（ホットリロード）」です。
これは、コードの変更を保存すると、アプリが自動的に画面が再読み込みされ、変更内容が即座に反映される便利な機能です。
今回はホーム画面の「Welcome!」の文字を変更してみましょう。
app/(tabs)/index.tsxファイルの20行目にあるWelcome!をHello Worldに書き換えてください。
変更を保存すると、即座にシミュレータ上のアプリにも変更が反映されます！
最後に
Expoはモバイル開発において非常に強力なツールで、初心者から上級者まで幅広く支持されています。これからモバイルアプリ開発を始めたいという方は、ぜひExpoを触ってみてください！
参考
Discussion