ReactNative+Expo 入門＋ハンズオン

はじめに

本記事はReactNativeとそのフレームワークであるExpoを用いたローカル開発環境を構築します。はじめてのネイティブアプリ開発時を振り返りながらまとめています。ぜひ〜！

Expoとは

Expoは、AndroidおよびiOSアプリの開発を容易にするフレームワークです。React Nativeのみでもアプリ開発は可能ですが、Expoフレームワークを使用することで、より簡単に環境構築や開発を進めることができます。
この記事で紹介する内容にも含まれますが、Expoの専用アプリを使用することで実機での動作確認が手軽に行えたり、クラウドビルド機能によってアプリのビルドやデプロイを簡単に実行できるようになります。

参考資料

本記事のハンズオンは以下チュートリアルに沿って進めていきます。

環境構築

アカウント作成

公式アカウントでExpoアカウントを作成します。

メールアドレス、アカウント名、パスワードのみで登録可能です。

プロジェクトを作成

以下のコマンドで新規プロジェクトを作成します。

pnpm create expo-app

実行後、What is your app named?と表示されるので、作成するアプリケーションの名前を入力します。（ここではexpo-app）

正常にプロジェクトが作成されましたね！

アプリケーション起動

作成したプロジェクトを起動してみましょう！確認方法は確認したいOSによって異なります。
今回はWeb、iOS実機端末、Androidエミュレーター、xCodeエミュレーターの4つの方法で確認します。

ローカルサーバ起動は、以下コマンドで起動できます。

pnpm start
// pnpm expo startと同値

サーバーが起動すると、さまざまなコマンドが実行可能になります。起動方法の指定も可能です。

起動確認〜Web〜

起動中のサーバーでwを入力します。

ブラウザでhttp://localhost:8081/ が開かれます。

以下のコマンドでは、サーバー起動と同時にWeb形式で実行されます。

pnpm run web
// pnpm expo start --webと同値

起動確認〜OS実機〜

まず初めに、起動確認を行いたい端末にExpo Goアプリをインストールします。
Android：GoogleStore
iOS：AppStore

サーバー起動時に、QRコードが表示されます。
このQRコードを読み込み、ダウンロードしたExpo Goアプリでアプリを起動します。

Expo Goアプリとの連携がうまくいかない場合、以下のようなエラー画面が表示されます。

まず、サーバーを起動しているコンピューターと接続したいデバイスが同じWi-Fiネットワーク上にあることを確認してください。

それでも解決しない場合は、トンネリングで接続を行います。必要なパッケージをインストールし、引数--tunnelをつけてサーバーを起動します。

pnpm add @expo/ngrok
pnpm expo start --tunnel

ただし、この方法はアプリのリロード速度が大幅に低下するため、メインでの利用は推奨されていません。

参照：expo appがつながらなくなった

起動確認〜Android Studio〜

まずAndroid Studioインストールし、セットアップを行ってください。

brew install --cask android-studio

詳細な設定方法はこちら→Expo GoでAndroidエミュレータを設定する

セットアップ後、Android Studioのトップ画面で「仮想デバイスマネージャー（Virtual Device Manager）」から登録したデバイスのエミュレーターを起動します。

起動中のサーバーでaを入力します。

エミュレーター上でアプリケーションが起動されます。

起動確認〜Xcode〜

まずXcodeインストールし、セットアップを行ってください。

brew install --cask Xode

詳細な設定方法はこちら→Expo GoでiOSエミュレータを設定する

起動中のサーバーでiを入力します。

エミュレーター上でアプリケーションが起動されます。

Xcodeをインストール済みの場合でも、以下のメッセージが表示されることがあります。

以下のコマンドを実行し、Xcodeのパスを正しく設定してください。

sudo xcode-select -s /Applications/Xcode.app/Contents/Developer

ビルド

今回作成したアプリケーションをビルドしていきましょう。今回はEAS Buildを使用します。
EAS Buildを使用すると実機での確認が容易になります。

EAS CLIの導入

以下のコマンドでEASサービスを利用するCLIをインストールします。

pnpm add -g eas-cli

インストールしたら、先ほど作成したExpoアカウントでログインを行います。

eas login

ビルド設定用のファイルを作成します。

eas build:configure

コンフィグファイルの作成時に2点質問されます。

①Would you like to automatically create an EAS project for @expoのユーザー名/ビルドするアプリケーション名?

②Which platforms would you like to configure for EAS Build?

①ログインしているEASユーザーアカウントに新しいEASプロジェクトを作成するかどうかを聞かれます ＞ Yesを入力
②EAS Buildに設定したいプラットフォーム（ALL、iOS、Android）を選択します ＞ 実機確認を行うプラットフォームを選択してください

