💻️

WindowsにReactNativeの開発環境を構築する

に公開
React Native
Windows
tech

Chocolateyのインストール

Chocolateyは、Windows向けのパッケージマネージャーです。

ソフトウェアの依存関係を含め、簡単にソフトウェアのインストール・アップデートができます。

Chocolatey - The package manager for Windows

次のコマンドをコマンドプロンプト（管理者権限）で実行します。

@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin

インストールが終わったら、コマンドプロンプトを再起動して、インストールがうまくいったか確認します。

choco -v

2.0.0

Node.jsのインストール

Node.jsは、V8 JavaScriptエンジンをベースとしたJavaScriptランタイム環境です。

Node.jsは、サーバーサイドでのJavaScript実行に特化しており、非同期I/O処理をサポートしています。また、npm(Node Package Manager)というパッケージマネージャーを含んでおり、多くのライブラリやフレームワークを利用できます。

Node.js

次のコマンドをコマンドプロンプト（管理者権限）で実行します。

choco install -y nodejs-lts

インストールが終わったら、コマンドプロンプトを再起動してインストールがうまくいったか確認します。

node --version

v18.16.1

npmもインストールされたか確認するために次のコマンドを実行します。

npm --version

9.5.1

Pythonのインストール

React NativeのビルドシステムはPythonを使っています。

Pythonは、AIやアプリ開発などに用いられている高水準インタプリタ型汎用プログラミング言語です。Webアプリケーション、データ分析、人工知能、機械学習などの分野で広く使用されています。

次のコマンドをコマンドプロンプト（管理者権限）で実行します。

choco install -y python

インストールが終わったら、コマンドプロンプトを再起動してインストールがうまくいったか確認します。

python --version

Python 3.11.4

React Native CLIのインストール

React Native CLIは、React Nativeアプリケーションを作成するためのコマンドラインインターフェース（CLI）です。React Nativeアプリの作成、ビルド、テスト、デプロイに使用できます。

React Native CLIは、React Native開発に必要な開発ツールをインストールするために使用されるnpmパッケージです。

npm install -g react-native-cli

インストールが終わったら、次のコマンドを実行してインストールがうまくいったか確認します。

react-native --version

react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory

JDKのインストール

React NativeでAndroidアプリを開発する場合はJDK（Java Development Kit）が必要です。

次のコマンドをコマンドプロンプト（管理者権限）で実行します。

choco install -y microsoft-openjdk11

インストールが終わったら、コマンドプロンプトを再起動してインストールがうまくいったか確認します。

java -version

openjdk version "11.0.18" 2023-01-17 LTS
OpenJDK Runtime Environment Microsoft-7208460 (build 11.0.18+10-LTS)
OpenJDK 64-Bit Server VM Microsoft-7208460 (build 11.0.18+10-LTS, mixed mode)

Android Studioのインストールとセットアップ

Android Studioのインストール手順

  1. 公式ページからAndroid Studioをダウンロードします

    Android Studio 公式

  2. インストーラーを起動後「Next」を押下して次の画面に進みます

  3. 「Android Virtual Device」にチェックを入れ、次の画面に進みます

  4. Android Studioのインストール先を指定し、次の画面に進みます

  5. スタートメニューを設定する画面が出るので、「Install」を押してインストールを開始します

  6. インストール完了後、「Start Android Studio」にチェックが入っていることを確認して「Finish」を押します

Android Studioのセットアップ

  1. 初回起動時、セットアップウィザードが表示されるので「Custom」を選択して次に進みます
  2. UIテーマをお好みで選択します
  3. SDKコンポーネントのセットアップ画面が表示されるので、「Performance (Intel ® HAXM)とAndroid Virtual Device」の項目にチェックを入れて次に進む。

Android SDKのインストール

  1. Android Studioのホーム画面右下の「Configure」から「SDK Manager」を選択します
  2. 「SDK Platforms」タブ画面右下の「Show Package Details」にチェックを入れます
  3. 次の内容を選択します
    • Android SDK Platform 34
    • Intel x86 Atom_64 System ImageまたはGoogle APIs Intel x86 Atom System Image
  4. 「SDK Tools」タブ画面右下の「Show Package Details」にチェックを入れます
  5. 「Android SDK Build-Tools」を展開し、「33.0.0」にチェックを入れます
  6. 最後に「Apply」を押してインストールを開始します

Android Studioの環境変数設定

React Nativeのネイティブコード構築には環境変数の設定が必須です。

  1. Windowsのスタートメニューを右クリックし、「システム」を選択します

  2. 画面右の関連設定にある「システム詳細設定」を開きます

  3. 「詳細設定」タブの「環境変数」を押下します

  4. ユーザー環境変数の「新規」を押下します

  5. 変数名と変数値を次のように入力して登録します

    変数名：ANDROID_HOME

    変数値：Android SDKへのパス　例）C:\Users<ユーザー名>\AppData\Local\Android\Sdk

  6. 変数「Path」の編集画面を開き、platform-toolsへのパスをリストに追加します

    例）C:\Users<ユーザー名>\AppData\Local\Android\Sdk\platform-tools

  7. 上記が完了したら、コマンドプロンプトを開き、次のコマンドを実行します

    adb

    環境変数設定がうまくいっていれば、次のような結果が表示される。

    Android Debug Bridge version 1.0.41
Version 30.0.3-6597393
Installed as C:\Users\<ユーザー名>\AppData\Local\Android\Sdk\platform-tools\adb.exe

プロジェクトの作成

コマンドプロンプトを管理者権限で開き、プロジェクトを作成したいパスまで移動して次のコマンドを実行します。

npx react-native init [プロジェクト名]

「Run instruction」が表示されれば作成完了です。

「TypeError: cli.init is not a function for react native」と出た場合は、バージョンを指定して実行します。

npx react-native init [プロジェクト名] --version 0.68.2

仮想デバイスの作成

  1. Android Studioのホーム画面右下の「Configure」から「AVD Manager」を選択します
  2. 「Create Virtual Device」からデバイスを押下します
  3. 任意のデバイスを選択し、次の画面に進みます
  4. 「x86 Images」タブのTargetが「Android API 33 (Google APIs)」のものを選択し、次の画面へ進みます
  5. 「Finish」を押下すると完了です

React Nativeアプリケーションを実行する

  1. コマンドプロンプトを管理者権限で開き、作成したプロジェクトのディレクトリに移動します

  2. 次のコマンドを実行し、Metroを開始します

    npx react-native start

  3. 新しくコマンドプロンプトを管理者権限で開き、作成したプロジェクトのディレクトリに移動します

  4. 次のコマンドを実行し、アプリケーションを開始します

    npx react-native run-android

すべてが正しく設定されていると、Androidエミュレータが起動します。

Discussion