【2025年1月】Windows 11でReact Nativeの開発環境構築メモ

台湾在住の森田ユウゴです。
React Nativeでスマホアプリ開発を始めました。
この記事ではReact Nativeの環境構築を行った際の情報を記録します。

前提条件

• Windows 11(私の環境では24H2)
• Windowsのログインユーザは"Administrators"権限を保有している

React Native開発環境構築

インターネット上の情報を中心に下記の通り環境構築を行いました、

1. Visual Studio Code

今回の手順上、必須ではありませんが、コーディング関連では必須なソフトですね。
インストールしていない場合は下記からダウンロードしてインストールします。

2. Node.js

下記の「Node.js (LTS)をダウンロードする」からダウンロードしてインストールします。

2025年1月20日時点のLTSは"v22.13.0"でした。
Windows インストーラー(.msi)で、通常インストールを行いました。
インストールもGUIで簡単で、時間も一瞬でした。

3. Expoをインストール

React Nativeのアプリ開発をするための、プラットフォームが"Expo"とのこと。
Expoの会員登録も必要です。

手順2でNode.jsがインストールした前提で、PowerShellからコマンドを入力して導入します。

ただし、多くのネット記事を参考にすると、Node.jsをインストール後にPowerShellで下記のコマンドを実行するように説明があります。

## 失敗例
npm install expo-cli --global

そうすると、下記のようなエラーが出ます。

npm : このシステムではスクリプトの実行が無効になっているため、ファイル C:\Program Files\nodejs\npm.ps1 を読み込むことが
できません。詳細については、「about_Execution_Policies」(https://go.microsoft.com/fwlink/?LinkID=135170) を参照してくだ
さい。
発生場所 行:1 文字:1
+ npm install expo-cli --global
+ ~~~
    + CategoryInfo          : セキュリティ エラー: (: ) []、PSSecurityException
    + FullyQualifiedErrorId : UnauthorizedAccess

このエラーの原因は、PowerShellの実行ポリシーにあります。

• Windows 11
  セキュリティ強化のため、PowerShellの初期設定がRestrictedになっている場合が多い。
  これにより、スクリプトの実行がブロックされる。

• Windows 10
  多くの環境でRemoteSignedまたはUndefinedがデフォルト設定。
  この場合、ローカルスクリプトは実行可能なため、同様のエラーが発生しにくい。

つまり、Windows 11環境ではPowerShellの実行ポリシーを変えてあげる必要があります。
このためにいくつか方法がありますが、ここでは安全面を配慮して、今開いているPowerShellの画面だけでスクリプトを許可するコマンドを実行しました。

## 成功例② 永続的に許可
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned

ただし、上記のコマンドはPowerShellを閉じても永続的に許可する設定なので、一時的に許可したい場合は下記コマンドでも可能です。

## 成功例② 一時的に許可
powershell -ExecutionPolicy Bypass

私はPowerShellの仕様を知っているので①で進めます。

その後、もう一度下記のコマンドを実行します。

npm install expo-cli --global

下記のようにインストールが成功しました。

npm warn deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm warn deprecated abab@2.0.6: Use your platform's native atob() and btoa() methods instead
npm warn deprecated @babel/plugin-proposal-optional-catch-binding@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-catch-binding instead.
npm warn deprecated @babel/plugin-proposal-nullish-coalescing-operator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-nullish-coalescing-operator instead.
npm warn deprecated @babel/plugin-proposal-numeric-separator@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-numeric-separator instead.
npm warn deprecated @babel/plugin-proposal-class-properties@7.18.6: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-class-properties instead.
npm warn deprecated @babel/plugin-proposal-optional-chaining@7.21.0: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-optional-chaining instead.
npm warn deprecated @babel/plugin-proposal-async-generator-functions@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-async-generator-functions instead.
npm warn deprecated @babel/plugin-proposal-export-namespace-from@7.18.9: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-export-namespace-from instead.
npm warn deprecated @babel/plugin-proposal-object-rest-spread@7.20.7: This proposal has been merged to the ECMAScript standard and thus this plugin is no longer maintained. Please use @babel/plugin-transform-object-rest-spread instead.
npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supported
npm warn deprecated osenv@0.1.5: This package is no longer supported.
npm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.
npm warn deprecated @npmcli/move-file@1.1.2: This functionality has been moved to @npmcli/fs
npm warn deprecated rimraf@2.4.5: Rimraf versions prior to v4 are no longer supported
npm warn deprecated rimraf@3.0.2: Rimraf versions prior to v4 are no longer supported
npm warn deprecated glob@6.0.4: Glob versions prior to v9 are no longer supported
npm warn deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm warn deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm warn deprecated glob@7.1.6: Glob versions prior to v9 are no longer supported
npm warn deprecated sudo-prompt@9.1.1: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated sudo-prompt@8.2.5: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
npm warn deprecated @xmldom/xmldom@0.7.13: this version is no longer supported, please update to at least 0.8.*
npm warn deprecated uuid@3.4.0: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.

added 1307 packages in 27s

189 packages are looking for funding
  run `npm fund` for details
npm notice
npm notice New major version of npm available! 10.9.2 -> 11.0.0
npm notice Changelog: https://github.com/npm/cli/releases/tag/v11.0.0
npm notice To update run: npm install -g npm@11.0.0
npm notice

1. Expoでプロジェクト作成

仮に作業用フォルダを"C:\Users\user\Documents\ReactNative"とします。
PowerShellで下記のコマンドを実行します。

cd C:\Users\user\Documents\ReactNative
npx create-expo-app プロジェクト名

※「プロジェクト名」は任意の内容を入力します

プロジェクトを作成後、下記のコマンドを実行します。

cd プロジェクト名
npx expo start

そうすると下記のようにプロジェクトが作成され、QRコードが表示されます。

Starting project at C:\Users\junas\Documents\ReactNative\プロジェクト名
Starting Metro Bundler

★ここにQRコードが作成される

› Metro waiting on exp://192.168.0.246:8081
› Scan the QR code above with Expo Go (Android) or the Camera app (iOS)

› Web is waiting on http://localhost:8081

› Using Expo Go
› Press s │ switch to development build

› Press a │ open Android
› Press w │ open web

› Press j │ open debugger
› Press r │ reload app
› Press m │ toggle menu
› shift+m │ more tools
› Press o │ open project code in your editor

› Press ? │ show all commands

Logs for your project will appear below. Press Ctrl+C to exit.

初回実行時はWindowsのファイアウォールみたいな警告が出るので許可します。
※ローカルネットワークでファイルを転送したりする仕組みのようです

これでPC側の環境は整ったので、次にスマホ側の準備に移ります。

ちなみに私はプロジェクト作成でハマりました。
下記に原因などを記載しています。

結論として、Google Driveを作業フォルダとすると上手くいかないようです。

4. スマートフォンにExpo GOをインストールして設定

Expo Goをインストールし、ユーザー登録した内容でログインします。
そして手順3で表示されたQRコードを読み取ることで、スマホにアプリケーションが表示されます。

まとめ

作業用フォルダの指定でハマってしまいましたが、環境構築からスマホで起動までは非常に簡単です。
これから開発を試していこうと思います。