ウィンドウ(Windows)にreact nativeの開発環境を構築する方法

2019-10-03

react-nativeでアプリを開発するためウィンドウ(Windows)に開発環境を構築して見て、react-nativeのプロジェクトがうまく起動できるか確認して見ます。

概要

react-nativeでアプリを開発するため、ウィンドウ(Windows)に開発環境を設定する方法について説明します。ウマック(Mac)に開発環境を設定する方法については下記のブログを参考してください。

ウィンドウ(Windows)でreact-nativeアプリを開発する方法はExpo CLIReact Native CLIがあります。

Expo CLIはreact-nativeでアプリを開発する時よく使うネイティブ機能(位置情報、カメラなど)をパッケージで提供してます。初めてreact-nativeで開発する時は楽かもしれないですが、使ってないネイティブ機能のモジュールのせいでファイルサイズが大きくなる問題とExpoが提供してないネイティブ機能を入れる時不便さなのがあって、このブログではExpoを使うことはお勧めしません。

このブログポストではReact Native CLIを使ってアプリを開発するため開発環境を設定する方法を説明します。また、インストールしたReact Native CLIを使ってプロジェクトを生成して見て、うまく起動するかも確認して見ます。

react-nativeでアプリを開発するためにはnodejs, Watchman, Xcodeなどをインストールする必要があります。各段階を一つ一つ詳しく見て見ます。

Chocolateyインストール

Chocolateyはウィンドウ(Windows)に必要なパッケージをインストールや管理をする時使うパッケージ管理者です。Chocolateyを使うとウィンドウ(Windows)に簡単に必要なパッケージをインストールすることが出来ます。

Chocolateyをインストールするため、コマンドプロンプト(cmd)を管理者権限で実行して、下記のコマンドを実行します。

@"%SystemRoot%\System32\WindowsPowerShell\v1.0\powershell.exe" -NoProfile -InputFormat None -ExecutionPolicy Bypass -Command "iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))" && SET "PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin"

インストールが終わったら、コマンドプロンプト(cmd)を再起動して、下記のコマンドを実行してインストールがうまく出来たか確認します。

choco –version

インストールがうまく出来たら、下記のようにChocolateyのバージョンの確認が出来ます。

0.10.15

Nodejsインストール

react-nativeはJavascriptなのでJavascriptのRuntimeであるNodejsが必要です。

コマンドプロンプト(cmd)を管理者権限で実行して、下記のChocolateyのコマンドを使ってNodejsをインストールします。

choco install -y nodejs.install

インストールが終わったら、コマンドプロンプト(cmd)を再起動して、下記のコマンドでNodejsが正しくインストールされたか確認します。

node -–version

Nodejsが正しくインストールされたら、下記のようにNodejsのバージョンが確認出来ます。

v12.6.0

Nodejsをインストールすると、基本的Nodejsのパッケージマネージャーであるnpm(Node Package Manater)も一緒にインストールされます。npmもインストールされたか確認するため下記のコマンドを実行して見ます。

npm --versrion

npmも問題なくインストールされたら、下記のようにnpmのバージョンが確認できます。

6.9.0

Pythonインストール

React NativeのビルドシステムはPythonを使ってます。マック(Mac)は基本的Pythonがインストールされてるので、Pythonをインストールする必要がないですが、ウィンドウ(Windows)はPythonをインストールする必要があります。

コマンドプロンプト(cmd)を管理者権限で実行して、下記のChocolateyコマンドを実行してPythonをインストールします。

choco install -y python2

インストールが終わったら、Pythonを使うためにはパソコンを再起動する必要があります。パソコンを再起動したら、コマンドプロンプト(cmd)で下記のコマンドを実行してPythonが問題なくインストールされたか確認します。

python --version

Pythonがうまくインストールされたら、下記のようにPythonのバージョンが確認出来ます。

2.7.16

React Native CLIインストール

react-nativeでアプリを開発するため必要なReact Native CLIをインストールして見ましょう。下記のnpmのコマンドを使ってReact Native CLIをインストールします。

npm install -g react-native-cli

インストールが終わったら、下記のコマンドを実行してReact Native CLIがうまくインストールされたか確認します。

react-native --version

問題なくインストールしたら、下記のようにReact Native CLIのバージョンが確認できます。

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

JDKインストール

react-nativeでアンドロイドアプリを開発するためにはJDK(Java Development Kit)をインストールする必要があります。コマンドプロンプト(cmd)を管理者権限で実行して、下記のChocolateyコマンドを実行してJDKをインストールします。

