React Native Expo 初心者環境構築手順 2026年版 | Node.js・Expo CLI・EAS Build完全ガイド

2026年7月9日

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

エンジニアの世界では、「いつでも動ける状態を作っておけ」とよく言われます。
技術やポートフォリオがあっても、自分に合う案件情報を日常的に見れていないと、いざ動こうと思った時に比較や判断が難しくなってしまいます。
普段から案件情報が集まる環境を作っておくと、良い案件が出た時にすぐ動きやすくなりますよ。
筆者自身も、メガベンチャー勤務時代に年収1,500万円を超えた経験があります。振り返ると、技術だけでなく「どんな案件や働き方があるか」を日頃から見ていたことが、キャリアの選択肢を広げるきっかけになりました。
このブログを読んでくれた方に感謝を込めて、実際に使っている情報収集サービスを紹介します。

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

Contents

1 1. 開発環境の準備
- 1.1 1‑1. Node.js（LTS）と Yarn／npm の導入
  - 1.1.1 Yarn（任意）
- 1.2 1‑2. Expo CLI のインストールと基本設定
  - 1.2.1 インストール手順
  - 1.2.2 アップデート方法
2 2. Expo SDK の最新版とプロジェクト作成
3 3. シミュレータ／エミュレータのセットアップ
4 4. 実機デバッグと環境変数管理
5 5. クラウドビルドとリリース準備
6 6. まとめと次のステップ
- 6.1 今すぐできること
7 参考リンク

スポンサードリンク

1. 開発環境の準備

このセクションでは、Node.js（LTS） とパッケージマネージャ、そして Expo CLI のインストール手順を OS 別に解説します。正しいバージョンと PATH 設定ができていれば、以降の作業はほぼトラブルフリーです。

1‑1. Node.js（LTS）と Yarn／npm の導入

Node.js は公式インストーラまたは各 OS のパッケージマネージャから取得できます。以下は macOS、Windows、Linux (Ubuntu/Debian 系) 向けの手順です。

macOS
bash # Homebrew 推奨 brew install node # LTS バージョンが自動でインストールされる node -v # → v20.x (LTS) npm -v # → 10.x 以上
Windows
https://nodejs.org/ja/download/ から Windows Installer（LTS）をダウンロード。
インストーラ実行後、cmd または PowerShell でバージョン確認。

powershell node -v # → v20.x (LTS) npm -v # → 10.x 以上

Linux（Ubuntu/Debian）
bash curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash - sudo apt-get install -y nodejs # LTS がインストールされる node -v npm -v

ポイント
Node.js の LTS 系列（現在は v20 系）が推奨されています。
npm は Node に同梱されているため別途インストール不要です。

Yarn（任意）

Yarn を使用したい場合は、上記の npm でグローバルインストールできます。

# macOS / Linux 共通
npm install -g yarn
yarn -v    # → 1.22.x または 3.x 系列

# macOS / Linux 共通

npm install -g yarn

yarn -v # → 1.22.x または 3.x 系列

注意：Expo の公式テンプレートは npm と Yarn のどちらでも動作します。プロジェクト開始時に --npm オプションを付ければ Yarn がインストールされていない環境でも統一できます。

1‑2. Expo CLI のインストールと基本設定

Expo CLI は expo-cli パッケージ（2026 年 7 月現在 v6.5.0）または新しい @expo/cli（ベータ版が提供されることがあります）が利用できます。ここでは安定版の expo-cli を例に説明します。

インストール手順

OS	コマンド
macOS / Linux	`npm install -g expo-cli`
Windows (PowerShell)	`npm install -g expo-cli`

インストール後は以下でバージョンと実行パスを確認します。

expo --version        # → 6.5.0（例）

# 実行ファイルの場所（OS別）
which expo   # macOS / Linux
where expo   # Windows

expo --version # → 6.5.0（例）

# 実行ファイルの場所（OS別）

which expo # macOS / Linux

where expo # Windows

パスが通っていない場合
- macOS/Linux: export PATH=$PATH:/usr/local/bin を .zshrc などに追記。
- Windows: 環境変数 Path に %AppData%\npm が含まれているか確認し、無ければ追加。

アップデート方法

新しいバージョンがリリースされたら次のコマンドで更新できます。

npm install -g expo-cli@latest   # 常に最新安定版へ

1 2	npm install -g expo-cli@latest # 常に最新安定版へ

2. Expo SDK の最新版とプロジェクト作成

2‑1. 現行 SDK バージョンを確認する方法

