Contents
React Nativeテンプレート構築の最新ガイド: Expo GoとEAS Buildを活用した開発フロー
React Native開発におけるテンプレート構築は、プロジェクト初期から一貫性を持たせることで開発効率を向上させます。特にExpo Goアプリとの連携やEAS Buildによるビルド自動化が注目されています。以下では、2024年におけるReact Nativeテンプレート構築の基本概念と最新ツールの活用方法について解説します。
プロジェクト初期設定は、開発環境の一貫性を確保するために重要です。Expo GoやEAS Buildといったツールとの連携がスムーズであれば、新規エンジニアでも簡単に導入可能です。この記事では、最新のワークフローとその実装手順を解説します。
Node.jsとwatchmanのインストール: OS別設定とバージョン管理
React Native開発にはNode.jsとwatchmanの環境が必須です。OSごとの導入方法やバージョン確認コマンドを正確に把握することで、プロジェクト初期化のエラーを防ぎます。
バージョン管理の重要性
2024年時点ではNode.js v18.x系が主流であり、v20.xは正式リリースされていません。安定した開発環境を構築するためには、公式推奨バージョン（例: v18.17.0）を使用することを推奨します。
OSごとの導入手順
以下に各OSでのNode.jsとwatchmanのインストール方法を示します：
| OS | 手順 |
|---|---|
| macOS | nvmでv18.xインストール：nvm install 18 |
| Windows | nvm-windowsを使用：nvm install 18.17.0 |
| Linux | sudo apt install nodejsまたは公式サイトからバイナリをダウンロード |
バージョン確認コマンド
インストール後は以下のコマンドでバージョンを確認してください：
|
1 2 3 4 |
node -v # Node.jsバージョンの確認 npm -v # npmバージョンの確認 watchman version # watchmanバージョンの確認 |
create-expo-appによるプロジェクト生成: テンプレート選択とディレクトリ構造
create-expo-appコマンドを活用することで、テンプレート選択に柔軟性を持たせることができます。最新ツールチェーンで最適な環境構築が可能です。
テンプレート選択肢の比較
以下は2024年版で利用可能なテンプレートオプションです：
| テンプレート | 特徴 | 適用シーン |
|---|---|---|
| TypeScript | タイプセーフな開発が可能 | 保守性重視のプロジェクト |
| React Native CLIベース | Bare Workflow移行を前提とした構成 | 本番向けのカスタマイズが必要な場合 |
| Minimal Template | 最小限の依存関係で構築 | ファストスタートが求められるプロジェクト |
注意: EAS Buildとの連携はすべてのテンプレートで可能です。
初期ディレクトリ構造の概要
生成されたプロジェクトの主要なディレクトリ構成を表に示します：
| ファイル/フォルダ | 説明 |
|---|---|
app/ |
ソースコード（Expoの仕様に合わせた構造） |
assets/ |
画像やリソースファイルを格納 |
eas.json |
EAS Buildの設定ファイル |
Expo Goアプリとの連携: QRコードスキャンと注意点
QRコードスキャンによりローカル開発環境とExpo Goアプリを接続できます。ただし、エミュレータとの併用にはいくつかの制限があります。
スキャン手順と動作確認
Expo GoアプリとローカルPCが同一ネットワーク内にあることを前提に、以下のコマンドでQRコードを生成します：
|
1 2 |
npx expo start |
重要: QRコードスキャンはExpo Goアプリでの即時動作確認に最適ですが、エミュレータを使用する場合は別途
npx expo run:androidやnpx expo run:iosのコマンドが必要です。
ローカル開発時の注意事項
- Wi-Fi接続が不安定な場合、スキャンに失敗することがあります。
- Android端末ではUSB接続が推奨されます（Wi-Fi経由は一部デバイスで動作しない可能性あり）。
EAS Buildでのビルドフロー: Android/iOS向け設定と実行手順
EAS BuildはExpoプロジェクトを本番環境用にビルドするためのツールです。証明書管理やCI連携も可能です。
プロジェクト初期設定のポイント
iOSおよびAndroidでEAS Buildを使用する際には、以下を準備します：
- Apple Developerアカウント（iOSの場合）またはAndroidキーストア（Androidの場合）を用意
eas.jsonファイルにビルド設定を追加（例: Gradleプロパティの指定）
|
1 2 3 4 5 6 7 8 9 10 11 12 |
{ "build": { "development": { "android": { "gradleProperties": { "org.gradle.jvmargs": "-Xmx4g" } } } } } |
実際のビルドコマンド
以下のようにしてAndroidまたはiOS向けにビルドを実行します：
|
1 2 3 4 |
eas build --platform android # または eas build --platform ios |
注意: ビルド結果はEAS Dashboardからダウンロード可能ですが、CI環境で自動化する場合はEAS CLIの設定が必要です。
Bare Workflow移行: 必須条件とプロジェクト構成変更
Bare Workflowに移行することでExpoの制限を解除できますが、いくつかの前提条件があります。以下の手順に従って移行してください。
移行前の準備と注意点
- Android StudioまたはXcodeをローカル環境でインストールしていること
- React Native CLIツールが導入されていること（
npx react-native initで確認）
解説: Bare WorkflowではExpoの一部機能（QRコードスキャンなど）が利用できなくなるため、移行前にプロジェクト要件を明確にしましょう。
プロジェクト構成の変更点
Bare Workflowに移行すると以下のようなファイル構造が生成されます：
| 新規ファイル | 説明 |
|---|---|
android/ |
Android用Gradle設定（build.gradleなど） |
ios/ |
Xcodeプロジェクトファイル（.xcodeproj） |
注意: 移行後はExpoのライブラリを直接管理する必要があり、EAS Buildとの連携も確認してください。
ExpoとEASツール以外の関連技術
React Native開発においては、以下のような補完的な技術が利用可能です：
- TypeScript: タイプセーフな開発を支援
- React Navigation: ナビゲーションコンポーネントの実装
解説: これらはExpoやEASツールと併用可能ですが、プロジェクト要件に応じて導入を検討してください。