【2025最新】最速でReactNative環境構築・アプリ立ち上げ

アプリ開発はFlutterしか触ってきていなかったので、React Nativeを触ってみようという好奇心からReactNativeの公式チュートリアルを参考に環境構築をしてみたいと思います。

Node.jsのインストール

ReactNativeはNode.jsを使用するため以下のインストールが必要になります。

私はすでに他言語の使用のためにインストールはできている状態だったので詳しいインストール方法などは割愛しますが、基本的にはbrew経由でインストールするだけでOKです。

% brew install node

watchmanをインストール（macOSユーザー）

今回、私の開発OSがMacのため、watchmanのインストールが必要になります。

（Flutterでいうホットリロード的なやつらしい。要はコードを変更したときに自動でシミュレータへ反映されるみたい。）

% brew install watchman

ReactNativeのプロジェクト作成

以下コマンドでプロジェクトを作成します。

% npx create-expo-app reactnative-sample-app（プロジェクト名）

色々と警告が出ていたりしますが、一旦無視でOK。

アプリで立ち上げてみる

以下コマンドでアプリを立ち上げます。

% npx expo start

以下のように出力されていれば成功です。

実際にWebとネイティブアプリで動作確認してみる

さて本当にこれだけで環境ができているんでしょうか？

Web、ネイティブアプリ（iOS、Android）で確認してみましょう。

①Webで確認

webを立ち上げるには、以下の指示通り w を押下するか、http://localhost:8081/ を開くと良さそうです。

› Web is waiting on <http://localhost:8081>
or
› Press w │ open web

...
Bundled 4809ms node_modules/expo-router/node/render.js (1074 modules)
Web node_modules/expo-router/entry.js ▓▓▓▓▓▓▓▓▓▓▓▓▓░░░ 87.0% ( 960/1029)
Web Bundled 5686ms node_modules/expo-router/entry.js (1144 modules)
Web Bundled 2019ms node_modules/expo-router/entry.js (1145 modules)
Web Bundled 38ms node_modules/expo-router/entry.js (1 module)

おお！立ち上げできてますね。

②ネイティブアプリ（iOS）で確認

その前に、XCodeやiOSシミュレーターのダウンロードがまだの方はダウンロードをしておきましょう。

XCodeをダウンロードしたら以下の記事を参考にシミュレーターデバイスをPC上に追加したら準備OKです。

では、iOSも見ていきましょう。

› Press i │ open iOS simulator

...
› Opening on iOS...
› Opening exp://192.168.1.5:8081 on iPhone 16
Downloading the Expo Go app [================================================================] 100% 0.0s

› Press ? │ show all commands
iOS Bundled 6859ms node_modules/expo-router/entry.js (1429 modules)

簡単！すごい！！

③ネイティブアプリ（Android）で確認

Androidに関しても、事前にAndroid Studioのインストールとエミュレータの立ち上げが必要になります。

では、Androidもポチッと。

› Press a │ open Android

...
› Opening on Android...
› Opening exp://192.168.1.5:8081 on Pixel_3a_API_34_extension_level_7_arm64-v8a
Downloading the Expo Go app [================================================================] 100% 0.0s

› Press ? │ show all commands
Android Bundled 5002ms node_modules/expo-router/entry.js (1445 modules)

おおおお！いいですね！

npx expo startのログに出るQRコードって何？

さて、一通りビルドもできて良さそうなのですが、謎のQRコードについて触れないわけにはいきません。

iPhoneで読み取ってみると、、、

使えないじゃん・・・・

Expo Goアプリ経由だと実機ビルドがすぐできるらしい

専用のアプリをインストールした後にカメラで再度読み取ると開けるみたい。

実際に開いてみると。。。

なんと、実機ビルド完了！？簡単すぎる・・・

（実際に開発した時には全てこれ経由のビルドになるのか？何かしら壁になることだったりはあるのだろうか・・・？）

まとめ

今回は、FlutterエンジニアがReactNativeの環境構築だけですが、入り口に触れてみることができました。

感想としてはとにかく「簡単」の一言に尽きますね。。。

これだけ見ればFlutterより断然簡単です。

しかも、私が思っていた以上に普通のアプリのUIでびっくりしています。

また簡単なTODOアプリなどから作ってみてFlutterとの違いやReactNativeでのやりやすさ・やりにくさを確かめていきたいと思います。