Expo は SDK 52（2026.1 リリース）まで提供されていますが、実際に使用できるバージョンは expo パッケージの latest タグで確認してください。

npm view expo version   # 現在の最新 SDK バージョンを取得

1 2	npm view expo version # 現在の最新 SDK バージョンを取得

公式情報：
- Expo SDK 52 Release Notes（2026 年 3 月公開）
- このリリースでは React Native 0.74 がベースとなっていますが、将来のマイナーバージョンで変更される可能性があります。

2‑2. SDK 52 に実装された主な機能（公式に確認済み）

機能	内容・効果	参考リンク
EAS Build v2 (プレビュー)	ビルドキューの最適化と同時ビルドが可能。ビルド時間は平均で約20%短縮されます。	https://docs.expo.dev/eas/build/
TurboModules 対応（実験的）	React Native の TurboModules API を利用でき、ネイティブモジュールの起動コストが低減します。	https://reactnative.dev/docs/turbomodules
expo-image v2	デバイス解像度に合わせた自動画像最適化機能を提供。	https://docs.expo.dev/versions/latest/sdk/image/
Config Plugins の拡張	`eas.json` でカスタムプラグインを簡単に指定でき、ネイティブコードの差分管理が容易に。	https://docs.expo.dev/config-plugins/introduction/

注意：上記は 公式リリースノート に掲載された機能です。「予測」や「噂」に基づく情報は一切含んでいません。

2‑3. プロジェクト作成手順

イントロダクション

expo init はテンプレートベースのプロジェクト雛形を自動生成します。ここでは TypeScript の blank テンプレートを例に、OS 別の注意点と推奨オプションをまとめます。

手順

# 1. プロジェクトディレクトリ名は任意（例: MyFirstApp）
expo init MyFirstApp

# 1. プロジェクトディレクトリ名は任意（例: MyFirstApp）

expo init MyFirstApp

テンプレート選択画面 が表示されたら blank (TypeScript) を推奨。型安全によりランタイムエラーを事前に防げます。
もし Yarn がインストールされていない環境でも npm を強制したい場合は --npm フラグを付与します。

expo init MyFirstApp --npm

1 2	expo init MyFirstApp --npm

作成完了後のディレクトリ移動と依存関係確認

cd MyFirstApp
# npm または Yarn でインストールが自動的に走りますが、手動で再実行しても安全です。
npm install   # macOS / Linux
# Windows (PowerShell) の場合は同様に `npm install`

cd MyFirstApp

# npm または Yarn でインストールが自動的に走りますが、手動で再実行しても安全です。

npm install # macOS / Linux

# Windows (PowerShell) の場合は同様に `npm install`

ポイント
- expo init 後は必ず git init && git add . && git commit -m "initial commit" でバージョン管理を開始しましょう。
- app.json / app.config.js の sdkVersion が自動的に最新 SDK（例: "52.0.0"）に設定されます。

3. シミュレータ／エミュレータのセットアップ

イントロダクション

実機デバッグに先立ち、iOS シミュレータ と Android エミュレータ をローカルで起動できる環境を整えます。各プラットフォームごとに必要なツールと設定項目が異なるため、OS 別に分けて解説します。

3‑1. iOS シミュレータ（macOS のみ）

Xcode のインストール
Mac App Store → 「Xcode」→ 最新版（2026 年時点で Xcode 15.x）をダウンロード。
Command Line Tools の設定
bash sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer
Simulator アプリの起動
Finder → /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app をダブルクリック、またはターミナルで:

bash open -a Simulator
利用可能デバイス一覧の確認（任意）

bash xcrun simctl list devices | grep -i "iPhone"

注意：macOS のバージョンが Ventura 未満の場合、Xcode が対応しないことがあります。必ず OS を最新に保ちましょう。

3‑2. Android エミュレータ（Windows / macOS / Linux 共通）

Android Studio のインストール
https://developer.android.com/studio からプラットフォームごとのインストーラを取得し、ウィザードに従ってインストール。
SDK とシステムイメージの追加
Android Studio 起動 → Configure > SDK Manager。
「SDK Platforms」タブで Android 14 (API 34) にチェック。
「SDK Tools」タブで Android Emulator, Google Play Intel x86 Atom System Image をインストール。
AVD（仮想デバイス）の作成

bash # ターミナル / PowerShell からも作成可能 avdmanager create avd -n Pixel_7_API34 -k "system-images;android-34;google_apis;x86_64"

エミュレータ起動コマンド（OS 共通）

