React Native環境構築の完全手順【2026年版】Mac・Windows対応

iOSとAndroidのアプリを同じコードベースで開発したいとき、React Nativeは有力な選択肢です。しかし、Node.jsやXcode、Android Studioなど複数のツールを正しく組み合わせる必要があり、最初の環境構築でつまずくケースが少なくありません。2026年2月にはReact Native 0.84がリリースされ、Hermes V1のデフォルト化やiOSビルドの大幅な高速化が実現しました。本記事ではMac・Windowsの両OSに対応し、Expo経由とCLI直接利用の両ルートをカバーした環境構築手順を整理しています。

React Nativeの全体像と2026年の現在地

React NativeはMeta（旧Facebook）が開発したオープンソースのクロスプラットフォームフレームワークです。JavaScriptおよびTypeScriptでUIを記述し、iOS・Androidのネイティブコンポーネントへ変換して描画します。

0.84で何が変わったか

2026年2月11日にリリースされたReact Native 0.84では、以下の変更が加わりました（出典: React Native公式ブログ）。

• Hermes V1がデフォルトJSエンジンに: 実行速度の向上とメモリ使用量の削減が自動的に適用されます。内部ベンチマークでは複雑なビューのTTI（Time to Interactive）が10〜15%改善しています
• iOSプリコンパイル済みバイナリの標準搭載: pod install 時に .xcframework が自動ダウンロードされ、M4マシンでのクリーンビルドが従来比約8倍高速化しています
• レガシーアーキテクチャのiOS除外: ビルド時間とアプリサイズの両方が削減されています
• React 19.2.3を採用
• Node.js v22.11以降が必須

New Architecture（新アーキテクチャ）の定着

0.76からデフォルト有効になったNew Architectureは、3つの基盤技術で構成されています。

0.84ではiOSビルドからレガシーコードが除外されており、New Architectureが事実上の標準となっています。

Flutterとの立ち位置の違い

クロスプラットフォーム開発ではGoogleのFlutterも広く利用されています。両者の主な違いは開発言語とレンダリング方式にあります。

React Nativeは1.0リリースが視野に入っている段階で、React Universe Conf 2025でも「on the horizon」と発表されています。New Architectureの安定化を経て、長期的な開発基盤としての信頼性が高まっています。

ExpoとReact Native CLIの選択基準

React Nativeの開発を始める際、最初に決める必要があるのがExpo経由かCLI直接利用かの選択です。

3つの開発スタイル

Expoの利点と制約

利点:

• Xcode・Android Studioのインストールなしで実機テストが可能（Expo Go利用時）
• OTAアップデート（EAS Update）でストア審査なしにJSバンドルを配信可能
• EAS Buildで署名証明書の管理が自動化される

制約:

• Expo Goでは利用できないネイティブモジュールが存在します（例: Bluetooth Low Energy、特定のプッシュ通知ライブラリなど）
• Expo SDKのバージョンに依存するため、最新のReact Nativeをすぐに利用できない場合があります（2026年2月時点でExpo SDK 54の安定版はReact Native 0.81ベース）
• クラウドビルドの無料枠には月間の制限があります

結論: 初学者やプロトタイピングにはExpo Goから始め、カスタムネイティブモジュールが必要になった段階でDevelopment Buildへ移行するのが効率的です。

Expo SDK バージョン状況（2026年2月時点）

SDK 55ではレガシーアーキテクチャが完全に削除され、Hermes V1のオプトインテスト、バイトコード差分によるOTAアップデートサイズの約75%削減などが含まれています。

共通の準備 – Node.jsとパッケージマネージャー

Mac・Windows共通で最初に必要なのがNode.jsのインストールです。

Node.jsのバージョン選定

React Native 0.84ではNode.js v22.11以降が必須です（出典: React Native公式ドキュメント）。0.81〜0.83を利用する場合はv20.19.4以降で動作します。

バージョン管理ツールの利用を推奨します。プロジェクトごとにNode.jsバージョンを切り替えられるため、複数プロジェクトの並行開発で競合しません。

# nvm（Node Version Manager）のインストール
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.4/install.sh | bash

# Node.js v22のインストールと有効化
nvm install 22
nvm use 22

# バージョン確認
node -v

fnm（Fast Node Manager）はRust製の高速な代替ツールです。

# macOS（Homebrew経由）
brew install fnm

# Windows（winget経由）
winget install Schniz.fnm

# Node.jsのインストール
fnm install 22
fnm use 22

パッケージマネージャーの選択

いずれを選んでもReact Nativeの動作に影響はありません。チームで統一されていなければnpmで問題ありません。

macOSでのセットアップ手順

macOSではiOS・Android両方のビルドが可能です。Expo Goのみで始める場合はNode.jsだけで十分ですが、ローカルビルドにはXcodeとAndroid Studioが必要になります。

