---
title: "RevenueCat React Native SDK が React Native Web をサポート開始"
description: "react-native-purchases が Web に対応、単一コードベースで3プラットフォームのサブスクリプション管理が可能に"
language: "jp"
publishedAt: "2026-02-27T11:22:58Z"
updatedAt: "2026-02-27T11:22:58Z"
authors:
  - name: "Perttu Lähteenlahti"
    url: "https://www.revenuecat.com/jp/blog/author/perttu-lahteenlahti"
category: "[ エンジニアリング ]"
categoryUrl: "https://www.revenuecat.com/jp/blog/engineering"
readingTime: 1
canonical: "https://www.revenuecat.com/jp/blog/engineering/revenuecat-react-native-sdk-adds-react-native-web-support"
---

# RevenueCat React Native SDK が React Native Web をサポート開始

react-native-purchases が Web に対応、単一コードベースで3プラットフォームのサブスクリプション管理が可能に

## Table of contents

- [なぜこれを開発したのか](#section)
- [Webでの課金の仕組み](#web)
- [React Native Web の始め方](#react-native-web)
- [Expo を利用する場合](#expo)
- [現在の制限事項](#section-2)
- [今後について](#section-3)

React Native アプリは、単一の RevenueCat SDK インスタンスで iOS・Android・Web のサブスクリプションに対応できるようになりました。React Native Web サポートにより、Web での購入は RevenueCat Web Billing（Stripe を基盤）を通じて、ネイティブ購入と同じバックエンドに統合されます。そのため、エンタイトルメントの確認はプラットフォーム間で一貫した状態を保てます。3つのプラットフォームで、単一のコードベースによるサブスクリプション管理が可能になります。

r[eact-native-purchases のバージョン 9.7.6](https://github.com/RevenueCat/react-native-purchases/releases/tag/9.7.6) 以降、React Native で開発しているチームは、同じ SDK と同じ RevenueCat のエンタイトルメントシステムを使って、iOS・Android・Web のサブスクリプションを一元管理できるようになりました。すでにモバイルでアプリを展開していて Web へ拡張する場合でも、最初から共通コードベースで開発する場合でも、アーキテクチャを再設計することなく、すべてのプラットフォームでサブスクリプションをサポートできます。

Expo または React Native プロジェクトに react-native-purchases を追加するだけで、単一のコードベースから、3つのプラットフォームにわたる高度なサブスクリプション管理、アプリ内課金、エンタイトルメント管理を実現できます。

## **なぜこれを開発したのか**

より多くの React Native アプリがモバイルの枠を超えて展開する中で、Web は単なるマーケティングの場ではなく、プロダクトの一部になっています。チームは、ユーザーがブラウザ上でサインアップやアップグレード、サブスクリプション管理を行いながら、iOS や Android アプリ内でも同じアクセス権を利用できることを求めています。これまでは、そのために Web 用の別個の課金システムを維持し、カスタムロジックで全体をつなぎ合わせる必要がありました。

React Native Web サポートは、その分断を解消します。Web での購入はネイティブ購入と同じ RevenueCat のバックエンドに流れるため、複数のデータソースを突き合わせる必要はありません。単一のエンタイトルメントシステムに依存することができます。

## **Webでの課金の仕組み**

iOS と Android では、RevenueCat は App Store と Google Play に直接統合されています。一方、Web では購入は [RevenueCat Web Billing](https://www.revenuecat.com/docs/web/web-billing/overview) を通じて処理され、Stripe または Paddle が決済プロセッサーとして利用されます。Web Billing はネイティブのアプリ内課金とは別の仕組みですが、同じエンタイトルメントシステムに接続されているため、共通の appUserID を使ってプラットフォーム間でアクセス権を付与できます。

アプリ側から見ると、ユーザーがどこでサブスクリプションを開始したかに関わらず、サブスクリプション状態は一貫しています。ユーザーが Web で登録した場合でも、特別なプラットフォーム別ロジックを書くことなく、すぐにモバイルでプレミアム機能へアクセスできます。

## **React Native Web の始め方**

React Native Web サポートを有効にするには、まず各プラットフォームに対応する適切な API キーを使って RevenueCat を設定します。アプリが Web 上で動作する場合は Web Billing 用の公開 API キーで SDK を初期化し、iOS と Android では引き続きそれぞれのネイティブ用キーを使用します。

実際の設定は、次のようになります。

```javascript
import { Platform } from 'react-native';
import Purchases from 'react-native-purchases';

if (Platform.OS === 'web') {
  Purchases.configure({ apiKey: '<public_web_billing_api_key>' });
} else if (Platform.OS === 'ios') {
  Purchases.configure({ apiKey: '<public_apple_api_key>' });
} else if (Platform.OS === 'android') {
  Purchases.configure({ apiKey: '<public_google_api_key>' });
}
```

設定が完了すれば、エンタイトルメントの確認はすべてのプラットフォームで同じ方法で行えます。サブスクリプションがどのプラットフォームで購入されたかによって、アプリのロジックを分岐させる必要はありません。

```javascript
import Purchases from 'react-native-purchases'
\/\/ all of the following methods work on iOS, Android, and Web

\/\/ Check offerings
try {
  const offerings = await Purchases.getOfferings();
  if (offerings.current !== null && offerings.current.availablePackages.length !== 0) {
    \/\/ Display packages for sale
  }
} catch (e) {
 
}

\/\/ Check entitlements
const customerInfo = await Purchases.getCustomerInfo();
if(typeof customerInfo.entitlements.active[<my_entitlement_identifier>] !== "undefined") {
  \/\/ Grant user "pro" access
}

\/\/ Purchase a package
try {
  const { customerInfo } = await Purchases.purchasePackage(package);
  if (
    typeof customerInfo.entitlements.active["my_entitlement_identifier"] !==
    "undefined"
  ) {
    \/\/ Unlock that great "pro" content
  }
} catch (e) {
  if (!e.userCancelled) {
    showError(e);
}

```

Web 購入を有効にするには、RevenueCat ダッシュボードで **Web Billing 用のアプリ**を作成し、Web 向けにプロダクトを設定する必要があります。これらは iOS や Android のプロダクトと並んで管理されますが、ネイティブストアではなく Web Billing を通じて課金されます。

## **Expo を利用する場合**

Expo で開発している場合、React Native Web サポートは開発体験も向上させます。カスタムの開発用クライアントをすぐに作成しなくても、Web 上でサブスクリプション UI をプレビューし、エンタイトルメントロジックをテストし、統合フローを検証できます。これにより、初期段階での反復開発がしやすくなり、設定がエンドツーエンドで正しく動作しているかを確認しやすくなります。

iOS と Android で実際のアプリ内課金を完全にテストするには、引き続き Expo の開発ビルドが必要です。Web サポートはその要件を置き換えるものではありませんが、初期開発段階における多くの摩擦を取り除きます。

## **現在の制限事項**

Web 課金はネイティブのアプリストアとは仕組みが異なるため、いくつか注意すべき制限があります。Web での購入には RevenueCat Web Billing が必要であり、iOS や Android のネイティブアプリ内課金を処理することはできません。また、ネイティブストアの API に依存する一部の操作（ `getProducts`、 `purchaseProduct`、 `restorePurchases`など）は Web 環境ではサポートされていません。Expo Go や同様のサンドボックス環境でも、購入処理はサポートされていません。

```javascript
\/\/ this will not work on web, but works on iOS and Android:
try {
  const restore = await Purchases.restorePurchases();
  \/\/ ... check restored purchaserInfo to see if entitlement is now active
} catch (e) {

}
```

ユーザーは、RevenueCat がホストするカスタマーポータルを通じて Web サブスクリプションを管理できます。これにより、ネイティブアプリストア外でも、サブスクリプションの更新や解約を一貫した方法で行うことができます。

## **今後について**

サブスクリプションアプリがモバイルとWebの両方にまたがるケースが増える中、私たちはクロスプラットフォームでのサブスクリプション管理を、よりシンプルで信頼性の高いものにするための投資を続けています。React Native Web サポートはその基盤となる取り組みであり、チームが本番環境でさらに活用していく中で、体験を継続的に改善していきます。

すでにモバイルで React Native と RevenueCat を利用している場合、Web サポートの追加は自然な次のステップです。