expo.ioを使ってリアルタイムにReact Nativeアプリを開発する

f:id:amagitakayosi:20170417212408j:plain

1年ぶり3度目のReact Native入門してるんだけど、expo.ioっていうサービスがメッチャ便利そうだったので紹介します。
何がどう便利かっていうと、

  • ケーブルなしで、実機の動作確認ができる
  • もちろんコード変更も即座に反映される
  • 開発版アプリの配布がワンタッチでできる
  • 便利なReactコンポーネントもついてくる

youtu.be

expo.io とは

React Nativeでのアプリ開発を支援するサービスです。
公式サイトはこちら。めっちゃ素朴……

expo.io

expoは create-react-native-app XDE expo client といったツールを公開しています。

  • create-react-native-app: アプリの雛形を作るCLIツール
  • XDE: アプリ開発を支援するデスクトップアプリ。実機のログをみたり、アプリを再起動したりできる
  • expo client: 開発中のアプリを実機にインストールするためのクライアント

今回はこれらを使ってReact Nativアプリケーションを開発する方法を紹介します。

事前準備

インストールするものは多いけど、設定はほぼ不要です!

開発フロー

基本的な開発の流れはこんな感じ。

  1. create-react-native-app でアプリの雛形を作成
  2. npm start して、実機で確認しつつ開発
  3. リリースビルドを作ってストアに公開

create-react-native-app

create-react-app みたいなやつです。
基本的な操作は create-react-app と同じ。
facebook公式みたいな名前なのはちょっと邪悪な感じする……;;)

$ create-react-native-app my-app とすると、 my-app ディレクトリにアプリの雛形が作成されます。
雛形はかなりシンプルになっており、 .xcodeproj ファイルすら存在しません。
expoでは、アプリケーションの配布・ビルドを独自のしくみで行なうため、これだけで充分なようです。

f:id:amagitakayosi:20170417222536p:plain

実機で確認しつつ開発

npm start すると、react-nativeのパッケージャーにより、JSのビルドが始まります。
同時に、ターミナルに巨大なQRコードが出現します。かっこいい。

f:id:amagitakayosi:20170417223418p:plain

手元のデバイスにインストールした expo client でこのQRコードを読み取ると、開発中のアプリケーションがexpo clientにインストールされます。
これによって、ケーブルなしでも実機で動作確認しつつ開発を進めることができます。

ReactでふつうにWeb開発してるような気分。

開発中のアプリを配布

XDE上にある「Publish」ボタンを押すと、開発中のアプリを配布するためのリンクが生成されます。
これにより、アプリを社内リリースしたり、友達にだけリリースしたりといったことができます。

f:id:amagitakayosi:20170417224311p:plain

ほぼ雛形の状態でPublishを押したのがこちら。
インストールにはexpo clientが必要です。

my-app — Expo

リリースビルド

Building Standalone Apps | Expo v15.0.0 documentation

expo clientなしで、普通にApp Storeから配布するためには、exp というツールでビルドする必要があります。
今回はリリースまでやってないけど、iOS版のリリースビルドを作成する手順はこんな感じみたいです。

  1. $ npm i -g exp && exp login
  2. exp.json を作成
  3. exp start
  4. 別のターミナルで exp build:ios を実行

便利コンポーネントがついてくる

create-react-native-app で作ったアプリには、最初から expo がインストールされている。
わかりやすいところだと、画像を選択するImagePickerや、地図を表示する MapViewOpenGLの描画を行なうGLViewなどがある。

感想

前回React Native入門した時は全然ビルドできなくてハマってたんだけど、今回はexpoのおかげでめっちゃ気軽に開発を開始できた。
FAQにも「いまのところ有料にする予定はない」って書いてあるし、良いんじゃないですかね。