React Nativeのアーキテクチャはどのように機能していますか（ブリッジ vs 新しいアーキテクチャ）？

Question

Accepted Answer

React Nativeは**JavaScript**と**ネイティブ**コードを実行し、これらが通信する必要があります。元のアーキテクチャは非同期の**ブリッジ**を使用していました。**新しいアーキテクチャ**（JSI、TurboModules、Fabric）はより高速な同期通信を実現します。このアーキテクチャを理解することで、React Nativeの動作とパフォーマンスが明確になります。

## 元のアーキテクチャ：ブリッジ

```text
React Native runs:
  → a JS THREAD (your React/JS code) and the NATIVE side (UI, native modules)
  → they communicate over a BRIDGE: messages are SERIALIZED (to JSON), passed ASYNC,
    and deserialized on the other side
Limitations:
  ✗ ASYNCHRONOUS only (can't call native synchronously)
  ✗ SERIALIZATION overhead; the bridge can be a BOTTLENECK with heavy traffic
  ✗ e.g. fast scrolling/animations passing data over the bridge → jank
```

## 新しいアーキテクチャ（JSI、TurboModules、Fabric）

```text
The NEW ARCHITECTURE replaces the bridge:
  JSI (JavaScript Interface) → JS can call native code DIRECTLY and SYNCHRONOUSLY
    (no serialization bridge) → much faster JS↔native interop
  TURBOMODULES → native modules loaded lazily, via JSI (faster, on-demand)
  FABRIC → the new rendering system → better, more efficient UI rendering; sync layout
  CODEGEN → type-safe JS↔native interfaces
→ Result: better performance, less overhead, synchronous calls, smoother UI.
```

## なぜ重要なのか（実務的な観点）

```text
→ Explains React Native's PERFORMANCE characteristics (why bridge traffic was costly)
→ The new architecture (default in recent RN) improves performance and interop
→ Informs optimization (minimize bridge crossings on the old architecture; native-thread
  animations) and understanding of how RN executes
```

## なぜ重要なのか

React Nativeのアーキテクチャを理解することは、シニアレベルの貴重な知識です。なぜなら、**React Nativeの動作とパフォーマンス特性を説明**し、アプリケーションの推論と最適化の能力を深めるからです。

基本的な構造——**JSスレッド**（あなたのコード）と**ネイティブ側**（UI、ネイティブモジュール）を実行し、これらが**通信する**必要があるReact Native——は、React Nativeがどのように機能するかを理解するための鍵となります。

**元のブリッジアーキテクチャ**を理解する（JSとネイティブが非同期ブリッジ経由で通信し、メッセージをJSONにシリアライズして交換する）ことで、React Nativeの歴史的なパフォーマンス特性と制限が説明されます。通信は非同期のみで、シリアライズのオーバーヘッドがあり、ブリッジは**トラフィックが多い場合にボトルネックになる**可能性があります（高速スクロールやアニメーション時にデータを交換する場合、ジャンクが発生する可能性があります）。これが**ブリッジ交差を最小化し、ネイティブスレッドでアニメーションを実行することが重要な最適化だった理由**です。これはアーキテクチャを実務的なパフォーマンスアドバイスと結び付けています。

**新しいアーキテクチャ**（シリアライズブリッジなしで直接的で同期的なJS↔ネイティブ呼び出しを可能にする**JSI**、遅延ネイティブモジュール読み込みのための**TurboModules**、より良いレンダリングのための**Fabric**、型安全なインターフェースのためのCodegen）を理解することはますます重要になっています。これがデフォルトになりつつあるためです。パフォーマンスを向上させ、オーバーヘッドを削減し、同期呼び出しを可能にし、よりスムーズなUIを生成し、React Nativeの大きな進化を表しています。

このアーキテクチャを理解する（ブリッジと新しいJSIベースのアーキテクチャ）ことで、**React Nativeのパフォーマンスを説明**し（ブリッジが重要だった理由）、**最適化を通知**し（アーキテクチャから従う実践）、React Nativeがどのように実行されるかを明確にします。これはReact Nativeをブラックボックスから理解可能なシステムへと変える変革です。

アーキテクチャ（ブリッジと新しいJSIベースのアーキテクチャ）を理解することで、React Nativeのパフォーマンス特性を説明し、最適化を通知し、プラットフォーム進化の重要な認識を反映しており、また、React Nativeを使用する者から理解する者へと高めるため、React Nativeのアーキテクチャを理解することはシニアレベルの貴重な知識です。その動作とパフォーマンスを説明し、最適化を通知し、シニアReact Nativeロールに期待される深さと認識を反映しています。