【React Native】Expoのローカル開発環境を構築する | プログラマーになった「中卒」男のブログ

React Nativeの開発ツールとして「Expo」という便利なものがある。

コンテンツ

Expoとは

従来、React Nativeで開発を行うには、XCodeとAndroid Studioをインストールして、iOS・Androidとそれぞれの開発環境を構築する必要があった。

しかしExpoの場合、専用のExpoモバイルアプリを検証用の端末にインストールすれば、Expoを介して一つの開発環境で複数の端末で開発中のアプリを実行することができる。

Expoには「Expo Snack」というWebサービスも用意されており、これはブラウザ上でReact Nativeの開発を行うためのものだ。

簡単な無料会員登録を済ませるだけで、環境構築の必要なく、サクッとReact Nativeに触れることができるので、入門者はここから初めてみると良いだろう。

本格的な開発を行う場合はローカルに環境構築を行う必要がある。

また、検証用の端末で開発中のアプリを実行する場合、同じローカルネットワーク環境で実行しないといけないので注意が必要だ。

同じネットワーク上であれば、スマホ上のExpoアプリと、開発中のPCのExpoプロジェクトを接続することができる。

まずはExpoのコマンドラインツール「expo-cli」をnpmでインストールする。

npm install -g expo-cli

以下のコマンドでプロジェクトを作成する。

expo init myApp

すると、テンプレートの選択を求められるので、blank・tabsのいずれかより選ぶ。

blankはシンプルなデモ画面が1ページのみ表示されるアプリで、tabsは複数画面をタブで移動できるアプリとなっている。

いずれかを選択し、Enterキーを押すとプロジェクトが作成される。

プロジェクトのルートディレクトリへ移動し、expo startコマンドを実行すると、コマンドラインにQRコードが現れる。

cd myApp
expo start

スマホ側のExpoアプリでこのQRコードを読み込ませれば、デモ画面がスマホ上に表示されるはずだ。

なお先述のとおり、この時スマホとPCは同一ネットワーク上でなければならない。

スマホに表示されたExpoプロジェクトのアプリは、完全にPC側と同期されているため、PCでコードを書き換え保存すると即座に反映される。

Expoを利用することで、React Nativeでの開発がかなり効率化されるはずだ。