React Nativeの環境構築

前回の記事で少しでも興味を湧いた人や、開発してみたいって思ってくれた人のためにReact Nativeでの開発環境などを紹介します。

※私はmacユーザーなので、ここではmacOSの説明のみです。

また、時間があればWindowsの記事も書こうと思います。

インストールしてみよう

facebook.github.io

ReactNativeでは以下の手順が必要です。

Node
Watchman
React Nativeコマンドラインツール
Android Studio
Xcode
Welcome to React Native !!!

では上記ツールをインストールしていきましょう！

1.Nodeのインストール

公式ではHomebrewを使用してNodeをインストールすることをおすすめしています。

Homebrew — macOS 用パッケージマネージャー

Homebrewをインストールしてない人は上記公式HPからインストールしてください。

では、Homebrewがある人は下記コマンドでNodeをいれましょう！

brew install node

※すでにNodeをインストールしている人はバージョンが４以上であること確認してください。

2.Watchmanのインストール

WatchmanもNodeと同じようにbrewからインストールできます。

brew install watchman

Watchman | A file watching service - Watchman

Watchmanとは簡単に説明するとファイルを監視し変更された時のログを取るためのツールです。

これによりReact Nativeにおいて実行する際のビルド時間を大幅に短縮できます。

サクサク開発したい人はいれておきましょう！

3.React Nativeのコマンドラインツール

npm install -g react-native-cli

Nodeをインストールする際にnpmは付属してるのですぐにインストールできます。

これはReact Nativeプロジェクトの作成や実行時に使用するので必須です。

4.Android Studioのインストール

※iOSでしかしたくないっと思ってる信者さんは必須ではありません。

developer.android.com

基本的に公式は日本語化されているので、細かい説明は省略しますがカスタムインストールをおこなってください。

セットアップウィザードが起動したらカスタムインストールを選択肢し次のツールをインストールしてください。

Android SDK
Android SDK Platform
Performance (Intel ® HAXM)
Android Virtual Device

次へ次へを実行していくと「Androidスタジオへようこそ」が表示されます。

そこから、「設定」＞「SDKマネージャ」をクリックし、Android 6.0をインストールしましょう。

そこでは以下にチェックをいれてください。

Google APIs
Android SDK Platform 23
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

次に、[SDKツール]タブを選択して、[パッケージの詳細を表示]の横にあるチェックボックスをオンにします。「Android SDK Build Tools」の項目を探して展開し、Android SDK Build-Tools 23.0.1が選択されていることを確認します。

最後に、「適用」をクリックしてAndroid SDKおよび関連するビルドツールをダウンロードしてインストールします。

次にパスの設定を行います。

コマンドの設定ファイル(~/.profileなど)に以下を追記します。

export ANDROID_HOME=${HOME}/Library/Android/sdk
 export PATH=${PATH}:${ANDROID_HOME}/tools
 export PATH=${PATH}:${ANDROID_HOME}/platform-tools

追記して保存したあと、

source ~/.profile

をコマンドで実行します。

設定し終わったら適当なプロジェクトを作成してエミュレータを起動させましょう。

アプリをビルドして実行する | Android Studio

エミュレータの作成方法などはここに書いているので、端末やAndroid OSのバージョンはお好きなものを使用しておいてください。

※因みに、実機でデバックする場合はUSBでPCと繋いで置くだけでいいです。

Xcodeのインストール

Xcode - Apple Developer

Macのみでしか残念ながらインストールできません。

App Storeからインストールするか、上記ディベロッパサイトのダウンロードからインストールしてください。

すでにXcodeをインストールしている場合はXcodeのバージョンが８以上であることを確認しておいてください。

Welcome to React Native !!

ここまできたらもう何も心配はいりません。

早速、React Nativeを始めて見ましょう。

react-native init AwesomeProject
cd AwesomeProject
react-native run-ios

最後には勝手にiOSのシュミレーターが起動して下記が表示されると思います。

f:id:kokiKono:20170524221648p:plain

Androidではエミュレータなどの実行準備をし、下記コマンドをプロジェクト配下で実行させます。

react-native run-android

f:id:kokiKono:20170524225003p:plain

実行するとiOSと同じような画面が表示されます。

まとめ

かなり長くなりましたが、これで環境構築は終了です。

Android Studioあたりがかなりめんどくさいですが、まあ頑張ってください。

最近になってこういう開発にはMacが強いなと感じました。

kokiKono’s diary

React Nativeの始め方