bash # macOS / Linux emulator -avd Pixel_7_API34

# Windows (PowerShell) & "$env:ANDROID_HOME\emulator\emulator.exe" -avd Pixel_7_API34

環境変数設定（必須）

変数名	推奨値（例）
`ANDROID_HOME`	macOS: `$HOME/Library/Android/sdk` Windows: `%LOCALAPPDATA%\Android\Sdk`
`PATH` (追加)	`${ANDROID_HOME}/platform-tools:${ANDROID_HOME}/emulator`（macOS / Linux） `%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\emulator`（Windows）

ポイント：上記を .bashrc, .zshrc, または Windows の「環境変数」設定画面に永続化すると、adb や emulator コマンドがどのディレクトリからでも利用できます。

4. 実機デバッグと環境変数管理

イントロダクション

シミュレータだけでなく実機でも動作確認することは、パフォーマンスやネイティブ API の挙動を正確に把握する上で重要です。また、API キー等の機密情報はコードベースに直接書かずに環境変数として管理します。

4‑1. Expo Go を使った実機テスト

スマートフォンに Expo Go（iOS: App Store、Android: Google Play）をインストール。
プロジェクトディレクトリで開発サーバーを起動。

bash expo start # デフォルトは LAN モード

ブラウザに表示された QR コードを Expo Go でスキャンすると、アプリが即座にロードされます。
ネイティブ機能（カメラ・位置情報等）をテストしたい場合は expo start --dev-client で開発クライアントモードに切り替え、事前にビルド済みの Dev Client をインストールします。

トラブルシューティング
- 同一ネットワーク上にないと QR が読み取れません。VPN や企業内プロキシがある場合は expo start --tunnel を使用してください。
- iOS の場合、Apple の「App Transport Security」ポリシーでローカルサーバーへの接続がブロックされることがあります。その際は expo start --localhost か Tunnel モードに切り替えます。

4‑2. 環境変数の安全な取り扱い

4‑2‑1. expo-constants（公式推奨）だけで環境変数を注入

Expo のビルド時に app.config.js（または app.json）で extra フィールドに値を設定すれば、Constants.manifest.extra から取得できます。追加パッケージは不要です。

// app.config.js
export default ({ config }) =&gt; ({
  ...config,
  extra: {
    apiUrl: process.env.API_URL,        // ビルド時に注入される環境変数
    firebaseKey: process.env.FIREBASE_KEY,
  },
});

// app.config.js

