Windows+WSLでReact-Native(create-react-native-app)環境を作る

## はじめに
フロントエンドペーペーがフロントエンド方面に技術を伸ばそうと、今話題(乗り遅れてる？)React-Nativeの開発環境の作成を行ってみました[^1]。
異常にてこずったため、備忘も兼ねて共有したいと思います[^2]。

今回作成した環境は以下の環境です。

* WSL側のNode/npmを使って開発
    * `create-react-native-app`を使ってアプリ雛形を作成
* Windows10側のエミュレータで表示
    * Genymotionを使ってエミュレータ上で表示

注意：
2018/6/21現在の情報です。情報は古くなるため、遠い未来の方はご参考までに。

### 想定読者

* WSL上でReact-Native開発環境を作りたい
* AndroidのエミュレータはWindows10側のVirtualBoxで妥協できる[^3]

## 構築環境

構築する環境は下記です。  
Windows10側と記載がある方は、Windows版のソフトウェアを使用し、WSL側と記載がある方は、Ubuntu版のソフトウェアを使用しています。

* Windows10側
    * VirtualBox
    * Genymotion (VirtualBox上にAndroidのVMエミュレータ環境を作るソフト)
* WSL(Ubuntu 16.04)側
    * Oracle JDK 1.8.0.172　←Oracle重要
    * Node v8.11.3
    * npm 6.1.0

詳しくないためNode/npmのバージョンに関してはこれ以外でも良いかもしれません。

### Windows10側

Windows10側は特に難しくないのでざっくり。
以下を行います。

* VirtualBoxのインストール
    * ダウンロードサイトは[こちら](http://www.oracle.com/technetwork/server-storage/virtualbox/downloads/index.html?ssSourceSiteId=otnjp)
    * 普通にダウンロードしてインストールすればokです
* Genymotionのインストール
    * ダウンロードサイトは[こちら](https://www.genymotion.com/fun-zone/)
    * ユーザアカウントを作成する必要があります
    * インストール後は、環境変数PATHにGenymotionへのパスを通す必要があります

パスを通した後、WSLで`adb`を実行し、こんな感じの表示が出たらokです。
![Untitled.png](https://qiita-image-store.s3.amazonaws.com/0/172007/70397aff-d417-bea3-76ab-854ef844d1a3.png)

### WSL側

#### 1. Oracle JDK 8のインストール

!超重要!
create-react-native-app(react-nativeの雛形を作るコマンドアプリ)で、JDKを使用しますが、Oracleの8系が必要です。  
Oracleの9系以降でも、OpenJDK 8系でもダメでした。[^4]

* JDKのインストール
    * [ここから](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)LinuxのJDK 8(jdk-8u172-linux-x64.tar.gz)をダウンロード
    * ダウンロードしたtar.gzを任意の場所に展開します(私は/usr/lib/jvm/に展開しました)
    * `update-alternatives`を使い、JDKのバージョン管理を以下の様にしました  
(`update-alternatives`については[ここや](https://qiita.com/hidekuro/items/f931ae527244bce34698)、[ここ](
http://graziegrazie.hatenablog.com/entry/2015/11/14/101050)が分かり易いかもです)

    ```
    sudo update-alternatives  --install "/usr/bin/java" "java" "/usr/lib/jvm/jdk-1.8.0_172/bin/java" 1
    sudo update-alternatives  --install "/usr/bin/javac" "javac" "/usr/lib/jvm/jdk-1.8.0_172/bin/javac" 1
    sudo update-alternatives  --install "/usr/bin/javaws" "javaws" "/usr/lib/jvm/jdk-1.8.0_172/bin/javaws" 1
    sudo update-alternatives --set java /usr/lib/jvm/jdk-1.8.0_172/bin/java

    java -version # 以下が表示されればok
    # java version "1.8.0_172"
    # Java(TM) SE Runtime Environment (build 1.8.0_172-b11)
    # Java HotSpot(TM) 64-Bit Server VM (build 25.172-b11, mixed mode)
    ```

#### 2. Nodeのインストール
Nodeのインストール方法はどのような手段でも良いと思います。
私の場合はndenv(anyenv)を使って以下の様にしました。

```
ndenv install v8.11.3
ndenv rehash
ndenv global v8.11.3
node -v  # v8.11.3が出力されればok
```

#### 3. npmのインストール

NodeをインストールするとNodeのバージョンに対応するバージョンのnpmがインストールされます。
後述する`create-react-native-app`で、npmの6系を要求されたので、以下の様にしました。

```
npm -v  # バージョンを確認し、6系でなければ以下実行
npm -g install npm@6
npm -v # 6.1.0が表示されればok
```

### 4. create-react-native-appのインストール

以下コマンドで`create-react-native-app`をインストールします。

```
npm -g install create-react-native-app
ndenv rehash
create-react-native-app --version # create-react-native-appのバージョンが表示されればok
```

## サンプル実行

以下手順で表示できる事を確認します。

1. Windows側でGenymotionを起動します
    * インストール時に変更していなければデスクトップにGenymotionの起動リンクがあるはずです
    * ログインしていなければログインしておきます
    * Androidエミュレータを追加していなれば適当なエミュレータを追加します
    * Google Nexus 5X - 7.1.0 - API 25 は動作することを確認しました
    * エミュレータによって起動できない場合もある様です
2. Genymotionで適当なエミュレータを起動します
1. WSL側でreact-nativeの雛形を作成、実行します

    ```
    create-react-native-app test # testというフォルダが作成されます
    cd test
    npm run android
    ```
実行した結果、こんな感じに表示されます。
左側がAndroidエミュレータ、右側がWSLのウィンドウになります。
![Capture2.PNG](https://qiita-image-store.s3.amazonaws.com/0/172007/b1ab4fff-f92d-723d-dffb-0c867e733450.png)

## 最後に

以上の手順で2018年6月現在では動作することを確認できました。
ただし、以下点より影響範囲が不明になりがちなので、WSLで、とかこだわりは捨てた方が良いかなーと思いました。
きっと無駄な時間を使わず幸せになれると思います(明日使えない無駄な知識はつくかもですが)。

* WSL上であること
    * そもそも純粋なLinuxとは異なる部分がある
* React-Nativeのメジャーバージョンが未だ1になっていないこと
    * なんか動いたり動かなかったり
* ツールの相性などで実行できないことがあること[^5]
    * JDKとか
    * npmのバージョンとか
    * Androidエミュレータのバージョンとか

---

[^1]: [こんな](https://qiita.com/janus_wel/items/f3640c7d7ca4c4fc388a)記事もあるのでだいぶ乗り遅れた感ある。ある意味今話題。
[^2]: Windows上のみならそこまで大変じゃないと思います
[^3]: 開発環境はWSL上に纏めたかったが最終的に力尽き妥協。WSL上のエミュレータでできるかの確認はしてません。確認はもうつかれたよﾊﾟﾄr(ry
[^4]: 正確にはOracle9系では確認していません。10系ではダメな事は確認しました。Gradle？のバージョンチェック？でダメっぽいのでなんとかなりそうな感もあるが知識不足で断念。
[^5]: 私の調査不足だと思いますが、バージョンに関する記載とか見つかんなかったです。JDKとか特に。