ReactNativeアプリ開発環境を構築する

# 概要
windowsでのReactNativeアプリ開発環境(仮想デバイス)を構築する

# 目次
[1. Chocolateyのインストール](#1-chocolateyのインストール)
[2. Node、Python2、JDKをインストール](#2-nodepython2jdkをインストール)
[3. Android Studioをインストール](#3-android-studioをインストール)
[4. 環境変数の設定](#4-環境変数の設定)
[5. プロジェクトの作成](#5-プロジェクトの作成)
[6. 仮想デバイスの作成](#6-仮想デバイスの作成)
[7. プロジェクトの起動](#7-プロジェクトの起動)

# 1. Chocolateyのインストール
ReactNativeの開発環境構築に必要なパッケージをインストールするために、まずChocolateyをインストール
コマンドプロンプトを管理者権限で開き、下記コマンドを実行
```
$ 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'))
```

# 2. Node、Python2、JDKをインストール
再度コマンドプロンプトを管理者権限で開き、下記コマンドを実行
```
$ choco install -y nodejs.install python2 openjdk11
```

下記コマンド実行、正常にインストールされたかどうかを確認する
※インストールされたバージョンが表示される
```
$ node -v
$ python --version
$ java -version
$ javac -version
```

# 3. Android Studioをインストール
Android Studioのインストーラーを公式からダンロード
[Android Studio公式](https://developer.android.com/studio "Android Studio")

インストーラーを起動してAndroid Studioをインストールする
※「choose component」の画面で「Android Virtual Device」にチェックが入ってるのを確認する事


初回起動時に各種設定画面が表示されるので
「Install Type」の画面で「Custom」を選択
![androidaudio01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749195/f706e818-dcd6-952e-9853-e40b2acfbef2.jpeg)

「SDK Components Setup」の画面で「Android SDK Platform」と「Android Virtual Device」の項目にチェック
![androidaudio02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749195/1d5406a9-c1c3-2739-bdca-b708deef6adb.jpeg)


Android SDKをインストールする
Android Studioのホーム画面の「Configure」から「SDK Manager」を選択
SDK Toolsのタブを選択、画面右下の「Show Package Details」にチェックを入れ、「29.0.2」にチェックを入れる
右下の「Apply」ボタンを押してインストールを実行する
![androidsdk01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749195/c1ba3d05-1087-9ef0-d879-70177cb9e33c.jpeg)


# 4. 環境変数の設定
設定>詳細情報>システムの詳細設定>環境変数
![kankyou01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749195/5352695d-8d31-55fe-6cb2-fd1414ad55fa.jpeg)


ユーザー環境変数の「新規」をクリックしてANDROID_HOMEを追加する
※変数値はSDKのフォルダを指定
![kankyou02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749195/3a85b1ed-6a55-cfeb-6528-71130ae9c657.jpeg)


# 5. プロジェクトの作成
コマンドプロンプトを管理者権限で開き、プロジェクトを作成したいパスまで移動して下記コマンドを実行
```
$ npx react-native init [プロジェクト名]
```
「Run instruction」が表示されたら作成完了
cli.init is not a functionのエラーが出る場合はバージョンを指定して実行する
```
$ npx react-native init [プロジェクト名] --version 0.68.2
```

# 6. 仮想デバイスの作成
Android Studioのホーム画面より「Virtual Device Manager」を実行
「create Device」をクリックして作成したいデバイスを選択、「Clone Device」で仮想デバイスを作成する
![device01.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749195/3659fc5e-0d3b-e8c9-fc13-9aec42ebfbb7.jpeg)


![device02.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749195/c3535d59-057d-1855-142d-2e31cbff4314.jpeg)



# 7. プロジェクトの起動
コマンドプロンプトを管理者権限で開き、作成したプロジェクトフォルダまで移動して下記コマンドを実行
※プロジェクトの実行中はこのウィンドウを開いたままにする事
```
$ npx react-native start
```

新しくコマンドプロンプトを管理者権限で開き、作成したプロジェクトフォルダまで移動して下記コマンドを実行
```
$ npx react-native run-android
```

仮想デバイスが起動する
![device04.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2749195/667e749e-9c21-8388-79ea-697c0cd3b35b.jpeg)