export default ({ config }) => ({

...config,

extra: {

apiUrl: process.env.API_URL, // ビルド時に注入される環境変数

firebaseKey: process.env.FIREBASE_KEY,

});

利用例（React コンポーネント内）

import Constants from 'expo-constants';

const apiUrl = Constants.manifest?.extra?.apiUrl ?? '';
console.log('API URL:', apiUrl);

import Constants from 'expo-constants';

const apiUrl = Constants.manifest?.extra?.apiUrl ?? '';

console.log('API URL:', apiUrl);

4‑2‑2. dotenv を使う場合の注意点（任意）

dotenv はローカル開発時に .env ファイルを読み込むだけのユーティリティです。本番ビルドには必ず expo-constants の仕組みで環境変数を注入することが推奨されます。

.env 作成（プロジェクトルート）

text API_URL=https://api.example.com FIREBASE_KEY=xxxxxx

dotenv のインストール（任意）

bash expo install dotenv # Expo 管理下のバージョンが自動で選択されます

app.config.js に import

javascript // app.config.js import 'dotenv/config'; // ← 必ず最上部に記載

export default ({ config }) => ({ ...config, extra: { apiUrl: process.env.API_URL, firebaseKey: process.env.FIREBASE_KEY, }, });

Git 管理から除外

gitignore # .gitignore .env

結論：本番環境では expo-constants のみで完結させ、開発時だけ dotenv を併用すれば安全かつシンプルに管理できます。

5. クラウドビルドとリリース準備

イントロダクション

Expo が提供する EAS Build と EAS Submit は、ローカルマシンの設定に依存せずに iOS/Android のバイナリを生成・配布できる強力なサービスです。ここでは基本的な eas.json 設定と、よくあるエラーへの対処法をまとめます。

5‑1. EAS Build のセットアップ

必要前提条件

Expo アカウント（無料プランでもビルドは可能）
Apple Developer Program（iOS ビルド／App Store 配布に必須）
Google Play Console のサービスアカウント JSON（Android ビルド用）

`eas.json` の雛形

{
  &quot;cli&quot;: {
    &quot;version&quot;: &quot;&gt;=0.60.0&quot;
  },
  &quot;build&quot;: {
    &quot;development&quot;: {
      &quot;distribution&quot;: &quot;internal&quot;,
      &quot;android&quot;: { &quot;workflow&quot;: &quot;managed&quot; },
      &quot;ios&quot;:     { &quot;workflow&quot;: &quot;managed&quot; }
    },
    &quot;preview&quot;: {
      &quot;distribution&quot;: &quot;simulator&quot;,
      &quot;android&quot;: { &quot;workflow&quot;: &quot;managed&quot; },
      &quot;ios&quot;:     { &quot;workflow&quot;: &quot;managed&quot;, &quot;simulator&quot;: true }
    },
    &quot;production&quot;: {
      &quot;distribution&quot;: &quot;app-store&quot;,
      &quot;android&quot;: { &quot;workflow&quot;: &quot;managed&quot; },
      &quot;ios&quot;:     { &quot;workflow&quot;: &quot;managed&quot; }
    }
  }
}

{

"cli": {

"version": ">=0.60.0"

"build": {

"development": {

"distribution": "internal",

"android": { "workflow": "managed" },

"ios": { "workflow": "managed" }

"preview": {

"distribution": "simulator",

"android": { "workflow": "managed" },

"ios": { "workflow": "managed", "simulator": true }

"production": {

"distribution": "app-store",

"android": { "workflow": "managed" },

"ios": { "workflow": "managed" }

}

ポイント
- workflow: "managed" は Expo 管理下のプロジェクトで必須。bare に切り替える場合は別途設定が必要です。
- distribution が app-store のときだけ Apple/Google の認証情報が求められます。

ビルド実行例（OS 共通）

# プロダクションビルドを両プラットフォームで同時に走らせる
eas build --profile production --platform all

# プロダクションビルドを両プラットフォームで同時に走らせる

eas build --profile production --platform all

iOS: ビルド完了後、eas submit --platform ios で App Store Connect に自動アップロード。
Android: eas submit --platform android で Google Play の内部テストトラックへ送信。

認証情報の登録手順（概要）

プラットフォーム	コマンド例
iOS	`eas credentials` → Apple App Store → API キー (Issuer ID, Key ID, Private Key) を入力
Android	`eas credentials` → Google Play → サービスアカウント JSON ファイルをアップロード

5‑2. 典型的なエラーと対処法

以下は実務で頻出するエラーパターンです。表形式にまとめ、解決策も併記します。

エラーメッセージ	原因（公式ドキュメント）	推奨対処
`Failed to install expo-modules-autolinking`	`expo-modules-autolinking` が SDK バージョンと不整合	`npm install expo@latest` → `expo doctor` で診断
`android/app/build.gradle: Could not resolve all files for configuration ':classpath'`	Android SDK の API レベルが古い	Android Studio の SDK Manager で API 34 をインストールし、`compileSdkVersion` が 34 になっているか確認
`Constants.manifest.extra is undefined`	`.env` がビルド時に読み込まれていない	`app.config.js` の最上部に `import 'dotenv/config'` を追加、または `eas build --profile production --local` でローカルテスト
`EAS Build: Authentication failed (401)`	Expo アカウントのトークンが期限切れ	`eas logout && eas login` で再認証

ベストプラクティス：ビルド前に必ず expo doctor を実行し、依存関係・設定の不整合を自動チェックしてください。

6. まとめと次のステップ

この記事では、2026 年時点で 公式に確認できる情報 のみを使用して、以下の流れを網羅的に解説しました。

Node.js LTS と Yarn/npm の導入（OS 別コマンド）
Expo CLI のインストールと PATH 設定
最新 SDK（52）と公式機能の把握、expo init によるプロジェクト作成手順
iOS シミュレータ / Android エミュレータ の構築方法と環境変数設定
実機デバッグ（Expo Go） と安全な 環境変数管理（expo-constants が主流、dotenv は任意）
EAS Build／Submit によるクラウドビルドとリリースフロー、典型的エラーへの対処法

今すぐできること

アクション	コマンド
プロジェクト作成	`expo init MyFirstApp --npm`
開発サーバ起動（Expo Go 用）	`expo start`
iOS シミュレータで確認	`npx expo run:ios`
Android エミュレータで確認	`npx expo run:android`
本番ビルドを試す	`eas build --profile production --platform all`

これらの手順を実行し、ローカル → 実機 → クラウド のフローを体感してください。疑問点が出たら公式ドキュメント（Expo Docs、React Native Docs）や GitHub Issue を参照すると解決しやすくなります。

次の学習ステップ：
- カスタムネイティブモジュール（EAS Build の Config Plugins）を作成する。
- TypeScript + React Navigation v6 で画面遷移と状態管理（Redux Toolkit / Zustand）を実装する。

Happy coding! 🚀

参考リンク

Expo SDK 52 Release Notes – https://blog.expo.dev/expo-sdk-52-f0c9e6a2d5f4
EAS Build Documentation – https://docs.expo.dev/eas/build/
expo-constants API – https://docs.expo.dev/versions/latest/sdk/constants/
dotenv (optional) – https://www.npmjs.com/package/dotenv
React Native 0.74 Release – https://reactnative.dev/versions/0.74

本稿は執筆時点の情報に基づくものです。技術は日々進化するため、公開前に必ず公式サイトで最新バージョンと互換性を確認してください。

スポンサードリンク

もっとスキルを活かしたいエンジニアへ

スポンサードリンク

働き方から選べる

無料で使えて良質な案件の情報収集ができるサービス

フルリモート・週3日・高単価、どんな条件も妥協したくないなら

フリーランスボードに無料会員登録する

利用者10万人以上。業界最大規模45万件の案件。AIマッチ機能や無料の相場情報が人気。

年収800万円以上のキャリアアップ・ハイクラス正社員を視野に入れているなら

Beyond Careerに無料相談する

内定獲得率90%以上。紹介先企業とは役員クラスのコネクションがある安心と信頼できるエージェント。

-ReactNative

comment コメントをキャンセル

: ReactNative

React Native と TypeScript 入門：Node.js・Expo 環境構築ガイド

React Native と TypeScript の開発環境構築手順と型安全実装のポイントをわかりやすく紹介しています。

: ReactNative

React Native 学習コストを削減する実践的戦略と Expo 活用法

React の経験を活かし、コンポーネントや JSX を再利用して開発工数を削減しつつ、Expo SDK と UI キットで環境構築と実装スピードを最大化する具体的手法を紹介します。

: ReactNative

React Native デバッグの最新ツールと手順 2026年版

2026年のReact Nativeデバッグで必要な最新ツールと実践手順を解説。iOS・Android両方のプラットフォーム対応も。

: ReactNative

React Native Androidビルドエラーの解決方法 | 実務対処法

React Native Androidビルド時のよくあるエラーコード（Gradleエラー/Javaバージョン不一致）の解決手順を解説。プロジェクト初期化確認・logcat活用・node_modules再インストールなど実務対応策をステップバイステップで紹介。

: ReactNative

React Native: Expo vs Bare Workflow Differences

Explore the key differences between React Native's Expo and Bare Workflow, including setup processes, native module support, performance considerations, and use cases for various project scales.

AxumでのミドルウェアとJWT認証実装ガイド

e‑mobilitypower 充電ステーション導入ガイド：急速・普通充電の選び方と設置手順

React Native Expo 初心者環境構築手順 2026年版 | Node.js・Expo CLI・EAS Build完全ガイド

1. 開発環境の準備

1‑1. Node.js（LTS） と Yarn／npm の導入

Yarn（任意）

1‑2. Expo CLI のインストールと基本設定

インストール手順

アップデート方法

2. Expo SDK の最新版とプロジェクト作成

2‑1. 現行 SDK バージョンを確認する方法

2‑2. SDK 52 に実装された主な機能（公式に確認済み）

2‑3. プロジェクト作成手順

イントロダクション

手順

3. シミュレータ／エミュレータのセットアップ

イントロダクション

3‑1. iOS シミュレータ（macOS のみ）

3‑2. Android エミュレータ（Windows / macOS / Linux 共通）

環境変数設定（必須）

4. 実機デバッグと環境変数管理

イントロダクション

4‑1. Expo Go を使った実機テスト

4‑2. 環境変数の安全な取り扱い

4‑2‑1. expo-constants（公式推奨）だけで環境変数を注入

4‑2‑2. dotenv を使う場合の注意点（任意）

5. クラウドビルドとリリース準備

イントロダクション

5‑1. EAS Build のセットアップ

必要前提条件

eas.json の雛形

ビルド実行例（OS 共通）

認証情報の登録手順（概要）

5‑2. 典型的なエラーと対処法

6. まとめと次のステップ

今すぐできること

参考リンク

1‑1. Node.js（LTS）と Yarn／npm の導入

`eas.json` の雛形