React Nativeの始め方
React Nativeの環境構築
前回の記事で少しでも興味を湧いた人や、開発してみたいって思ってくれた人のためにReact Nativeでの開発環境などを紹介します。
※私はmacユーザーなので、ここではmacOSの説明のみです。
また、時間があればWindowsの記事も書こうと思います。
インストールしてみよう
ReactNativeでは以下の手順が必要です。
- Node
- Watchman
- React Nativeコマンドラインツール
- Android Studio
- Xcode
- Welcome to React Native !!!
では上記ツールをインストールしていきましょう!
1.Nodeのインストール
公式ではHomebrewを使用してNodeをインストールすることをおすすめしています。
Homebrewをインストールしてない人は上記公式HPからインストールしてください。
では、Homebrewがある人は下記コマンドでNodeをいれましょう!
brew install node
※すでにNodeをインストールしている人はバージョンが4以上であること確認してください。
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でしかしたくないっと思ってる信者さんは必須ではありません。
基本的に公式は日本語化されているので、細かい説明は省略しますがカスタムインストールをおこなってください。
セットアップウィザードが起動したらカスタムインストールを選択肢し次のツールをインストールしてください。
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のインストール
App Storeからインストールするか、上記ディベロッパサイトのダウンロードからインストールしてください。
すでにXcodeをインストールしている場合はXcodeのバージョンが8以上であることを確認しておいてください。
Welcome to React Native !!
ここまできたらもう何も心配はいりません。
早速、React Nativeを始めて見ましょう。
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios
最後には勝手にiOSのシュミレーターが起動して下記が表示されると思います。
Androidではエミュレータなどの実行準備をし、下記コマンドをプロジェクト配下で実行させます。
react-native run-android
実行するとiOSと同じような画面が表示されます。
まとめ
かなり長くなりましたが、これで環境構築は終了です。
Android Studioあたりがかなりめんどくさいですが、まあ頑張ってください。
最近になってこういう開発にはMacが強いなと感じました。