React Native新アーキテクチャ実践：FabricレンダラーとTurboModulesの5つのコアパターン

React Native新アーキテクチャ：パフォーマンス飛躍の三本柱

旧アーキテクチャの非同期Bridgeのシリアライズオーバーヘッド、レイアウト計算のジャンク、ネイティブモジュール拡張の制限——React Nativeのパフォーマンスボトルネックは長年批判されてきました。新アーキテクチャはFabricレンダラー、TurboModules、Codegenの3つのコアにより、同期JSI呼び出し、並行レンダリング、型安全なブリッジを実現。2026年、React Native新アーキテクチャはデフォルトとなり、移行はもはや選択肢ではありません。

本記事では5つのコアパターンを通じて、Fabricレンダリング→TurboModules→Codegen→移行戦略→パフォーマンス最適化のフルチェーン実践を解説します。

コア概念

概念	説明
Fabric	旧UI Managerに代わる新レンダラー
TurboModules	NativeModulesに代わる新ネイティブモジュールシステム
JSI	JavaScript Interface、C++同期呼び出しレイヤー
Codegen	C++/Java/ObjCブリッジコードの自動生成
Shadow Tree	Fabricの仮想ツリー、並行計算をサポート
Yoga	クロスプラットフォームレイアウトエンジン
Event Pipeline	優先度スケジューリング付き新イベントシステム
State Update	Fabric状態更新、バッチコミット

問題分析：新アーキテクチャ移行の5つの課題

C++知識の壁：TurboModulesとFabricにC++コードが必要
レガシーライブラリ互換性：多くのサードパーティライブラリが未対応
複雑なCodegen設定：型仕様とコード生成の学習曲線が急
デバッグ体験の変化：新アーキテクチャのデバッグ方法が旧と異なる
段階的移行の困難さ：新旧アーキテクチャ混在時の問題

ステップバイステップ：5つの新アーキテクチャ実装パターン

パターン1：TurboModuleネイティブモジュール

import type { TurboModule } from 'react-native';
import { TurboModuleRegistry } from 'react-native';

export interface Spec extends TurboModule {
  add(a: number, b: number): Promise<number>;
  multiply(a: number, b: number): number;
  getConstants: () => { PI: number; VERSION: string; };
}

export default TurboModuleRegistry.getEnforcing<Spec>('Calculator');

パターン2：Fabricカスタムコンポーネント

import type { HostComponent } from 'react-native';
import codegenNativeComponent from 'react-native/Libraries/Utilities/codegenNativeComponent';

export interface NativeProps {
  text: string;
  fontSize?: number;
  color?: string;
  maxLines?: number;
}

export default codegenNativeComponent<NativeProps>('CustomText');

パターン3：Codegen設定と型仕様

{
  "codegenConfig": {
    "name": "MyAppSpec",
    "type": "modules",
    "jsSrcsDir": "src/specs",
    "android": { "javaPackageName": "com.example.specs" }
  }
}

パターン4：イベント発行と優先度スケジューリング

private void emitOnPress(ReactContext reactContext, int viewId) {
  reactContext.getJSModule(RCTEventEmitter.class).receiveEvent(
    viewId, "onPress", Arguments.createMap()
  );
}

パターン5：段階的移行とInterop Layer

const isNewArch = global.__turboModuleProxy != null;

const isTurbo = global.__turboModuleProxy != null;
const MyModule = isTurbo
  ? TurboModuleRegistry.getEnforcing<Spec>('MyModule')
  : NativeModules.MyModule;

落とし穴ガイド

落とし穴1：TurboModule戻り値型の不一致

// ❌ 間違い：Codegen仕様と実装が不一致
export interface Spec extends TurboModule {
  getData(): string; // 同期宣言
}

// ✅ 正しい：一致させる
export interface Spec extends TurboModule {
  getData(): Promise<string>; // 非同期宣言
}

落とし穴2：Fabricコンポーネントの未登録

// ✅ 正しい：Packageに登録
public class MyAppPackage extends BaseReactPackage {
  @Override
  public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
    return List.of(new CustomTextManager());
  }
}