Homebrewの導入

macOSのパッケージマネージャーであるHomebrewを使うと、後続ツールのインストールが効率的です。

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Watchmanのインストール

Watchmanはファイルシステムの変更を監視するツールで、React Nativeのホットリロードを高速化します。

brew install watchman

XcodeとCommand Line Tools

iOS向けビルドにはXcodeが必須です。

1. App StoreからXcodeの最新版をインストール
2. Command Line Toolsを設定:

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

3. Xcodeを起動してライセンスに同意
4. Xcode > Settings > Platforms からiOSシミュレータをダウンロード

Android Studio・SDK・エミュレーターの設定

1. Android Studio公式サイトからダウンロード・インストール
2. セットアップウィザードで「Custom」を選択し、以下をチェック:
   • Android SDK Platform 35
   • Android SDK Build-Tools 36.0.0
   • Android SDK Command-line Tools（latest）
   • Android Emulator
3. SDK Managerで「Intel x86 Atom_64 System Image」（Intel Mac）または「Google APIs ARM 64 v8a System Image」（Apple Silicon）を追加

エミュレーターの作成:

1. Android Studio > Virtual Device Manager
2. 「Create Virtual Device」を選択
3. Pixel系デバイスを選択し、API Level 35のシステムイメージを設定

JDK 17（Azul Zulu）のセットアップ

React NativeのAndroidビルドにはJDK 17が必要です。Azul Zulu OpenJDKはIntel・Apple Siliconの両方に対応しています。

brew install --cask zulu@17

インストール後にJAVA_HOMEが正しく設定されていることを確認します。

java -version
# openjdk version "17.x.x" と表示されればOK

CocoaPodsのインストール

iOSのネイティブ依存関係の管理にCocoaPodsを使用します。

sudo gem install cocoapods

Apple Silicon（M1/M2/M3/M4）で問題が発生する場合は、Bundlerを経由します。

sudo gem install bundler
bundle install
bundle exec pod install

環境変数の設定（.zshrc）

~/.zshrc に以下を追記します。

# JDK
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home

# Android SDK
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/platform-tools

設定を反映します。

source ~/.zshrc

正しく設定できたか確認します。

echo $JAVA_HOME
echo $ANDROID_HOME
adb --version

WindowsでのAndroid向けセットアップ手順

WindowsではAndroid向けの開発が可能です。iOSのビルドにはmacOSが必要なため、WindowsからiOSアプリを直接ビルドすることはできません。ただし、Expo Goを使えばWindows環境からでもiOS実機でのテストは可能です。

Chocolateyによるツール一括導入

ChocolateyはWindows用のパッケージマネージャーです。管理者権限のPowerShellで実行します。

# Chocolateyのインストール
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))

# Node.jsとJDK 17の一括インストール
choco install -y nodejs-lts microsoft-openjdk17

Android Studioの設定とSDKインストール

1. Android Studio公式サイトからインストーラをダウンロード
2. セットアップウィザードで以下を選択:
   • Android SDK Platform 35
   • Android SDK Build-Tools 36.0.0
   • Android Emulator
   • Android SDK Command-line Tools（latest）
3. SDK Manager > SDK Tools タブで上記がインストール済みであることを確認

JDK 17（Microsoft OpenJDK）のセットアップ

Chocolateyでインストール済みの場合は追加作業不要です。手動インストールの場合はMicrosoft OpenJDK 17からダウンロードします。

java -version
# openjdk version "17.x.x" と表示されればOK

環境変数の設定

Windowsの「システム環境変数」に以下を追加します。

PATHに以下を追加:

%LOCALAPPDATA%\Android\Sdk\platform-tools

PowerShellで確認します。

echo $env:ANDROID_HOME
echo $env:JAVA_HOME
adb --version

Expoプロジェクトの作成と起動

環境構築が完了したら、Expoでプロジェクトを作成して動作確認を行います。

プロジェクトの作成

npx create-expo-app@latest MyApp
cd MyApp

テンプレートを指定する場合は --template オプションを使います。

npx create-expo-app@latest MyApp --template tabs

Metro Bundlerの起動

npx expo start

起動するとターミナルにQRコードと操作メニューが表示されます。

実機での確認（Expo Go）

1. スマートフォンにExpo Goアプリをインストール（iOS: App Store / Android: Google Play）
2. ターミナルに表示されたQRコードをスキャン
   • iOS: カメラアプリで読み取り
   • Android: Expo Goアプリ内のスキャナーで読み取り
3. アプリが自動的にロードされ、ウェルカム画面が表示されます

PCとスマートフォンが同じWi-Fiネットワークに接続されている必要があります。

シミュレータ・エミュレータでの確認

Metro起動中に以下のキーを押します。

Web（ブラウザ）での確認

