台湾在住の森田ユウゴです。
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

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コードを読み取ることで、スマホにアプリケーションが表示されます。

まとめ

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