Expo Bare Workflow で Firebase Analytics を設定する

はじめに

この記事は 新しい技術にチャレンジし続けるpalanのアドベントカレンダー 23日目の記事です。

昨日は 『ペースの計算を行う【Reactで作るマラソンペースメーカー】』 という記事で Material-UI のコンポーネントや React Hooks の使い方をご紹介しました。

ペースの計算を行う【Reactで作るマラソンペースメーカー】

今回は Expo を使った React Native 開発において、 Bare Workflow を使ってネイティブコードを含むライブラリを追加する方法をご紹介します。 公式ドキュメント では react-native-mapbox-gl を例に挙げていますが、この記事では題材として react-native-firebase を使って Firebase Analytics を設定してみます。

なお、この記事では分量の都合上 iOS のみで説明していますが、 Android でも同じように動作可能です。

Expo Bare Workflow について

Expo とは

Expo は React Native の開発ツールです。 React Native はネイティブアプリ上で JavaScript のランタイムを動かし、ネイティブ側と JavaScript 側が情報をやりとりすることで動作していますが、 Expo ではネイティブ側のコードは固定されており JavaScript のコードのみを実装するので、 Xcode や Android Studio を使ったビルドが不要になるのが特徴です。開発時は Expo Client というアプリ上で動作させ、リリース時は expo build コマンドを使って Expo が提供するサーバー上で ipa や apk をビルドします。開発時は Expo Client をインストールしたスマートフォンで QR コードを読み取るだけで実機確認が非常に簡単に行えることも大きなメリットです。

このようにネイティブ側のコードは固定されているのですが、通常の React Native でネイティブモジュールのリンクが必要なカメラやパーミッションなどの機能は Expo SDK に含まれているので、凝ったアプリでなければだいたいのことには対応可能です。利用可能なモジュールは 公式ドキュメント をご覧ください。

Expo Bare Workflow とは

だいたいの機能は Expo が提供しているといっても、途中からネイティブを含むコードを追加したくなる場合があります。その場合は Eject と呼ばれる作業によって Expo プロジェクトを通常の React Native プロジェクトに変換し、 Xcode や Android Studio を使ってビルドできるようにします。

従来は Eject してしまうと Expo を使っていたメリットが無くなってしまっていたのですが、2019年7月にリリースされた Expo SDK 34 から Eject した状態のアプリを Expo Client 上で動かすことが Bare Workflow という名称でサポートされるようになりました。これにより、自由にネイティブのコードを追加しつつも、開発時は QR コードを使った開発などの Expo のメリットを受けることができるようになりました。

Expo Bare Workflow を試してみる

Expo プロジェクトの作成

まず expo コマンドを npm でインストールします。すでにインストールされている場合も、最新のバージョンがインストールされているようにしてください。

$ npm install -g expo-cli

次に expo init コマンドを実行します。今回は Bare workflow を選択するので、 minimal または minimal (TypeScript) のお好きな方を選択します。

$ expo init expoFirebaseSample
? Choose a template:
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas
  blank (TypeScript)    same as blank but with TypeScript configuration
  tabs                  several example screens and tabs using react-navigation
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started

❯ minimal (TypeScript)  same as minimal but with TypeScript configuration

displayName のところに適当な名前を入力して Enter を押すとプロジェクトが作られ、 npm または yarn で node_modules のインストールが始まります。

? Choose a template: expo-template-bare-typescript
? Please enter names for your project. › 100% completed
 {
   "name": "expoFirebaseSample",
   "displayName": "expo-firebase-sample"
 }

通常の Expo プロジェクトと違い ios, android ディレクトリがあることがわかります。

Expo Client で実行する

Expo Client で実行するには expo start を実行します。

cd expoFirebaseSample
expo start

コマンドを実行すると、ブラウザで以下のような画面が立ち上がるかと思います。

シミュレータで確認する場合は左メニューの Run on iOS simulator をクリックするとシミュレータが立ち上がり、 Expo Client がインストールされ、アプリが立ち上がります。実機で確認する場合は App Store から Expo Client をインストールし、左下の QR コードをカメラで読み取ります。

ネイティブビルドで実行する

Xcode でネイティブビルドするには まずネイティブコードを含むライブラリを CocoaPods でインストールする必要があります。

$ cd ios
$ pod install

CocoaPod ライブラリのインストールが終わったら、 react-native run-ios を実行します。

$ cd ../
$ react-native run-ios (もしくは yarn ios または npm run ios)

ビルドに少し時間がかかりますが、待っているとシミュレータまたは実機でアプリが立ち上がると思います。（画面は先ほどの Expo Client と同じなため省略します）

ホーム画面に戻ると、 Expo Client とは別にアプリがインストールされていることがわかります。

Firebase Analytics を設定する

React Native の Firebase ライブラリについて

React Native で Firebase を使うには、 firebase パッケージを使う方法と react-native-firebase パッケージを使う方法があります。

