# 【2025最新】最速でReactNative環境構築・アプリ立ち上げ > 【2025年最新版】FlutterエンジニアがReact Nativeの環境構築を紹介。Node.jsのインストールからアプリの立ち上げ、Web・ネイティブアプリ（iOS、Android）で動作確認まで手順を徹底解説。Expo Goアプリを使用した実機ビルドも行いReact Nativeの使いやすさ実感。 - 公開日: 2025-10-24 - 更新日: 2025-10-24 - 著者: Matsu - タグ: ReactNative - URL: https://tech.anycloud.co.jp/articles/react-native-environment-construction --- アプリ開発はFlutterしか触ってきていなかったので、React Nativeを触ってみようという好奇心からReactNativeの公式チュートリアルを参考に環境構築をしてみたいと思います。

Get Started with React Native · React NativeReact Native allows developers who know React to create native apps. At the same time, native developers can use React Native to gain parity between native platforms by writing common features once.

## Node.jsのインストール ReactNativeはNode.jsを使用するため以下のインストールが必要になります。私はすでに他言語の使用のためにインストールはできている状態だったので詳しいインストール方法などは割愛しますが、基本的にはbrew経由でインストールするだけでOKです。 ```shell % brew install node ```

Node.js — Run JavaScript EverywhereNode.js® is a free, open-source, cross-platform JavaScript runtime environment that lets developers create servers, web apps, command line tools and scripts.

nodejs.org

## **watchmanをインストール（macOSユーザー）** 今回、私の開発OSがMacのため、watchmanのインストールが必要になります。（Flutterでいうホットリロード的なやつらしい。要はコードを変更したときに自動でシミュレータへ反映されるみたい。） ```shell % brew install watchman ``` ## ReactNativeのプロジェクト作成以下コマンドでプロジェクトを作成します。 ```shell % npx create-expo-app reactnative-sample-app（プロジェクト名） ``` 色々と警告が出ていたりしますが、一旦無視でOK。 ## アプリで立ち上げてみる以下コマンドでアプリを立ち上げます。 ```shell % npx expo start ``` 以下のように出力されていれば成功です。

## 実際にWebとネイティブアプリで動作確認してみるさて本当にこれだけで環境ができているんでしょうか？ Web、ネイティブアプリ（iOS、Android）で確認してみましょう。 ### ①Webで確認 webを立ち上げるには、以下の指示通り `w` を押下するか、`http://localhost:8081/` を開くと良さそうです。 ```shell › Web is waiting on 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 - Apple DeveloperXcodeには、すべてのAppleプラットフォームを対象にアプリを開発、テスト、配信するために必要なすべての機能が用意されています。

developer.apple.com

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

Xcodeを使用してiOS simulatorを追加する方法 - Qiita概要 MaxにiOS simulatorを追加する方法を投稿します。既にX-codeがインストールされていることを前提としています。環境 PC: Mac v 14.3 Xcode: v 15.2 手順1 Xcodeを開いてmacのメニューバーのWindowをクリッ...

qiita.com

では、iOSも見ていきましょう。 ```shell › 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のインストールとエミュレータの立ち上げが必要になります。

https://developer.android.com/studio/install?hl=jadeveloper.android.com

では、Androidもポチッと。 ```shell › 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アプリ経由だと実機ビルドがすぐできるらしい

Expo Goアプリ - App StoreNametagの「Expo Go」をApp Storeでダウンロードしてください。スクリーンショット、評価とレビュー、ユーザのヒント、「Expo Go」に似たゲームを見ることなどができます。

apps.apple.com

Expo Go - Google Play のアプリExpoは、JavaScriptとReactを使用してアプリケーションを構築するフリー＆オープンソースのプラットフォームです。

play.google.com

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

実際に開いてみると。。。なんと、実機ビルド完了！？簡単すぎる・・・（実際に開発した時には全てこれ経由のビルドになるのか？何かしら壁になることだったりはあるのだろうか・・・？）

## まとめ今回は、FlutterエンジニアがReactNativeの環境構築だけですが、入り口に触れてみることができました。感想としてはとにかく「簡単」の一言に尽きますね。。。これだけ見ればFlutterより断然簡単です。しかも、私が思っていた以上に普通のアプリのUIでびっくりしています。また簡単なTODOアプリなどから作ってみてFlutterとの違いやReactNativeでのやりやすさ・やりにくさを確かめていきたいと思います。