このような疑問に答えます。
React Nativeの環境構築の方法にはRect Native Cliを使用する方法とExpoを使う方法の大きく２種類あります。
今回は、最もプレーンなReact Native Cliを使用する環境構築の手順を紹介します。
MacでReact Nativeの開発を行いたい場合はReact Nativeの環境構築の手順【MacOS版/M1対応】をご覧ください。
※この記事は、2020年9月時点、React Nativeの公式ホームページで推奨されてる、Windowsでの開発環境の構築手順を参考にして紹介します。
詳しくはReact Native公式ホームページのSetting up the development environmentをご覧ください。
〇この記事の内容
＜スポンサーリンク＞
はじめに：React Nativeの紹介と注意事項
React Nativeは、Facebookが開発したJavascriptのフレームワークのReactをモバイルで使用できるようにしたフレームワークです。
モバイルアプリフレームワークなので、Android、iOSの両方で動くアプリを作れます。
React Nativeを用いるメリットを知りたい場合は、アプリ開発でReact Nativeを使うメリットをご覧ください。
しかし、Windows環境で開発をする場合、iOSのプロジェクトは直接ビルドできません。
iOSプロジェクトをビルドしたい場合は、Expoを利用するか、MacOSのパソコンを使用しましょう。
Chocolateyのインストール
ChocolateyはWindowsのアプリをコマンドでインストールするためのツールです。
Chocolateyの公式ホームページはこちら。
React Nativeの環境をインストールするためにChocolateyをインストールします。
① PowerShellかコマンドプロンプトを管理者として実行します。
※ PowerShell、またはコマンドプロンプトの実行方法：タスクバーの検索欄にPowerShellまたはcmdと記入して、「管理者として実行」を選択します。
② Chocolateyのhttps://chocolatey.org/installに記載されている以下のコマンドを先ほど起動したPowerShellかコマンドプロンプトで実行します。
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))③ インストールが完了したら、chocoと入力し、実行してみましょう。
バージョンが表示されたら完了です。
Node、Python2、JDKのインストール
React NativeのビルドにはJavaScriptを実行する環境のNodeとPythonを使用します。
Androidアプリの開発のためにJDK(Java Development Kit)も必要です。
Node、Python2、JDKを先程インストールしたChocolateyを使ってインストールします。
JDKはバージョン８以降のものをインストールしましょう。
ここでは、バージョン11をインストールします。
① PowerShellかコマンドプロンプトを管理者として実行します。
② 以下のコードを記述して実行します。
choco install -y nodejs.install python2 openjdk11③無事インストールされたか確認をします。
一度、PowerShellかコマンドプロンプトを閉じ、再度起動します。
そして、node -v、python --version、java -version、javac -versionを順番に実行します。
すべてのバージョンが確認出来たらインストール完了です。
Android開発環境の準備
これから、Androidでの開発をするための環境を整えます。
Android Studioインストール
Android Studioのインストーラーを公式ページからダウンロードします。
ダウンロードが出来たら、Android Studioのインストーラーを起動しましょう。
インストーラーの指示に沿ってインストールの手順を進めていきます。
セットアップの「choose component」の画面で、「Android Virtual Device」にチェックが入ってることに注意しましょう。
インストールできて、Android Studioが起動すると、いくつかの設定を行います。
次の画面にたどり着いたら、「Custom」を選択します。
SDK Components SetUpで 「Android SDK Platform」下の項目と「Android Virtual Device」の項目にチェックを入れましょう。
それ以外はそのままの推奨設定で問題ありません。
以下のAndroid Studioのホーム画面にたどり着いたら、インストール完了です。
Android SDKのインストール
Android Studioのホーム画面右下の「Configure」から、「SDK Manager」を選択します。
画面上部の「SDK Tools」を選択後、画面右下の「Show Package Details」にチェックを入れ、「29.0.2」が選択されているか確認します。
選択されていない場合は、チェックを入れ、「Apply」をクリックします。
ライセンスに同意し、追加したSDKをインストールします。
以下の画面になったらSDKのインストール完了です。
環境変数の設定
Android Studioの環境変数を設定します。
まず、ANDROID_HOMEの環境変数を設定します。
①コントロールパネルを開きます。
タスク バーの検索ボックスに「コントロール パネル」と入力して、[コントロール パネル] を選びます。
②「ユーザーアカウント」→「ユーザーアカウント」→「環境変数の変更」と進みます。
③「新規作成」を押して、ANDROID_HOMEの環境変数を以下のように追加します。
変数値はSDKフォルダのパスにします。
エキスプローラーのアドレスバーに%LOCALAPPDATA%\Android\Sdkと入力すると、SDKフォルダのパスまで移動します。
④PowerShellを起動し、Get-ChildItem -Path Env:\を実行して、「ANDROID_HOME」が追加されてることを確認します。
以上でANDROID_HOMEの環境変数の設定は完了です。
次に、platform-toolsのパス変数を追加します。
① コントロールパネルを開き、「ユーザーアカウント」→「ユーザーアカウント」→「環境変数の変更」と進みます。
② 「Path」を選択し、「編集」→「新規登録」と進みます。
③ platform-toolsのパスを以下のように追加します。
エキスプローラーのアドレスバーに%LOCALAPPDATA%\Android\Sdk\platform-toolsと入力すると、platform-toolsのパスまで移動します。
そこのパスを追加しましょう。
これで環境変数の設定は完了です。
プロジェクト作成と起動確認
React Nativeのプロジェクトを作成して、起動してみましょう。
プロジェクトの作成
PowerShell、またはコマンドプロンプトを管理者で実行して、プロジェクトを作成したいパスまで移動しましょう。
※cd [フォルダのパス]で移動することができます。
以下のコードを実行して、プロジェクトを作成します。
npx react-native init [プロジェクト名]「Run instruction」が表示されたら作成完了です。
仮想デバイスの起動
Android Studioのホーム画面右下の「Configure」から、「AVD Manager」を選択します。
すでにデバイスを作成済みの場合は、Playボタンを押して、デバイスを起動します。
まだデバイスを作っていない場合は「Create Virtual Device」を選択し、新しいデバイスを作成します。
デバイスの種類をお好みで選択し、次の画面で「Api Level」の29をダウンロードします。
ダウンロードが完了したら、そのまま進み、作成来たら、Playボタンを押して起動します。
これで、プロジェクトを実行するためのデバイスの準備は完了です。
プロジェクトの実行
まず、Metroを起動します。
PowerShell、またはコマンドプロンプトで、作成したプロジェクトのフォルダ内まで移動しましょう。
そして、以下のコードを実行します。
npx react-native startプロジェクトの実行中はMetroを起動したままにする必要があります。実行しているウィンドウを閉じないように気を付けましょう。
次に、プロジェクトを起動します。
新しくPowerShell、またはコマンドプロンプトを開き、作成したプロジェクトのフォルダ内まで移動しましょう。
以下のコードを実行し、プロジェクトを起動します。
npx react-native run-android以下のような画面が仮想デバイス上に表示されたら、起動成功です。
＜スポンサーリンク＞
まとめ
以上がWindowsでのReact Nativeの環境構築の手順になります。
新しいバージョンがリリースされていたら、少し手順が変わる可能性があります。随時、公式ドキュメントを確認してみてください。
この記事の環境構築を参考にして、ぜひReact Nativeでのアプリ作成に挑戦してみてください！
[…] React NativeをWindowsでの環境構築の手順は、React Nativeの環境構築の手順【Windows版】に日本語でまとめてあるので、こちらも参考にしてみてください。 […]