Expoでスマホアプリ開発に挑戦しよう！

こんにちは、むなかたです。

最近、AIを使ってWebサイトや小さなツールを作る方がかなり増えてきました。

一方で、「スマホアプリも作ってみたい」と思った瞬間に、急に難易度が上がったように感じる方も多いかなと思います。

iPhoneアプリならXcode、AndroidアプリならAndroid Studio、さらにビルド、署名、ストア申請、アップデート……。

このあたりで「うっ、ちょっと大変そう」と止まってしまうんですよね。

そこで今回紹介したいのが 「Expo」です。

Expoについて

Expoとはスマホアプリ開発を進めやすくするための開発ツール・サービス群です。

公式サイト:

https://expo.dev/

Expoはアプリ開発でつまづきがちな壁を乗り越えられるような、様々な機能を搭載してくれています。

• iOS/Androidを同じ仕組みで同時に作れる

• とても難解な証明書の発行を代わりにやってくれる

• 本来はMacのPCが必要なビルド処理をオンラインでやってくれる

• 審査が通る前のテスト配布が簡単にできる

Expo Go

アプリの挙動をスマホの実機で確認したり配布するための「Expoのお試し環境」のようなものです。

通常スマホアプリを配布しようとすると、証明書の発行や端末設定など、非常に難解な事前準備が必要です。

そういった準備を完全に省略して、Expo GOアプリを入れるだけで、開発用のアプリ配布が簡単にできる、という点は非常に大きいです。

後ほど開発するときに使用するので、事前にアプリストアからインストールをお願いします。

Expo Application Service (EAS)

Eスマホアプリの開発から配布、申請までの一通りの作業を助けてくれるサービスです。

公式サイト: https://docs.expo.dev/eas/

• 証明書の作成

• 必要な鍵の管理

• オンライン上で申請用のビルドに変換（MacPC不要）

• 申請のためのストアアップロード

これらの作業は手動でやる場合、本っっっ当に面倒なのですが、これを裏側で全部やってくれるという神サービスなのです。

EASの初期設定

アカウントの登録

https://expo.dev/services にアクセスして、右上の「Sign Up」からアカウント作成に進みましょう。

メールアドレスでのアカウント作成が必要なので、必要事項を記入してアカウントを作成してください。

EAS CLIのインストール

つづいてEASの機能をコマンドから実行するために、「EAS CLI」と呼ばれるツールをインストールしていきましょう。

公式サイト: https://docs.expo.dev/eas/cli/

ここからは「ターミナル」と呼ばれる場所で作業を行う必要があります。

直接アプリを開いていただいてもよいですし、VS CodeやAntigravityのメニューから「ターミナル」>「新しいターミナル」を開いていただいてもOKです。

まずは、以下のコマンドを実行してインストールしてください。

npm install --global eas-cli

少し待って以下のようなメッセージが表示されたらインストール完了です。

added 516 packages in 11s

65 packages are looking for funding
  run `npm fund` for details

EASアカウントでログイン

インストールが完了したら続けてEASアカウントへのログインをしましょう。

eas login

以下のようなテキストが表示されたら自動でブラウザが開かれるはずです。

aiting for browser login...
If your browser doesn't automatically open, visit this link to log in: https://expo.dev/login?client_id=eas-cli&redirect_uri=http://localhost:51846/auth/callback&response_type=code&code_challenge=xxx&code_challenge_method=S256&state=xxx&confirm_account=true

ブラウザ側でExpoのログインを行ってください。以下のように「Anthentication Successful」という画面が表示されたら、ターミナルに戻っていただいてOKです。

ターミナルに「Logged in」と表示されていれば無事ログイン成功です。

Logged in

過去にログインしているかもしれない場合、以下のコマンドを実行するとログイン状況がわかります。

eas whoami

コマンド実行後、以下のようにアカウント名とメールアドレスが表示されたらログイン中です。

munakata
meganeinu.xyz@gmail.com

プロジェクトの作成

空のフォルダを作って開く

ここからは、実際に作業を行うための場所を準備します。新規フォルダを作って、VSCodeやAntigravityといったエディタで開いておいてください。

その状態で上部メニューの「ターミナル」>「新しいターミナル」を起動しておいてください。

「ターミナル」欄にてこの後コマンドを実行していきます。

プロジェクトの作成

これではここからExpoアプリを作っていきます。こちらのコマンドを実行してみましょう。

npx create-expo-app .

最初に以下のようなSDKバージョンの選択肢が表示されます。

一番上の「Latest」を選びたいのですが最新版のSDKはExpo GOで対応していない可能性があります。

そのため上から2つ目の「For learning with Expo Go」を選ぶようにしましょう。

上下矢印キーとEnterで操作することができます。

? Select an Expo SDK version: › - Use arrow-keys. Return to submit.
    Latest (SDK 56)
❯   For learning with Expo Go (SDK 54)
    Compatible with Expo Go on App Store and Play Store
    Other SDK version…

そうすると必要なファイルのダウンロードが始まります。しばらく待ちましょう。