choco install -y jdk8

インストールが終わったら、コマンドプロンプト(cmd)を再起動して、下記のコマンドでJavaがインストールされたか確認します。

java -version

JDKでJavaがインストールされたら、下記のようにJavaのバージョンが確認できます。

openjdk version "1.8.0_222"
OpenJDK Runtime Environment (AdoptOpenJDK)(build 1.8.0_222-b10)
OpenJDK 64-Bit Server VM (AdoptOpenJDK)(build 25.222-b10, mixed mode)

JDKをインストールするとJavaのコンパイラーもインストールされます。下記のコマンドでJavaのコンパイラーもインストールされたか確認します。

javac -version

JDKのインストールでJavaのコンパイラーもインストールされたら、下記のようにJavaのコンパイラーのバージョンが確認されます。

javac 1.8.0_222

アンドロイドスタジオインストール

react-nativeでアンドロイドアプリを開発するため、アンドロイドスタジオをインストールする必要があります。下記のリンクを押してアンドロイドスタジオのサイトに移動して、インストールファイルをダウンロードします。

ダウンロードが終わったら、インストールファイルを実行してアンドロイドスタジオのインストールを進めます。

アンドロイドスタジオ設定

アンドロイドスタジオを実行したら下記のような画面が確認できます。

react-native開発環境設定 - アンドロイドスタジオインストール

Nextボタンを押して次の画面に移動します。次の画面に移動したら下記のようにChoose Components画面が表示します。Android Virtual Deviceを選択してNextボタンを押して次の画面に移動します。

react-native開発環境設定 - アンドロイドスタジオコンポーネント設定

次の画面に移動したら、下記のようにアンドロイドスタジオのインストールパスを設定する画面が出ます。日本語のフォルダ名が入らないように注意してインストールパスを設定します。インストールパスに特に問題ない時はNextボタンを押して次の画面に移動します。

react-native開発環境設定 - アンドロイドスタジオインストールパス設定

次の画面に移動したら、下記のようにスタートメニューを設定する画面が出ます。特に修正することなく、Installボタンを押してインストールを進めます。

react-native開発環境設定 - アンドロイドスタジオスタートメニュー設定

インストールが終わったら、下記のような画面が見えます。Nextボタンを押してインストールを完了します。

react-native開発環境設定 - アンドロイドスタジオインストール完了

Nextボタンを押してインストールを完了させたら、下記のような画面が出ます。Start Android Studioがチェックされた状態でFinishボタンを押してアンドロイドスタジオのインストールを完了します。

react-native開発環境設定 - アンドロイドスタジオインストールや設定完了

Finishボタンを押してアンドロイドスタジオのインストールを完了したら、下記のようにアンドロイドスタジオが実行されます。Do not import settingsを選択して、OKボタンを押してアンドロイドスタジオを実行します。

react-native開発環境設定 - アンドロイドスタジオ実行

OKボタンを押してアンドロイドスタジオを実行したら、下記のようにアンドロイドスタジオ設定ウィザードの画面が出ます。Nextボタンを押して次の画面に移動します。

react-native開発環境設定 - アンドロイドスタジオ設定ウィザード

次の画面に移動したら下記のようにInstall Typeを設定する画面が出ます。Customを洗濯してNextボタンを押して次の画面に移動します。

react-native開発環境設定 - アンドロイドスタジオInstall Type設定

次の画面に移動したら、下記のようにSelect UI Theme画面が出ます。自分が好きなテーマを選択してNextボタンを押して次に進めます。

react-native開発環境設定 - アンドロイドスタジオテーマ設定

次の画面に移動したら、下記のようにSDK Components Setup画面が出ます。Performance (Intel ® HAXM)Android Virtual Deviceを選択してNextボタンを押してインストールを進めます。

react-native開発環境設定 - アンドロイドスタジオsdk設定

次に移動したら下記のようにEmulator Settings画面が出ます。特に修正することなく、Nextボタンを押して次の画面に移動します。

react-native開発環境設定 - アンドロイドスタジオエミュレーター設定

次の画面からは一般的なプログラムをインストールする方法と同じなので説明を省略します。Finishボタンを押して進めるとアンドロイドスタジオの設定が終わります。

アンドロイドスタジオのインストールが終わったら下記のようにアンドロイドスタジオが実行されることが確認できます。

react-native開発環境設定 - アンドロイドスタジオ実行

