近年、Webの技術を使ったクロスプラットフォームアプリ開発が普及し始めています。
その中で、JavaScriptを使ってスマホアプリを作成できるReact Nativeというものがあります。
React Nativeを手軽に使うことができるExpoを使って環境構築を行ってみた。
（Expoについて詳しくは後ほど紹介する）
私が環境構築を行ったとき、日本語の記事で古い情報しか見当たらなかったので、この記事に残すことにした。
この記事では、ExpoでReact Nativeのアプリを開発するための環境構築を行う手順を解説します。
解説ではターミナルにHyper、パッケージ管理システムにYarnを使用しています。
Hyperを使ってイケメンなターミナルに乗り換えよう！【Windows・Mac対応】
Expoとはなにか
Expo(expo.io)はJavaScriptを書くだけでReact Nativeを使ったスマホアプリの開発を補助するツールです。
通常のReact Nativeを使う場合、デバイスのシステム機能（カメラ、連絡先、ローカルストレージなど）にアクセスするにはOSごとにコードを書き換える必要があります。
ですが、ExpoはSDKだけで行うことができるので、OSごとに別のコードを記述しなくとも同じコードでiOSやAndroidのアプリが開発できます。
アプリのビルドもExpoのサーバーで行ってくれるので、ビルド環境の構築を行う必要もありません。
つまり、XcodeやAndroid Studioを使用する必要もなく、WindowsでもiOSアプリが開発できてしまいます。
またリアルタイムでの実機テストやシミュレーターへのビルドなどもワンクリックで可能です。
QRコードを読み込むだけで実機テストができるので、友達や非エンジニアの方でも簡単にテストユーザーになってもらえます。
Expoは「今すぐアプリ開発をしてみたい！」という方にピッタリなサービスです。
ただしExpoでは外部のネイティブモジュールを使用することができず、Expoが対応しているライブラリやモジュール以外は利用することができません。(できないこともないですが、Expoの便利な機能が使えなくなります)
Expoのドキュメントにサポートされているものが記載されています。
イラスト共有サイトで有名なpixivのchatstoryというアプリでもExpoが採用されています。
参考 pixiv chatstoryのiOSアプリをReact Native（Expo）でリニューアルしました！pixiv insideExpo-CLIを導入するには
以前はExpo XDEというGUIツールが配布されていましたが、2018年9月頃にExpo CLIに置き換わりました。
古い情報が載っているサイトが多く、惑わされた方もいるかもしれません。
この記事の執筆時にはExpo v2.7.1が公開されています。
インストールコマンドを打つことで最新のバージョンを導入することができます。
Expo-CLIのインストール
Expo-CLIをインストールをするには以下のコマンドを使用します。
npmを使う
npm install expo-cli --globalYarnを使う
yarn global add expo-cli
ログがずら～っと流れてDoneと表示されたらインストールは完了です。
次にプロジェクトの作成方法について解説します。
プロジェクトの作成
Expoでプロジェクトを作成するには以下のコマンドを使用します。
コマンド
expo initするとChoose a templeteが表示されるので、blankを選んでEnterを押しましょう。
Choose which workflow to usと聞かれます、これはmanagedを選びました。
本番環境を構築する時はadvancedのほうがいいかもしれません。
プロジェクト名とプロジェクトのIDを入れます。
slugはディレクトリ名になるので、Gitなどを使われる方はURLにフレンドリーな文字列がいいかと。
先ほどのステップでmanageではなくadvancedを選んだ方は下にこのような項目があります。
公式のドキュメントにはこのように記載するよう書かれていました。
Javaのプロジェクト作るときとかに必要なやつですね。
Webサイトのドメインを持っている方はそれを使うことをおすすめします。
このブログの場合だと、com.itblo9.exampleみたいな感じでしょうか。
"ios": {
"bundleIdentifier": "com.yourcompany.yourappname"
},
"android": {
"package": "com.yourcompany.yourappname"
}
プロジェクトを作成するかの確認なので、yと入れてEnter。
こちらもDoneと表示されたら完了です。
デベロッパーツールの起動＆シミュレーター
次にデベロッパーツールを起動します。
まず、cdコマンドを使ってディレクトリを移動してください。
次に以下のコマンドを使用してデベロッパーツールを立ち上げます。
コマンド
expo startターミナルの画像ではyarn startになっていますが、expo startで起動できます。
デフォルトで指定しているブラウザが開いてこのような画面が表示されたら成功です。
右側のメニューからシミュレーターを起動したり実機テストを行ったりすることができます。
Windowsでは「Run on iOS simulator」は使えません。(Xcodeの機能でシミュレーターが起動するため)
AndroidでのテストはAndroid Studioをインストールすれば可能です。(コードを書く必要はありません)
実際に「Run on iOS simulator」で起動したイメージがこんな感じ。
ユーザーディレクトリにプロジェクトファイルがあるので、それをお好きなエディタで開いてアプリ開発を始めましょう。
Expoのアカウントと結びつけていない方はコンソールから新規作成をするか、ターミナルでexpo loginと打ってログインしてください。
以下のアプリをインストールして、同じアカウントでログインすれば実機テストをすることができます。
QRコードを読み取って実機テストができるのはAndroidだけです。
iOSでは同じアカウントでログインしているユーザーしか実機テストはできません。
もし他人に協力を依頼する場合は、AppleのTestFlightを利用しましょう。
2019年4月18日追記 :
iOSでもカメラアプリからQRコードを読み込むことで実機テストが可能です。
まとめ
これからExpo、しっかり勉強して何かアプリをリリースしたいと思ってます。
Expo、非常に優れた開発環境なのでもっと広まって欲しいですね。
Expoを使ったアプリ開発の書籍もありますので、とりあえず何かを作りたい方にオススメです。
最後までお読みいただきありがとうございました。