落とし穴3：C++コンパイルエラー

# ✅ 正しい：CMakeを適切に設定
target_include_directories(mymodule PRIVATE
  ${REACT_NATIVE_DIR}/ReactCommon/jsi
)

落とし穴4：スレッドセーフの無視

// ❌ 間違い：JSスレッド外でJS値を操作
std::thread([&rt]() {
  rt.global().setProperty(rt, "result", 42); // クラッシュ！
}).detach();

// ✅ 正しい：JSIディスパッチャでJSスレッドに戻す
std::thread([this]() {
  runOnJSQueue([this](jsi::Runtime& rt) {
    rt.global().setProperty(rt, "result", 42);
  });
}).detach();

落とし穴5：旧アーキテクチャフォールバックの未処理

// ❌ 間違い：新アーキテクチャが常に利用可能と仮定
const module = TurboModuleRegistry.getEnforcing<Spec>('MyModule');

// ✅ 正しい：新旧両アーキテクチャに対応
const isTurbo = global.__turboModuleProxy != null;
const MyModule = isTurbo
  ? TurboModuleRegistry.getEnforcing<Spec>('MyModule')
  : NativeModules.MyModule;

エラートラブルシューティング

#	エラー	原因	解決方法
1	`TurboModuleRegistry: MyModule could not be found`	ネイティブモジュール未登録	Package登録とモジュール名を確認
2	`Codegen error: type mismatch`	TS仕様と実装の不一致	Codegen型定義とネイティブ実装を統一
3	`C++ compilation error: jsi.h not found`	ヘッダーファイルパスエラー	CMake includeパスを設定
4	`ViewManager not found`	Fabricコンポーネント未登録	PackageにViewManagerを登録
5	`Invariant Violation: new arch`	新アーキテクチャ未有効	newArchEnabled=trueを設定
6	`Event delivery failed`	イベント名の不一致	イベント名と登録名が一致するか確認
7	`JSI binding failed`	C++バインディング初期化失敗	onLoadとinstall関数を確認
8	`Shadow node creation failed`	Yogaレイアウト計算エラー	カスタムレイアウトプロパティを確認
9	`Interop layer crash`	レガシーモジュールブリッジクラッシュ	レガシーモジュールをアップグレード
10	`Build failed: NDK not found`	Android NDK未設定	NDKをインストールしANDROID_NDKを設定

高度な最適化

JSI直接ArrayBuffer操作：ゼロコピーでバイナリデータ転送、画像/音声処理に最適
Fabric Concurrent Layout：並行レイアウト計算を有効にしメインスレッドブロックを削減
Lazy TurboModule読み込み：ネイティブモジュールをオンデマンドでロード、起動時間を短縮
カスタムShadowNode：ウォーターフォール、仮想リストなどの複雑レイアウトを実装
C++状態共有：JSIでC++状態を共有し、シリアライズオーバーヘッドを回避

比較分析

次元	新アーキテクチャ(Fabric)	旧アーキテクチャ(Bridge)	Flutter	KMP Compose
レンダリングパフォーマンス	⭐⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐
JS-Native通信	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐
型安全性	⭐⭐⭐⭐⭐	⭐⭐	⭐⭐⭐⭐	⭐⭐⭐⭐⭐
エコシステム互換性	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐
学習曲線	⭐⭐⭐	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐
クロスプラットフォーム一貫性	⭐⭐⭐⭐	⭐⭐⭐	⭐⭐⭐⭐⭐	⭐⭐⭐⭐

まとめ：React Native新アーキテクチャはFabric、TurboModules、Codegenにより、旧アーキテクチャのパフォーマンスボトルネックを根本的に解決します。新アーキテクチャはネイティブパフォーマンスを追求するReact Nativeプロジェクトに適しており、特にインタラクション集約型アプリに最適です。2026年、新アーキテクチャはデフォルトとなっており、継続的なパフォーマンス改善とエコシステムサポートのために早期移行を推奨します。

オンラインツール推薦

JSONフォーマッター：/ja/json/format
Hash計算：/ja/encode/hash
cURL to Code：/ja/dev/curl-to-code