Blog
本記事の目的
ReactNativeの環境構築をExpoで行い、テスト配布を行うところまでを解説します。 Expoは以前、開発PCにグローバルインストールを推奨していましたが、現在はこれを非推奨としており、プロジェクトごとにローカルインストールを行うことが推奨されているのでそれにならって解説します。
1. そもそもExpoとは？
Expo は、React Native を使ってモバイルアプリを開発する際に、開発環境の構築やビルド、テスト、配布などの作業を簡単かつ効率的に行えるようにするプラットフォームです。
ライブラリも豊富で、Expo SDK には、カメラ、位置情報、プッシュ通知、センサーなど、スマートフォン固有の機能を利用できる API が多数用意されているため、すぐに活用できます。
| Expo | 純粋なReact Native | |
|---|---|---|
| 導入の容易さ | create-expo-app & expo install ... で準備完了。ネイティブ開発環境なしでも動く | Xcode / Android Studio のインストールや設定が必要。 構築手順も多め |
| カメラ機能の実装例 | expo-camera パッケージをインストールするだけで完結 | react-native-camera 等を導入し、iOS/Android それぞれのネイティブ設定が必要 |
| ネイティブコード編集 | 原則不要。Expo が提供するツールや設定で完結できる | android/ や ios/ 配下に直接コード・設定を追加するケースが多い |
| メリット | 環境構築が簡単。設定ファイルも少ないので管理が楽 | カスタマイズ性が高い |
| デメリット | Expo に未対応のネイティブ機能は使いにくい | ネイティブ設定が煩雑になりやすい。ビルド環境を整えるハードルが高い |
2. 環境構築
2-1. Expoアカウントの作成
以下リンクからExpoアカウントを作成。 https://expo.dev/signup
2-2. Expo Goのインストール
スマートフォンで、Expo Goをインストール。
インストール後に2-1で作成したアカウントでログインする。
2-3. new Project
npx create-expo-app my-app # my-appはプロジェクト名にしてください。
cd my-app
yarn install
2-4. アプリ起動
npx expo start
ターミナルにQRコードが表示されるので、それをExpo Goのアプリで読み取ってください。 シミュレータで起動したい時は、画面に従ってキーを押下してください。 ※ iOS simulatorなら「i」押下
アプリが実機 or シミュレータで起動できたら環境構築は完了です！
3.EASによるテスト配布
iOSとAndroidの両方でアプリをテスト配布するには、各プラットフォームに対して個別にビルドを行う必要がありますが、Expoを使用するとこのプロセスが大きく簡素化されます。
3-1. プロジェクトの作成 Expoのダッシュボード画面で、プロジェクトの作成を行います。 ここでプロジェクトの作成を行い、プロジェクトIDをコピーしておきます。 ※Organizationsでプロジェクトを作成したい場合は、Organizationsに切り替えてプロジェクトを作成。
3-2. プログラム・assetを更新する。
npm install --global eas-cli
eas login // 認証情報が聞かれるので、2-1で作成した情報でログインしてください
eas init --id {{ プロジェクトID }} // プロジェクト画面に記載があります
eas update:configure // create eas.json
eas update --channel {{ チャンネル名 }} --message "{{ コメント }}"
※ チャンネル名は「development」「preview」「production」
3-4. テストアプリ起動
プロジェクトの管理画面に3-3で更新された内容が上がっていると思います。 ここでQRコードを開いて「Expo Go」で読み込めば配布アプリが起動します！