macOSでReact Nativeの開発環境を構築する方法｜nvm・Node.js・Expoの設定手順

2026/7/13

はじめに

React Nativeでアプリ開発を始めるには、Node.jsの開発環境が必要です。

この記事では、macOSにNode.jsのバージョン管理ツールである「nvm」をインストールし、nvmを使ってNode.js 18.19.0を設定する手順を紹介します。

その後、Expoを使用してReact Nativeのサンプルアプリを作成し、開発サーバーを起動するところまで進めます。

nvmを利用すると、複数のNode.jsバージョンをインストールし、プロジェクトごとに簡単に切り替えられます。React NativeやExpoでは、使用するバージョンによって対応するNode.jsのバージョンが異なる場合があるため、nvmを導入しておくと開発環境を管理しやすくなります。

macOSにnvmをインストールする

最初に、macOSへnvmをインストールします。

Node.jsを直接インストールすることもできますが、React NativeのプロジェクトごとにNode.jsのバージョンを切り替えられるようにするため、今回はnvmを使用します。

ターミナルを開き、次のコマンドを実行します。

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

コマンドを実行すると、ホームディレクトリの.nvmディレクトリにnvmがインストールされます。

macOSの.zshrcにnvmの設定を追加する

macOSで標準シェルとしてzshを使用している場合は、.zshrcファイルにnvmの設定を追加します。

次のコマンドを実行し、.zshrcファイルを開きます。

vi ~/.zshrc

.zshrcファイルに、次の設定を追加します。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"  # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"  # This loads nvm bash_completion

設定を保存したら、次のコマンドを実行して.zshrcの変更内容を反映します。

source ~/.zshrc

nvmが正常にインストールされているか確認します。

nvm --version

nvmのバージョン番号が表示されれば、インストールは完了です。

nvmでインストール可能なNode.jsのバージョンを確認する

次のコマンドを実行すると、nvmでインストール可能なNode.jsのバージョン一覧を確認できます。

nvm ls-remote

多くのNode.jsバージョンが表示されます。

今回は、React Nativeの開発環境としてNode.js 24.18.0をインストールします。

Node.js 24.18.0をインストールする

次のコマンドを実行して、Node.js 24.18.0をインストールします。

nvm install 24.18.0

インストールが完了したら、使用するNode.jsのバージョンを18.19.0に切り替えます。

nvm use 24.18.0

Node.jsのバージョンを確認します。

node -v

Expoを使ってReact Nativeのサンプルアプリを作成する

Node.jsのインストールが完了したら、Expoを使ってReact Nativeのサンプルアプリを作成します。

Expoは、React Nativeアプリの開発環境を比較的簡単に構築できるフレームワークです。

次のコマンドを実行して、新しいReact Nativeプロジェクトを作成します。

npx create-expo-app sample-app

プロジェクトの作成が完了したら、作成されたディレクトリへ移動します。

cd sample-app

次のコマンドでExpoの開発サーバーを起動します。

npx expo start

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

iOSシミュレーターでReact Nativeアプリを起動する場合は、ターミナル上でiキーを押します。

i

Androidエミュレーターで起動する場合は、aキーを押します。

a

Webブラウザで確認する場合は、wキーを押します。

w

React Nativeのサンプル画面が表示されれば、macOSでのReact Native開発環境の構築は完了です。

まとめ

この記事では、macOSにnvmをインストールし、Node.js 18.19.0を設定する方法を紹介しました。

さらに、Expoを使ってReact Nativeのサンプルアプリを作成し、開発サーバーを起動する手順まで確認しました。

React NativeやExpoでは、プロジェクトによって必要なNode.jsのバージョンが異なる場合があります。nvmを導入しておくことで、複数のNode.jsバージョンを簡単に切り替えられるため、React Nativeの開発環境を管理しやすくなります。