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

はじめに

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

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

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

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

想定読者

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

構築環境

構築する環境は下記です。

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のインストール
- ダウンロードサイトはこちら
- 普通にダウンロードしてインストールすればokです
Genymotionのインストール
- ダウンロードサイトはこちら
- ユーザアカウントを作成する必要があります
- インストール後は、環境変数PATHにGenymotionへのパスを通す必要があります

パスを通した後、WSLでadbを実行し、こんな感じの表示が出たらokです。

WSL側

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

!超重要!
create-react-native-app(react-nativeの雛形を作るコマンドアプリ)で、JDKを使用しますが、Oracleの8系が必要です。

Oracleの9系以降でも、OpenJDK 8系でもダメでした。⁴

JDKのインストール

ここからLinuxのJDK 8(jdk-8u172-linux-x64.tar.gz)をダウンロード
ダウンロードしたtar.gzを任意の場所に展開します(私は/usr/lib/jvm/に展開しました)
update-alternativesを使い、JDKのバージョン管理を以下の様にしました
(update-alternativesについてはここや、ここが分かり易いかもです)

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

サンプル実行

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

Windows側でGenymotionを起動します
- インストール時に変更していなければデスクトップにGenymotionの起動リンクがあるはずです
- ログインしていなければログインしておきます
- Androidエミュレータを追加していなれば適当なエミュレータを追加します
- Google Nexus 5X - 7.1.0 - API 25 は動作することを確認しました
- エミュレータによって起動できない場合もある様です
Genymotionで適当なエミュレータを起動します
WSL側でreact-nativeの雛形を作成、実行します
```
create-react-native-app test # testというフォルダが作成されます
cd test
npm run android
```
実行した結果、こんな感じに表示されます。
左側がAndroidエミュレータ、右側がWSLのウィンドウになります。

最後に

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

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

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