Expoを使った開発環境を構築する
それでは、Expoを使った環境構築の手順を解説していきましょう。まずは、Expoのコマンドラインツールをインストールします（リスト１）。
$ npm install -g expo-cli
インストールする際の名前は expo-cli ですが、コマンドライン上で扱う場合のコマンド名は expo になることに注意してください。
次に、プロジェクトを作成します。リスト2のようにコマンドを実行してください。「my-first-react-native-app」という名前のプロジェクトの作成がはじまります。
$ expo init my-first-react-native-app
途中、図4のように、プロジェクトのテンプレートをblankとtabsのどちらにするか質問されます。blankを選択すると、とてもシンプルな構成でプロジェクトの初期化が行われます。一方、tabsを選択すると、タブで画面の切り替えができるように画面遷移ライブラリが導入済みの、少し複雑で実用的なプロジェクトとして初期化されます。
今回は最小構成のプロジェクトを作りたいので、blankを選択して、エンターキーを押します。すると、my-first-react-native-appフォルダが生成され、初回のnpm installが実行されます。しばらく待つと、プロジェクトの作成が完了し、リスト3のような表示が出ます。
Your project is ready at /path/to/my-first-react-native-app
To get started, you can type:
cd my-first-react-native-app
npm start
では、作られたmy-first-react-native-appを開いてみましょう。図5のようになっているはずです。
各ファイル・フォルダの役割は、次のようになっています。
-
assets/：アプリアイコンやスプラッシュ画像等のリソースを配置するフォルダ -
.watchmanconfig：デバッグ中の監視にwatchmanコマンドを利用する場合の設定ファイル -
App.js：Reactアプリケーションとしてのエントリーポイント -
app.json：アプリの設定を記述するファイル -
babel.config.js：Babelの設定ファイル
とてもシンプルですね。では次に、package.jsonを見てみましょう（リスト4）。
{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"eject": "expo eject"
},
"dependencies": {
"expo": "^32.0.0",
"react": "16.5.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz"
},
"devDependencies": {
"babel-preset-expo": "^5.0.0"
},
"private": true
}
こちらもかなりシンプルに仕上がっています。react-nativeモジュールはnpmリポジトリで配信されている公式のものではなく、Expo開発チームがカスタマイズしたものです。ここにexpoモジュールを組み合わせることで、多彩な機能を実現しています。
さて、パソコン側の環境構築としては、これで完了です。Android SDKもiOS SDKもインストールしていませんが、これで問題ありません。
公式Expoアプリでデバッグする
通常のAndroid/iOSアプリ開発であれば、GradleやXcodeによるビルドを行うことで、手元のスマートフォンにアプリを流し込んで動作確認を実施します。しかし、今回はそれらのツールをパソコンにインストールしていません。Expoでは少しユニークな手法でこの問題を解決しています。
環境構築の最後の手順として、デバッグ用のアプリをお手元のスマートフォンにインストールしてください。次のリンク先で公開されています。
- Google Play ストア：https://play.google.com/store/apps/details?id=host.exp.exponent&hl=ja
- App Store：https://itunes.apple.com/jp/app/expo-client/id982107779?mt=8
このアプリを入れたスマートフォンを、開発に使用するパソコンと同じネットワークに接続することで、App.jsを起点としたアプリをスマートフォン上で動作させることができるようになります。図6のようなイメージです。
Expoアプリがブラウザのような役割を果たして、パソコン上のビルドサーバーからJavaScriptファイルをダウンロードし、それを実行することで画面を構築するのです。
ビルドサーバーを起動してアプリを動かす
それでは実際に、アプリを動かしてみましょう。リスト5のコマンドを実行して、ビルドサーバーを立ち上げます。
$ npm start
すると、ブラウザで図7の画面が開きます。
このQRコードを読み取ることで、Expoアプリがビルドサーバーの存在を認識して、JavaScriptファイルをダウンロードできるようになります。iOSの場合は、OS標準のアプリで読み取ってください。Androidの場合はExpoアプリ内からカメラを起動します（図8）。
あとは図9のように、カメラでQRコードを読み取るだけです。
すると、アプリがビルドサーバーからソースコードのダウンロードをはじめ、画面が表示されます（図10）。
おめでとうございます。初めてのReact Nativeアプリが表示できました！
ソースコードの更新を取り込む
ソースコードを改修して、画面に改修内容を反映したい場合は、アプリの動作中にスマートフォンをシェイクします（小刻みに1〜2回振ってください）。すると、図11のようなデバッグメニューが出てきます。
メニューの一番上にある「Reload」をタップすると、ビルドサーバーから最新のソースコードを取得し直し、画面が更新されます。
まとめ
今回はReact Nativeをそのまま使うことの良しあしと、拡張性を少し犠牲にして、開発を楽にするExpoについて、解説しました。Expoによるアプリ開発では、Android SDKやiOS SDKが不要なので、モバイルアプリ開発のハードルをかなり低くなったように感じています。
Reactコンポーネントを動かす環境ができたので、次回はReactというUIのためのフレームワークについて、おさらいをしてみましょう。
