リライト不要：成熟したネイティブアプリにExpoを導入する方法

開発 • React Native • 2025年10月14日 • 7分で読める

Gabriel Donadel エンジニアリング
Brent Vatne エンジニアリング

コストのかかるリライトをスキップしましょう。ExpoとReact Nativeを使用してアプリを段階的にモダナイズし、数ヶ月ではなく数日で新しい画面と機能を追加できます。

成熟したネイティブアプリに新しい技術を導入することは、魅力的でありながら困難に感じられるかもしれません。しかし、そうである必要はありません。なぜなら、リライトする必要がないからです。

Expoは追加的なものです。Expoを段階的に採用し、一度に一つの新機能（または一つのビューでさえ）を出荷し、既存のアプリにきちんと統合することができます。

私たちは、アプリの必要な部分の多くまたは少しに対してReact Nativeを簡単に使用できるようにしたいと考えています。アプリで試してみるために午後の時間を使う価値のある多くの説得力のある理由があると思うので、それらを列挙し、Expoを段階的に統合し始める方法の簡単な概要を説明します。

チームがExpoの段階的採用を選択する一般的な理由

妥協のないスピードと柔軟性。これらがReact Nativeが開発チームにもたらす力です。以下に、私たちのユーザーベース全体で観察されるReact NativeとExpoの段階的採用の一般的な理由をいくつか列挙しました。基本的に、これらはすべてスピードと柔軟性にマップされます。

既存のネイティブ投資を妥協したり、アプリをリライトしたりすることなく採用が可能であることを理解することが重要です。多くのチームにとって、これによりExpoの採用はかなり簡単な決定になります。

プラットフォームパリティのためのReact Native採用

時々、プロダクトチームは新機能をiOSとAndroidで同時に出荷する必要がありますが、ネイティブチームには異なる優先順位や限られた帯域幅があります。React Nativeでその機能を一度構築することで、両方のアプリで同時に提供できます。

例えば、チームは新しいメディアプレーヤーUIやサブスクリプションフローをこの方法で実装し、両方のプラットフォームが同期を保つことを確実にするかもしれません。

共有コンポーネント

大規模な組織では、重複する機能を持つ複数のアプリを持つことがよくあります。React Nativeを使用すると、重複を減らし、アプリ間の一貫性を向上させる共有JavaScriptコンポーネントを導入できます。デザインシステムやカスタムチャートライブラリは一般的な出発点で、一度書けばすべてのアプリが恩恵を受けることができます。

ドメインで分割されたチーム

すべてのエンジニアがネイティブ開発の専門家である必要はありません。モバイルプラットフォームエンジニアは基盤となるiOSとAndroidインフラストラクチャを維持し、プロダクトチームはReact Nativeで機能の構築に集中できます。この責任の分担により、新しいエンジニアのオンボーディング、チームのスケーリング、より迅速な移行が容易になります。

新機能を迅速に追加（一画面）

最も摩擦の少ないエントリーポイントの一つは、新機能を完全にReact Nativeで構築することです。オンボーディング、設定、またはチャットビューなどです。アプリの残りの部分は変更されませんが、React Nativeの高速反復サイクルの恩恵を受けることができます。

移行戦略

古いネイティブコードベースは維持が困難な場合があります。アプリ全体をリライトするのではなく、チームはアプリの一部をReact Nativeで段階的に置き換えることができます。時間が経つにつれて、既存のネイティブ基盤の安定性を活用しながら、アプリのより多くの部分がより高速な開発サイクルの恩恵を受けることになります。

多くの明確なエントリーポイントがあるため、本当の問題はなぜExpoを段階的に採用するかではなく、チームがどこから始めるべきかです。

Expoの段階的採用をどこから始めるか

Expoをプロジェクトに統合することは、いくつかの簡単なステップで実行できます。以下は簡単な要約です。（すべてのコードと詳細については「既存のネイティブアプリにExpoを追加する方法」を参照してください）。

既存のアプリプロジェクト内にExpoプロジェクトを作成

npx create-expo-app my-project

プロジェクト構造の設定

標準的なReact Nativeプロジェクトは、ネイティブコードをandroidとiosディレクトリに配置します。これを行う具体的な方法はプロジェクトによって異なりますが、ディレクトリを作成してプロジェクトをそこに移動するか、カスタムプロジェクトルートを設定するだけで済む場合があります。

例：

mv /path/to/your/ios-project my-project/ios/

ネイティブプロジェクトの設定

プロジェクトが設定されたので、次のステップはReact Nativeを既存のネイティブコードと接続することです。これには、アプリがReact Nativeをロードして実行する方法を知るために、AndroidとiOSの両方でいくつかの小さな変更を行うことが含まれます。

Androidでは、いくつかの重要なファイルを更新します：

• Gradleファイル：settings.gradle、build.gradle、app/build.gradle、gradle.propertiesを更新して、React Native Gradle Plugin（RNGP）と必要なプロパティを含めます。
• AndroidManifest.xml：必要な権限を追加します（詳細はこちら）。
• MainActivity：React Nativeアプリケーションを初期化してロードし、既存のアクティビティ内でビューをレンダリングできるようにします。
• ReactActivity：コンポーネントをレンダリングするためのReactActivityを作成して表示します。

iOSでは、変更は精神的に似ています：

• Podfile：React Native依存関係を追加し、pod installを実行します。
• Xcodeプロジェクト：JavaScriptコードをバンドルする新しいビルドフェーズを追加します。
• Info.plist：React Nativeで必要なアプリ設定を構成します。
• ReactViewController：React Nativeランタイムを開始し、コンポーネントをレンダリングするためのReactViewControllerを作成して表示します。

これらの変更が完了すると、アプリは既存のネイティブ画面と並行してReact Nativeコードを実行する準備が整います。

ネイティブアプリをビルドし、React Nativeディレクトリで以下のコマンドを実行してMetroバンドラーを開始します：

npx expo start

オープンソースアプリでの統合例

私たちは、GitHubで見つけたいくつかのオープンソースアプリにExpoを統合したリポジトリをまとめ、実世界のアプリのコンテキストで具体的な例を提供しています。

リポジトリにはAndroidとiOS（UIKitとSwiftUIの両方）の例が含まれており、https://github.com/expo/expo-brownfield-examples で利用できます。

各統合例（AntennaPod、IceCubesApp、NetNewsWire、simplenote）については、サブモジュールのコミット履歴を参照して、Expoがアプリにどのように追加されたかを確認してください。

リポジトリには、空のiOSとAndroidアプリにExpoを統合する例も含まれています。これらのリンクを使用して、BlankIOSとBlankAndroidサブモジュールを参照できます。

現在の制限と今後の予定

Expoのライブラリのほとんどは追加の変更なしで動作しますが、一部はアプリのライフサイクルをリッスンするための追加設定が必要な場合があります。アプリでライフサイクルリスナーを設定する方法の詳細については、AndroidとiOSで確認できます。

expo-dev-clientなどのライブラリはまだサポートされていませんが、次のSDKリリースでそのサポートを追加する作業を行っています。サポートされていないライブラリのリストは https://docs.expo.dev/brownfield/overview/ で確認できます。

私たちはこの統合の改善を継続することにコミットしており、複数のオープンソースアプリでテストを行っています。https://github.com/gabrieldonadel/expo-brownfield-experiments でいくつかの例を確認できます。