React Nativeでは、1つのソースコードでAndroidとIPhoneの両方に対応したアプリを構築することが出来ます。
開発言語はJavaScriptです。Web開発向けのフレームワークであるReactに似ているので、Web開発者がスマートフォンアプリ開発に参入する際にも向いています。
本記事では入門編として、Windows 10端末に開発環境を整えていきます。
コードエディタはVisual Studio Codeです。
環境情報
今回対象とした環境は以下です。
- Windows 10 64bit Home Edition Build 1803
- Node.js 8.11.3
- React Native CLI 2.0.1
- Visual Studio Code 1.28.2
- React Native Tools 0.6.18
- Android Studio 3.2.1
構築手順
1．Node.jsのインストール
公式サイトからインストーラを入手してインストールします。
2．React Nativeのコマンドラインツールをインストール
コマンドプロンプトを立ち上げて以下のコマンドを流します。
ここまでの動作確認としてコマンドプロンプトでバージョン表示を行いました。
3．Visual Studio Codeのインストール
公式サイトからインストーラを入手してインストールします。
4．Visual Studio CodeにReact Native用の拡張機能をインストール
Visual Studio Codeを起動し、左側メニューの拡張機能で「react-native」を検索します。
すると「React Native Tools」が見つかるのでクリックしてインストールします。
5．Android Studioをインストール
AndroidのエミュレータとしてAndroid Studioをインストールします。
公式サイトからインストーラを入手してインストールします。
基本は次へ次へで大丈夫ですが、
Android Virtual Deviceがインストール対象として選択されていることを確認してください。
以下、画面数が多いので大事な設定だけ載せておきます。
さてこれでいいかと思いきや、Android Studioは既定で最新バージョンのAndroidしかエミュレートできるようになっていませんでした。（本稿執筆時点でAndroid 9.0 (Pie) でAPIレベルが29)
アプリ開発時に最新バージョンだけサポートってわけにはいかない時があるので、過去バージョンを追加しておきましょう。
Android Studioで、右下のConfigureからSDK Managerを起動します。
SDK PlatformsとSDK Toolsの両方で旧バージョンを追加します。
SDK Toolsでは右下のShow Package Detailsをチェックしないと過去バージョンを見せてくれないことにご注意ください。
6．環境変数の構成
Android Studioとjavaのコマンドラインツールに対するPATHを通しておきます。
Android StudioはAppDataに、JavaはAndroid Studioのインストールフォルダ（既定ではC:\Program Files\Android）に、それぞれ配置されています。
Android Studio コマンドラインツール
%appdata%\..\local\Android\Sdk\platform-tools
Java コマンドラインツール
C:\Program Files\Android\Android Studio\jre\bin
大変長くなりました。
HelloWorldプロジェクトの構築 兼 開発環境の動作確認は別記事に分けたいと思います。
以上、参考になれば幸いです。
