「null」との戦い：ExpoでRevenueCatを動かす秘訣

こんにちは、mk-mokumokuこと渡邊琢資です。プログラミングに興味を持って4年、ゲーム制作からWeb開発、そしてアプリ開発へと情熱を注いでいます。今回は、私がReact NativeアプリにRevenueCatを導入する際に直面した、少々手強いエラーとその解決までの道のりをお話ししたいと思います。

第1章：RevenueCat導入の期待と、突如現れたエラー

ある日、React NativeとExpoで開発を進めていた私のアプリに、アプリ内課金を導入することになりました。そこで白羽の矢が立ったのが、人気の収益化プラットフォームであるRevenueCatです。その手軽さに期待を膨らませ、早速 react-native-purchases ライブラリをインストールし、コードに組み込んでいきました。

そして、RevenueCatを初期化するために不可欠な Purchases.configure() メソッドを呼び出す行に差し掛かった時です。アプリを起動した瞬間、見慣れないエラーメッセージが画面に現れました。

このエラーを見た時、正直なところ「え、何これ？」と頭の中が真っ白になりました。setupPurchases？ null？まったく意味が分かりません。ただ、何かが「見つからない」と言っていることだけは理解できました。

第2章：バージョンアップの落とし穴

まず私が疑ったのは、ライブラリのバージョン競合でした。React Nativeの開発では、reactとreact-nativeのバージョン合わせが非常に重要であることは経験上知っていました。

早速、現在の最新バージョンを確認。本日2025年5月30日時点で、reactの最新は19.1.0ですが、react-nativeの最新は19.0.0でした。この二つのパッケージは常に同じバージョンでなければならないという厳しい制約があるため、実質的に19.0.0が私の環境における「最新」ということになります。

念のため、両方のパッケージを19.0.0に揃えて再インストールしました。これで問題なく動くだろう、と期待して再度アプリを起動。しかし、結果は変わりません。同じエラーメッセージが私を嘲笑うかのように表示されました。

「なぜだ…バージョンは完璧に合わせたはずなのに…」

第3章：Expo Goの意外な制約とネイティブの壁

エラー解決の糸口を求めてインターネットの海をさまよっていると、あるキーワードにぶつかりました。それは「Expo Goではネイティブモジュールは動かない」という情報です。

正直、これには驚きました。これまでExpo Goでアプリ開発を進めてきて、特に問題を感じたことはありませんでした。スムーズに開発できるのがExpoの魅力だと思っていたからです。しかし、RevenueCatのような「ネイティブなんちゃら」で組まれたライブラリは、どうやらそうではないらしいのです。

なぜExpo Goではネイティブモジュールが動かないのか？

ここで少し、Expo Goの仕組みについて整理させてください。

Expo Goは、開発者が書いたJavaScriptコードを実行するための、いわば「汎用的なシェルアプリ」です。このアプリには、あらかじめReact Nativeの基本的な機能と、Expo SDKに含まれるAPIが組み込まれています。これにより、私たちは複雑なネイティブ設定に頭を悩ませることなく、手軽にアプリ開発を始められます。

しかし、その手軽さの裏には一つの制約があります。それが「カスタムネイティブモジュールを追加できない」という点です。

react-native-purchases（RevenueCat SDK）は、まさにこの「カスタムネイティブモジュール」に該当します。このライブラリは、iOSのStoreKitやAndroidのGoogle Play Billing Libraryといった、デバイス固有のアプリ内課金システムと直接通信するために、Objective-C/Swift（iOS）やJava/Kotlin（Android）といったネイティブコードで書かれています。

Expo Goは、これらのネイティブコードをあらかじめ持っていないため、react-native-purchasesをインポートしてPurchases.configure()のようなネイティブコードを呼び出そうとすると、「Purchasesオブジェクトが見つからない（nullである）」というエラーが発生してしまうのです。

第4章：救世主「開発ビルド」の導入

この問題の解決策は、ずばり 開発ビルド（Development Build / Dev Client） の作成でした。

開発ビルドとは、あなたのプロジェクトに必要なすべてのネイティブモジュール（react-native-purchasesも含む）を組み込んで特別にビルドされた、カスタムのExpoアプリのことです。これを使うことで、Expo Goでは動作しないネイティブモジュールも、開発環境で問題なく動かすことができるようになります。

具体的な手順は以下の通りです。

eas-cliのインストール:
まずは、Expoのビルドツールであるeas-cliをグローバルにインストールします。
```
npm install -g eas-cli
```
プロジェクトのセットアップ:
初回のみプロジェクトのセットアップが必要です。
```
eas project:init
```
開発ビルドの作成:
プラットフォーム（iOSまたはAndroid）を指定して、開発ビルドを作成します。
```
eas build --profile development --platform ios # iOSの場合
# または
eas build --profile development --platform android # Androidの場合
```
このビルドプロセスは少し時間がかかりますが、完了するとデバイスにインストールするためのURLまたはQRコードが提供されます。
開発アプリのインストールと実行:
ビルドされた開発アプリをスマートフォンにインストールし、プロジェクトのルートディレクトリで以下のコマンドを実行します。
```
expo start --dev-client
```
そして、Expo CLIが提供するQRコードを開発アプリでスキャンして、アプリを起動します。

第5章：エラー解消、そしてスムーズな開発への道

上記の開発ビルドの作成と実行手順を終え、再びアプリを起動しました。するとどうでしょう！あの忌々しい「Cannot read property 'setupPurchases' of null」のエラーは表示されず、無事にアプリが起動し、RevenueCatの初期化も成功していることを確認できました。

この経験から、Expo Goの便利さを享受しつつも、ネイティブモジュールを必要とするライブラリを導入する際には、開発ビルドの作成が必須であることを痛感しました。特に、アプリ内課金やプッシュ通知、複雑な地図表示など、OSの深い部分にアクセスする機能を持つライブラリは、このカテゴリに属することが多いです。

まとめ：Expoとネイティブモジュールの賢い共存

今回のエラーは私にとって、Expoの強力さと、それに伴う考慮事項を再認識する良い機会となりました。

Expo Go: 素早いプロトタイピングや、ネイティブモジュールを必要としないシンプルなアプリ開発には最適。
開発ビルド (Development Build / Dev Client): アプリ内課金 (RevenueCat) やプッシュ通知など、ネイティブコードに依存する機能を組み込む際に必須。Expo Goではエラーになる場合でも、これで解決できる可能性が高い。

もしあなたが私と同じように、React NativeとExpoで開発中にCannot read property 'setupPurchases' of nullのようなネイティブモジュール関連のエラーに遭遇したら、まずは開発ビルドの作成を試してみてください。きっと、解決の道が開けるはずです。

PCの組み立てが好きで、Web開発からアプリ開発まで情熱を注いできた私にとって、今回の経験はまた一つ、技術の深さを知る貴重なステップとなりました。これからも、使いやすいUIの創造を目指し、様々な技術に挑戦していきたいと思います。

この記事があなたのエンジニアキャリアの一助になれば幸いです。

もしこの記事が役に立ったと感じたら、ぜひ「♡」で教えてください！