✔ Downloaded and extracted project files.
> npm install
⠹

「✅️ Your project is ready!」というメッセージが表示されたら初期化完了です。左の「エクスプローラー」にファイル群が増えているはずです。

アプリの開発

Step1. まずは実行してみる

ターミナルに以下のコマンドを実行してみましょう。

npm start

すると画面上にQRコードが表示されます。こちらを読み込むと、Expo Goアプリで初期状態のアプリを確認することができます。

QRコードを呼んでも起動しない場合は、「Expo GO」アプリをアプリストアからインストールしていない可能性があるので入れておきましょう。

また、QRコードの下には以下のようなメニューが表示されます。入力するキーに応じて挙動が変わるので任意のキーを押してみましょう。

「w」... Webページで起動

「a」... Androidシミュレータで起動（事前インストールが必要）

「i」... iOSシミュレータで起動（事前インストールが必要）

「Ctrl + C」... 終了

› Metro waiting on exp://192.168.0.83:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Using Expo Go
› Press s │ switch to development build

› 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
› shift+m │ more tools
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.

Step2. アプリの見た目を作る

いまは最初のテストアプリの見た目なので、続いて見た目を作っていきましょう。

アプリの見た目をお手軽に作るには「Google Stitch」がおすすめです。こちらのサイトからアクセスしてみましょう。

Stitchにアクセスできたら、Googleログインをしておきましょう。

入力欄の下で「アプリ」を選択して、実際に作ってみたいアプリの内容や雰囲気などの情報を入力し、右下の上矢印ボタンをクリックしたら自動でデザインが作られていきます。

今回はこのようなデザインを作ってくれました。変更があれば下の入力欄で続けて指示を行えます。

一通り編集が終わったら、Shiftを押しながらクリックをして、画面を複数選択しておきます。

その状態で「エクスポート」>「コードをクリップボードにコピー」を選択すると、作ったアプリの見た目をまるっとコピーできます。

Step3. 見た目を反映させる

エディタの画面に戻って、AIへの指示を行う入力欄に、コピーした内容を貼り付けます。

あとは「アプリをこの内容に差し替えてください」のように追記して指示をしてみましょう。

【コピーして貼り付けた内容】

アプリをこの内容に差し替えてください

かなり大きな変更になるので、何度か承認などが求められる可能性があります。気長に待ちましょう。

一通りAIの作業が終わったら、再度以下のコマンドを実行してみましょう。

npm start

QRコードを読み込んで、Expo GOで挙動を見てみます。

100%のデザイン再現はできていないですが、こちらのようなアプリが一瞬で出来上がりました！

Step4. 完成度を上げる

Google Stichのコードを貼り付けた状態はいわゆる「ハリボテ状態」で、見た目だけの動かない機能も多いはずです。

あとはそういった機能の取捨選をしたり、実際に動かない機能を動かせるようにしたり、未完成のデザインを完成させていけばOK。

順番にAIにお願いしてあげれば徐々に完成に近づいていくはずです。修正とチェックを繰り返して完成度を上げていきましょう！

他の人に触ってもらう

アプリを作ったら他の人に使ってみてほしいですよね？

本来、他の人に使ってもらうためには、開発者登録、必要な素材の準備、証明書の作成、ビルドの作成、といった超面倒な手順が必要なのですが、EASとExpoGoを使うことでお手軽に配布ができちゃいます。

ただし、ここで配布できるのはあくまで「開発中のお試し版」。相手側にもExpoGoアプリをインストールしていただき、そのアプリ上で動かす形です。そのため、本物のアプリとは細かい挙動が異なるので注意しましょう。

ブラッシュアップのために基本的な機能を使ってもらって感想をもらう、といったつもりで配ってみましょう。

配布用に実行

他の人に配布するときには以下のようなオプションを付けてコマンドを実行します。

npx expo start --tunnel --go

動かすために必要なプログラムがあるので、初回は以下のようなパッケージインストールを求めるメッセージが表示されることがあります。

その場合は半角の「Y」を入力して先に進みましょう。

? The package @expo/ngrok@^4.1.0 is required to use tunnels, would you like to install it globally? › (Y/n)

このコマンドを実行すると、通常の実行時と同じようにQRコードが表示されますが、こちらのQRコードでは遠隔地にいる端末でも動かすことができるモードになります。

注意点としては、このQRコードが有効なのはコマンドが実行されている間だけということです。

コマンドを止めたり、PCを閉じたりすると使えなくなるので、一時的なものという点には注意しましょう。

本格的な配布にはビルドという作業が必要なのですが、それはまたの機会に！

---

ここまでお読みいただきありがとうございました。

この記事ではExpoを使ったアプリ開発の、セットアップ〜簡単な動作確認までをご紹介してみましたがいかがでしたでしょうか？

この先でアプリをリリースするためにはビルド、開発者登録、申請、といった高難易度の作業が待ち構えております。

ご要望があれば追加を書くかも…？しれないので、ぜひご感想などいただけると嬉しいです！