ExpoではじめるReact Native開発環境の構築

基礎からはじめるReact Native入門 第2回

Expoを使った開発環境を構築する

　それでは、Expoを使った環境構築の手順を解説していきましょう。まずは、Expoのコマンドラインツールをインストールします（リスト１）。

［リスト1］Expoのコマンドラインツールをインストールする

$ npm install -g expo-cli

　インストールする際の名前は expo-cli ですが、コマンドライン上で扱う場合のコマンド名は expo になることに注意してください。

　次に、プロジェクトを作成します。リスト2のようにコマンドを実行してください。「my-first-react-native-app」という名前のプロジェクトの作成がはじまります。

［リスト２］Expoコマンドでプロジェクトをセットアップする

$ expo init my-first-react-native-app

　途中、図4のように、プロジェクトのテンプレートをblankとtabsのどちらにするか質問されます。blankを選択すると、とてもシンプルな構成でプロジェクトの初期化が行われます。一方、tabsを選択すると、タブで画面の切り替えができるように画面遷移ライブラリが導入済みの、少し複雑で実用的なプロジェクトとして初期化されます。

図4：プロジェクトテンプレートを選択する

　今回は最小構成のプロジェクトを作りたいので、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のようになっているはずです。

図5：expo init後のプロジェクト構成

　各ファイル・フォルダの役割は、次のようになっています。

• assets/：アプリアイコンやスプラッシュ画像等のリソースを配置するフォルダ
• .watchmanconfig：デバッグ中の監視にwatchmanコマンドを利用する場合の設定ファイル
• App.js：Reactアプリケーションとしてのエントリーポイント
• app.json：アプリの設定を記述するファイル
• babel.config.js：Babelの設定ファイル

とてもシンプルですね。では次に、package.jsonを見てみましょう（リスト4）。

［リスト4］初期状態のpackage.json

{
  "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のようなイメージです。

図6：Expoのデバッグの仕組み

　Expoアプリがブラウザのような役割を果たして、パソコン上のビルドサーバーからJavaScriptファイルをダウンロードし、それを実行することで画面を構築するのです。

ビルドサーバーを起動してアプリを動かす

　それでは実際に、アプリを動かしてみましょう。リスト5のコマンドを実行して、ビルドサーバーを立ち上げます。

［リスト5］ビルドサーバーを立ち上げる

$ npm start

　すると、ブラウザで図7の画面が開きます。

図7：ビルドサーバーのコンソールがブラウザで開く

　このQRコードを読み取ることで、Expoアプリがビルドサーバーの存在を認識して、JavaScriptファイルをダウンロードできるようになります。iOSの場合は、OS標準のアプリで読み取ってください。Androidの場合はExpoアプリ内からカメラを起動します（図8）。

図8：AndroidではExpoアプリ内からカメラを起動する

　あとは図9のように、カメラでQRコードを読み取るだけです。

図9：QRコードを読み取る

　すると、アプリがビルドサーバーからソースコードのダウンロードをはじめ、画面が表示されます（図10）。

図10：画面が表示された

　おめでとうございます。初めてのReact Nativeアプリが表示できました！

ソースコードの更新を取り込む

　ソースコードを改修して、画面に改修内容を反映したい場合は、アプリの動作中にスマートフォンをシェイクします（小刻みに1〜2回振ってください）。すると、図11のようなデバッグメニューが出てきます。

図11：アプリをシェイクするとデバッグメニューが現れる

　メニューの一番上にある「Reload」をタップすると、ビルドサーバーから最新のソースコードを取得し直し、画面が更新されます。

まとめ

　今回はReact Nativeをそのまま使うことの良しあしと、拡張性を少し犠牲にして、開発を楽にするExpoについて、解説しました。Expoによるアプリ開発では、Android SDKやiOS SDKが不要なので、モバイルアプリ開発のハードルをかなり低くなったように感じています。

　Reactコンポーネントを動かす環境ができたので、次回はReactというUIのためのフレームワークについて、おさらいをしてみましょう。