1. kik4

    Posted

    kik4
Changes in title
+WindowsにReact Native開発環境をインストール
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,119 @@
+# はじめに
+JavaScriptとReactを使ってモバイルアプリを開発できる**React Native**の開発環境をWindowsに一からインストールします。WindowsなのでAndroidアプリの開発環境です。インストール手順は[React Nativeの公式](https://facebook.github.io/react-native/docs/getting-started.html)にあるのでそれに従えばいいんですが、いくつか詰まったので通しで方法を残しておきます。
+インストールするのはNode.js、React Native、それにAndroid Studioです。(記事現在のReact Nativeのバージョンは0.39)
+
+# Node
+Node.jsとPython2をインストールします。パッケージ管理ソフトのChocolateyを経由してインストールするのが推奨ということなので手順に従います。
+
+## Chocolatey
+[公式のインストール手順](https://chocolatey.org/install)。メニューからPowerShellを**管理者権限**で起動。PowerShellのバージョンを調べて、
+
+```powershell:powershell
+$PSVersionTable
+```
+
+3以上だったので三番目のコードを使用します。が、その前に実行ポリシーをRemoteSignedまで上げる必要があります。
+現在の実行ポリシーはこれで表示。
+
+```powershell:powershell
+Get-ExecutionPolicy
+```
+
+デフォルトはRestrictedだったので上げます。
+
+```powershell:powershell
+Set-ExecutionPolicy -ExecutionPolicy RemoteSigned
+```
+
+これでインストール。
+
+```powershell:powershell
+iwr https://chocolatey.org/install.ps1 -UseBasicParsing | iex
+```
+
+実行ポリシーを戻したいときはこれで。
+
+```powershell:powershell
+Set-ExecutionPolicy -ExecutionPolicy Restricted
+```
+
+## Node.jsとpython2
+Chocolateyでインストールします。コマンドラインなりPowerShellなりで次のコマンドを一行ずつ実行。
+
+```cmd:cmd
+choco install nodejs.install
+choco install python2
+```
+
+# The React Native CLI
+Node.jsに付いてくるパッケージ管理ソフトnpmで、React Nativeのコマンドラインインタフェースをインストールします。子マインドラインで次を実行。
+
+```cmd:cmd
+npm install -g react-native-cli
+```
+
+# Android開発環境
+Androidの開発環境をインストールします。
+
+## 1. Android Studioのインストール
+[Android Studioの公式](https://developer.android.com/studio/index.html)からダウンロードしてきてインストーラーに従ってインストール。Android SDKとAVD(Android Virtual Device)にチェックが入っているのを確認。
+
+### JDKも忘れずに
+React Nativeの方には書いてありませんがコンパイルを通すためにJavaのDevelopment Kitも必要です。[公式](http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html)からJDK8をインストール。
+
+## 2. AVDとHAXMのインストール
+
+Android Studioの初回起動時にいろいろ出てくるので適当に(I do not have...を選んでOkしたり)。Customを選んで次にチェックが入っていればOKです。そもそもチェック外せなかったりinstalledとか出ていたりするかもしれません。
+
+- Android SDK
+- Android SDK Platform
+- Performance (Intel HAXM)
+- Android Virtual Device
+
+HAXMについて何やら出てくるので画面に従って入れます。
+この画面、初回しか出ません。二回目以降でHAXM入れたいなら[ここから](https://software.intel.com/en-us/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows)。
+
+## 3. Android 6.0 (Marshmallow) SDKのインストール
+React Nativeに必要なSDKはバージョンが決まっていてAndroid 6.0 (Marshmallow)です。改めてこれをインストールします。
+(ちなみにSDKは6.0ですがAndroidの動作する最低バージョンは4.1です。[readme参照](https://github.com/facebook/react-native))
+
+1. Android Studioを起動してWelcome画面の右下、ConfigureからSDK Managerを開きます。
+2. 上のSDK Platformsタブが選ばれているのを確認
+3. Android 6.0 (Marshmallow)をチェック
+4. 右下のShow Package Detailをチェック
+5. Android 6.0 (Marshmallow)から次の項目を追加でチェック(全部で6項目にチェックが入る)
+ - Google APIs
+ - Intel x86 Atom System Image
+ - Intel x86 Atom_64 System Image
+ - Google APIs Intel x86 Atom_64 System Image
+6. 上のSDK Toolsタブを選択
+7. 右下のShow Package Detailをチェック
+8. Android SDK Build-Toolsの23.0.1にチェック
+9. 右下のApply
+
+## 4. 環境変数にANDROID_HOMEを設定
+React Nativeに必要なパスを通します。コントロールパネルのシステムの詳細設定->環境変数->ユーザー環境変数にANDROID_HOMEを新規追加します。
+パスは3.の画面の上の方のテキストボックスに入っているのと同じものです。大体次の通り。
+
+```
+C:\Users\(ユーザー名)\AppData\Local\Android\sdk
+```
+
+# Android Virtual Deviceのスタート
+Android Studio内にあるエミュレータを起動します。ここは他の詳しい記事に任せます。
+
+# React Nativeアプリのインストールテスト
+プロジェクトを作りたい場所でコマンドプロンプトを開きます。作成するプロジェクト名をAwesomeProjectとして、
+
+```cmd:cmd
+react-native init AwesomeProject
+cd AwesomeProject
+```
+
+エミュレータが起動しているのを確認して次のコマンド。
+
+```cmd:cmd
+react-native run-android
+```
+
+ちょこちょこ文字化けしますが気にせずに、エミュレータ内にアプリが起動したら完了です。