するとeas.jsonがプロジェクト内に作成され、Expoに新しいプロジェクトが作成されたことが確認できます。

これで準備はOKです。早速ビルドしてみましょう！
ビルドはクラウドビルドとローカルビルドの2つが存在します。EAS Buildの無料枠ではクラウドビルドは月30回、ローカルビルドには制限はありません。

以下のコマンドで、クラウドビルドを実行してみましょう。

eas build --platform ios
# または
eas build --platform android

iOSでビルドする場合、Apple Developer Programに登録されているAppleアカウントが必要になります。

以降の手順はAndroidでのビルド作業となります。

初回ビルドの場合、ビルド実行時に2点質問されます。

①What would you like your Android application id to be?

②:Generate a new Android Keystore?

①バンドルID（アプリの一意な識別ID）をどのような名前で設定するかを確認されます ＞ デフォルトでも問題ありませんが、重複IDは設定できません
②Androidデバイス内の安全な領域に暗号化キーを保管する機能を有効にするかを確認されます ＞ Yesを入力

すると、先ほど作成されたExpoプロジェクトにデプロイされたアプリケーションが表示されます！

ローカルビルドの場合はビルドコマンドの後ろに--localをつけて実行します。
ビルド完了すると、リポジトリ内にApp Bundle ファイル（.aab）が生成されます。

apk ファイルと aab ファイルの違い
Androidアプリのパッケージ形式には2つのタイプが存在します。

• Android Application Package ファイル (.apk)
  　ビルドしたバイナリ等のファイルをZIPでアーカイブしたもの
  　Androidスマホや端末にアプリとしてインストール可能

• Android App Bundle ファイル (.aab)
  　アプリのコードとリソースをモジュールに整理した署名付きファイル
  　Google Playへの公開用ファイルのため、Androidスマホや端末にアプリとしてインストール不可

Expo機能：高速ビルドエラー対応

Expoクラウドビルド回数には無料プランの場合、制限がかけられています。そのため3分以内に失敗するビルドは課金対象にならず、月10件のみ免除されます。
Expoアカウント＞請求（Billing）にはクラウドビルド回数がカウントされているのですが、それとは別に「Waived builds」としてカウントされています。

参考：EAS Build: Pricing update

リリース

今回は実施しませんが、実際にどのような手段でリリースが必要なのか、調べてみました。アプリを公開するには、審査とテストが必要となります。本情報は2025年10月時点のものですので、最新情報は公式サイトをご確認ください。

Android

AndroidアプリはGoogle Play Storeに公開を行います。公開にはGoogleによる審査とテスト実施が必要になります。

テストは12人以上のテスターによる14日間以上の連続テストが必要です。これはアプリ品質向上やストアの信頼確保のためとされていますが、このハードルが非常に高くなった印象です(この要件をどう解決するかをまとめた記事をよく見かけます)。

iOS

iOSアプリはApp Storeに公開を行います。必要なのはApple Developerプログラムへの参加で、年間99ドルかかります。金銭的なハードルは高いですね。。。こちらもAppleによる審査があります。

次にTestFlightへアップロードします。TestFlightはテスト環境としても機能し、そのままリリースも可能なアプリです。

まとめ

今回はネイティブアプリの作成およびビルドまでを実装しました。今回初めてのネイティブアプリだったので、シミュレータを用いて実機同様に確認できることに驚きでした。ネイティブだからできる機能がたくさんあると思うので、引き続き開発してみたいと思いました。（リリースまでの道は遠いけど。）継続して色々な技術を吸収、発信していきますのでぜひ〜！

[おまけ]Webエンジニアでももっと簡単にネイティブアプリを実装したい！

ここまで、ReactNative＋Expoでネイティブアプリ開発をみていきました。以下備考として、実際の採用話を記載していきます。
Android端末固有の機能を使う必要があったので、ReactNatveを触ってみましたが、0から始めるには学習コストが高いです。また元々Web（React）開発は経験があったため、学習コスト低く開発ができるものがないかな〜としていた際に「Capacitor」というものに出会いました。

Capacitorとは、WebアプリをiOS、Androidなどでネイティブに動作するモバイルアプリケーションを構築することができるライブラリです。フレームワーはもReact、Angular、Svelte、Vueなどなどお好みのWebフレームワークを利用することができます。

導入方法は簡単で、ライブラリをインストールし、ネイティブプラットフォーム（iOS/Android）をインストールするのみ。とっても簡単だし、実装体験自体も今まで通りにできたため、とても良かったです。

参考文献