😉
ReactNative(Expo): RNのアーキテクチャとOTAの仕組みを振り返る
はじめに
ReactNative, Expoのアーキテクチャや最近話題？のLynxとはなんぞやということで軽くまとめました。
なんか便利だなぁと思いつつもなんで動くのかっていう部分がわかりにくかったり登場人物も多いため忘れてる人とかは思い出してみてください。
Expo + Hermes アーキテクチャ
React Native Expoアプリでは、以下のような構成でアプリが動作しています。
各層の役割：
- JavaScript Code：Reactで記述したUIやロジック。
- Hermes：Facebook製の高速JSエンジン。Expo SDKで有効化可能。
- React Native Core：JSとネイティブをつなぐ非同期ブリッジ。
- Native Modules：カメラ、位置情報、通知などのネイティブ機能。
- iOS / Android SDK：OSごとのUIコンポーネントやAPI。
Expoはこれらを統合し、ビルド時に必要なネイティブモジュールを自動的に含めてくれるラッパーの役割を果たします。
🚀 OTA（Over-the-Air）アップデートの仕組み
Expoアプリは、アプリを再リリースせずにJavaScriptコードだけを更新することができます。これが「OTAアップデート」です。
OTAが可能な理由
- アプリ起動時に使用するJSバンドルは、あらかじめ含まれている「初期バージョン」に加え、後からCDNからダウンロードした最新版に置き換えられる構成になっているからです。
JSバンドルあるのになんで更新できるの？ってところはこちらの構成で解消できています。
フロー図
動作の流れ
- 初回インストール時は、アプリパッケージに含まれたJSバンドル（Hermesのバイトコード）が使われる。
- 起動時に
expo-updatesがCDNをチェック。 - 新しいバンドルがあれば端末にキャッシュ。
- 次回起動時にはキャッシュされた新しいJSバンドルが使われる。
OTAで変更できるもの
| 項目 | OTAで変更可能？ |
|---|---|
| JavaScriptロジック | ✅ 可能 |
| 画面UI・状態管理 | ✅ 可能 |
| Expo SDKのバージョン | ❌ 不可（再ビルド必要） |
| 新しいネイティブAPIの追加 | ❌ 不可（再ビルド必要） |
🆚 Lynxとの違い
TiktokのBytedanceさんのOSSで話題？のLynx は、Expoが新しくリリースした ネイティブに近いアプリ開発体験を目指す開発モデルです。以下はExpo（Classic）との主な違いです。
以下の記事はFlutterも含めて割と強めのクロスプラットフォーム開発用ライブラリ(FW)について書かれているので軽くみてみても良いかも。
| 比較項目 | Expo（Classic） | Lynx |
|---|---|---|
| 開発モデル | JS中心 + OTA | JS中心 + ネイティブ拡張性重視 |
| OTA対応 | ✅ 完全対応 | 🔶 一部制限あり（ネイティブ更新も多い） |
| ネイティブモジュール追加 | ❌ 再ビルド必要 | ✅ 柔軟にカスタム可 |
| 配布 | App Store/Play Store | App Store/Play Store（将来的に別配布手段も想定） |
| パフォーマンス | Hermesで高速化 | TurboModulesやJSI前提で更に高速化 |
おわりに
Expo + Hermes構成では、React Nativeアプリを高速かつ柔軟に運用できます。特にOTAアップデートは、ユーザー体験を壊さずに新機能や修正を迅速に届けられる非常に良いソリューション。
将来的にLynxのようなより柔軟なモデルも登場しており、用途に応じて選ぶことが重要になってきているが、流石に追いきれていないのでまだしばらくReact Nativeかなぁ
Discussion