React NativeアプリをWebでも動作させるには、expo-router と react-native-web が必要です。デフォルトテンプレートには含まれているため、w キーを押すだけでブラウザが開きます。

React Native CLIプロジェクトの作成と起動

Expoを使わずに直接React Native CLIでプロジェクトを作成する場合の手順です。Xcode・Android Studioのセットアップが事前に完了している必要があります。

プロジェクトの作成

npx @react-native-community/cli@latest init AwesomeProject
cd AwesomeProject

以前 react-native-cli をグローバルインストールしていた場合は、先にアンインストールします。

npm uninstall -g react-native-cli @react-native-community/cli

iOSでの起動（macOSのみ）

# 依存関係のインストール
cd ios && pod install && cd ..

# iOSシミュレータで起動
npx react-native run-ios

特定のシミュレータを指定する場合:

npx react-native run-ios --simulator="iPhone 16"

Androidでの起動

Android Studioでエミュレータを起動した状態で実行します。

npx react-native run-android

Metro Bundlerの手動起動

アプリの起動時にMetroが自動起動しない場合は、別のターミナルで手動起動します。

npx react-native start

R キーを2回押すとアプリがリロードされます。

VSCodeで快適に開発するための設定

React Native開発ではVSCode（Visual Studio Code）が広く利用されています。適切な拡張機能を導入すると、デバッグやコード補完の効率が大幅に向上します。

推奨拡張機能

settings.jsonの設定例

VSCodeの settings.json に以下を追加すると、保存時の自動フォーマットとESLint自動修正が有効になります。

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  },
  "typescript.preferences.importModuleSpecifier": "relative"
}

環境構築でよくあるエラーと対処法

Node.jsバージョンの不一致

症状: error Unsupported engine や The engine "node" is incompatible が表示される。

対処:

node -v
# v22.11未満の場合はアップデート
nvm install 22
nvm use 22

React Native 0.84ではv22.11以上が必須です。nvmやfnmでプロジェクトごとにバージョンを固定しておくと安全です。

Android SDKのパス設定ミス

症状: SDK location not found や ANDROID_HOME is not set が表示される。

対処:

# macOS
echo $ANDROID_HOME
# 空の場合は ~/.zshrc に追記
export ANDROID_HOME=$HOME/Library/Android/sdk

# Windows
echo $env:ANDROID_HOME
# 空の場合はシステム環境変数に設定
# ANDROID_HOME = %LOCALAPPDATA%\Android\Sdk

CocoaPods関連のエラー（Apple Silicon）

症状: pod install で LoadError や CDN: trunk URL couldn't be downloaded が発生する。

対処:

# Rosetta経由でインストール
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install

# または Bundler経由
bundle exec pod install

M1/M2/M3/M4チップでは ffi gemのネイティブ拡張がarm64向けにビルドできない場合があります。

Xcodeバージョン不足

症状: ビルド時に Xcode must be fully installed before you can continue と表示される。

対処:

1. App StoreでXcodeを最新版にアップデート
2. Command Line Toolsのパスを再設定:

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

3. Xcodeを一度起動してライセンスに同意

Gradleビルドエラー（Android）

症状: Could not determine the dependencies of task ':app:compileDebugJavaWithJavac' などのGradleエラー。

対処:

# キャッシュのクリア
cd android && ./gradlew clean && cd ..

# Gradleラッパーの再生成
cd android && ./gradlew wrapper && cd ..

# JDKバージョンの確認（17であること）
java -version

JDK 17以外（例: JDK 21）を使用しているとビルドが失敗する場合があります。

Metro Bundlerのポート競合

症状: Another process is running on port 8081 が表示される。

対処:

# macOS / Linux: ポート8081を使用しているプロセスを確認
lsof -i :8081

# 別のポートで起動
npx react-native start --port 8082
# Expoの場合
npx expo start --port 8082

まとめ

React Native環境構築の要点を整理します。

• React Native 0.84（2026年2月リリース）ではHermes V1がデフォルト化し、Node.js v22.11以降が必須
• Expo Go を使えばNode.jsのインストールだけで実機テストを開始でき、macOS以外でもiOS動作確認が可能
• macOS ではHomebrew・Watchman・Xcode・Android Studio・JDK 17・CocoaPodsをセットアップし、環境変数（JAVA_HOME・ANDROID_HOME）を .zshrc に設定
• Windows ではChocolateyでNode.jsとJDK 17を導入し、Android Studioを設定。iOSのローカルビルドは不可
• VSCode にReact Native Tools・ESLint・Prettier・ES7 Snippetsを導入すると開発効率が向上
• エラーが発生した場合は、Node.jsバージョン・環境変数・JDKバージョンの3点を最初に確認

React Nativeは1.0リリースへ向けてNew Architectureの安定化が進んでおり、クロスプラットフォームモバイル開発の基盤として今後も発展が見込まれるフレームワークです。