アンドロイドスタジオSDK設定

右下のConfigure > SDK Mangerを選択してアンドロイドSDK設定画面に移動します。

react-native開発環境設定 - アンドロイドスタジオSDK設定

上のような画面が見えたら、右下のShow Pacakge Detailsを選択します。そしてリストで下記の内容を探して選択します。

  • Android SDK Platform 28
  • Intel x86 Atom System Image
  • Google APIs Intel x86 Atom System Image
  • Google APIs Intel x86 Atom_64 System Image

全て選択したら右下のOKボタンを押して選択した内容をインストールします。

アンドロイドスタジオ環境変数設定

これでアンドロイドスタジオのインストールや設定は終わりました。次はアンドロイドスタジオを環境変数に登録します。マイコンピュータ>右クリック>プロパティメニューを選択してプロパティメニューを移動します。

プロパティメニューを選択すると、下記のようにシステム設定画面が表示されます。左にあるシステムの詳細設定メニューを押します。

react-native開発環境設定 - アンドロイドスタジオ環境変数設定:システム設定

システムの詳細設定メニューを押すと、下記のようにシステムのプロパティ画面が確認出来ます。上部にある詳細設定を押して、詳細設定タブの下にある環境変数ボタンを押します。

react-native開発環境設定 - アンドロイドスタジオ環境変数設定:システムの詳細設定ダイアログ

環境変数ボタンを選択したら下記のように環境変数を設定する画面が確認出来ます。上部にあるユーザー環境変数の新規ボタンを押します。

react-native開発環境設定 - アンドロイドスタジオ環境変数設定:環境変数新規登録

上のように新し環境追加画面が出たら変数名にはANDROID_HOMEを入力して、変数値には自分のアンドロイドスタジオのSDKのパスを入力します。自分のアンドロイドスタジオのSDKのパスが分からない場合、下記のようにアンドロイドスタジオSDK設定画面に移動します。アンドロイドスタジオSDK設定画面の一番上にあるAndroid SDK Locationの項目で自分のアンドロイドSDKのパスを確認することが出来ます。

react-native開発環境設定 - アンドロイドスタジオSDK設定

ANDROID_HOME環境変数を追加したら、アンドロイドスタジオのplatform-toolsを設定する必要があります。ユーザー環境変数リストでPathを選択して環境変数を編集する画面に移動します。

react-native開発環境設定 - アンドロイドスタジオ環境変数設定:platform-tools追加

上のように編集画面が見えたら、リストの一番下にC:\Users\[ユーザー名]\AppData\Local\Android\Sdk\platform-tools見たいにSDKがインストールされたフォルダ下にあるplatform-toolsフォルダを入力して確認ボタンを押して環境変数を編集します。

このように全ての修正が終わったら、コマンドプロンプト(cmd)を実行して下記のコマンドを実行します。

adb

環境変数設定がうまく出来たら、下記のような結果を見ることが出来ます。

Android Debug Bridge version 1.0.41
Version 29.0.1-5644136
Installed as /Users/jeonghean_kim/Library/Android/sdk/platform-tools/adb

react-nativeプロジェクト生成や確認

react-nativeはバージョンにによって、うまく起動出来たアプリが急に起動出来なくなったり、ビルドする時エラーが出たりしたりなど、色んな問題が発生する可能性が高いです。したがって、react-nativeでアプリを開発する時は、下記のようにnpmコマンドでバージョンを固定して使うことをお勧めします。

npm config set save-exact=true

次は下記のReact Native CLIコマンドでreact-nativeプロジェクトを生成します。

react-native init SampleApp

iOSで確認

生成が完了されたら、下記のコマンドでreact-nativeアプリをiOSで起動させて見ます。

cd SampleApp
react-native run-ios

うまく実行出来ない場合、ios/SampleApp.xcworkspaceファイルを実行して左上のシミュレータを設定するメニューでシミュレータを設定して矢印ボタンを押してシミュレータを実行します。

うまく実行されたら、下記のような画面が見えます。

react-nativeの開発環境設定 - iOSで実行

完了

これでウィンドウ(Windows)でreact-nativeでアプリを開発するため開発環境を設定する方法を見て見ました。また、開発環境の設定がうまく出来たか確認するため、React Native CLIを使ってアプリを生成して実行して見ました。

react-nativeでアプリを開発する準備が終わりました。react-nativeでアプリを開発する世界にどっぷり浸かってみましょう!

Buy me a coffeeBuy me a coffee
Posts