firebase パッケージはブラウザ上の JavaScript 向けに提供されている公式パッケージですが、一部の機能は React Native でも動かすことができます。ネイティブコードのリンクが不要なので、まずは試してみたいというときにお勧めです。
react-native-firebase パッケージは iOS / Android のネイティブ向け Firebase SDK をラップする形で提供されているサードパーティ製のライブラリです。その仕組み上ネイティブコードのリンクが必要になってきますが、 Firebase SDK で提供されている機能をフルに使うことが出来ます。

現状、 Firebase Analytics を動かすには react-native-firebase を使う必要があるため、今回は react-native-firebase を使って Expo Bare Workflow にリンクしていきます。

react-native-firebase のセットアップ

プロジェクトに react-native-firebase のパッケージを追加していきます。以前のバージョンでは react-native-firebase というパッケージを1つ追加すればよかったのですが、最新の v6 では機能ごとにパッケージが分かれるようになりました。

$ yarn add @react-native-firebase/app @react-native-firebase/analytics

Podfile に Firebase SDK を追加します。これも以前は自分でネイティブの Firebase SDK を指定していましたが、 v6 からは react-native-firebase の各パッケージを指定するようになりました。

補足: 通常 React Native 0.60 以降では use_native_modules! によるAuto Linking が有効なため Podfile を編集する必要はありませんが、 Expo Bare Workflow ではデフォルトで設定されていなかったため、今回は手動で追加しました

  pod 'RNFBApp', :path => '../node_modules/@react-native-firebase/app'
  pod 'RNFBAnalytics', :path => '../node_modules/@react-native-firebase/analytics'

あとは、 GoogleService-Info.plist を設置し、 AppDelegate.m を数ヶ所編集する必要があります。これについては Firebase のドキュメント や react-native-firebase のドキュメント を参考にしてください。

補足: Firebase アプリの追加の際に Bundle Identifier を求められますので、 一致する Bundle Identifier を Xcode 上で設定してください

ネイティブビルドで確認する

アプリに Firebase Analytics のイベントを追加していきますが、後々のために react-native-firebase を呼び出すコードは firebase.ts というファイルにまとめておきます。
以下のような内容の firebase.ts を作成します。

import analytics from '@react-native-firebase/analytics';

export async function logEvent(
  name: string,
  params: {
    [key: string]: string | number | boolean;
  } = {}
) {
  await analytics().logEvent(name, params);
}

App.tsx 側ではこの logEvent 関数を import し、マウント時に呼び出します。

// ...
import { logEvent } from './firebase';

export default function App() {
  useEffect(() => {
    logEvent('sample_event');
  }, []);

// ...

これでアプリ起動時に sample_event が送信されるようになりました。

さっそく実際に Firebase コンソール上で確認したいのですが、通常 Analytics のイベントは反映されるのに1時間程度かかるので困ってしまうため、アプリにデバッグ引数を渡して起動します。 イベントのデバッグ のドキュメントにあるように、 iOS の場合 Xcode のコマンドライン引数に -FIRDebugEnabled を追加します。

この状態でアプリを実行すると、 Firebase Analytics の DebugView 画面に sample_event が送信されるのがリアルタイム (10秒以内程度) で確認できるかと思います。

Expo Client で確認する

現状のコードを Expo Client で実行してみましょう。おそらく、ネイティブモジュールが見つからなくてエラーになると思います。

Expo Client 上で react-native-firebase のパッケージを呼び出すとエラーになってしまうので、 以下のように react-native-firebase の代わりに console.log を呼び出すファイルを firebase.expo.ts という名前で作成します。

export async function logEvent(
  name: string,
  params: {
    [key: string]: string | number | boolean;
  } = {}
) {
  console.log(name, params);
}

実行している Expo を一度 Control + C で停止し、再度 expo start して確認すると、エラーがでずにアプリが起動します。また、 logEvent の内容がコンソール上に出力されるのが確認できるはずです。

このように Bare Workflow では、 Expo Client で実行した際は .expo のついた拡張子のあるファイルがある場合、そちらが優先して読み込まれます。これを用いて Expo Client 上ではネイティブモジュールが呼び出されないようにすることで、自由にネイティブモジュールを使いつつ開発時は Expo のメリットを受けることが出来ます。

まとめ

React Native 開発において Expo を使うとビルド時間が短縮されたり実機確認が楽になったりとメリットは多いのですが、今までは結局後でネイティブモジュールを使う必要が出て Eject するんだったら最初から通常の React Native プロジェクトで作ってしまおうと言われて採用されないことが多かったように思われます。

Bare Workflow のプロジェクトが Expo Client 上でも実行できるようになったことで、もはや通常の React Native プロジェクトと Expo を使った開発は相反する選択肢ではなく、共存可能なものとなりました。

正しく使うことでお互いのメリットが最大限に発揮されますので、試してみてはいかがでしょうか。