長らく、Slackチャンネルや開発者フォーラムで囁かれる伝説の獣のように感じられていた。React Nativeの新アーキテクチャ——JSI、Fabric、TurboModulesという三位一体——は、常に「すぐそこ」にありながら、なかなか姿を現さなかったのだ。多くの開発者が「 vaporware（実体のない企画）だ」と揶揄した。だが、我々は今、ここにいる。リリースされただけでなく、新規プロジェクトではデフォルト採用。これは単なるマイナーチェンジではない。プラットフォームの根本的なシフトであり、JavaScriptとネイティブコードが織りなすモバイル体験の基盤を完全に刷新する、まさに地殻変動級のインパクトだ。
誰もが期待し、あるいは望んでいたのは、スピードだ。より高速なアプリ、より滑らかなアニメーション、ジャギー（描画の遅延）の減少。それは確かに実現したが、それ以上に、我々のモバイル体験を形作る二つのコード世界を結びつけるパイプラインそのものが、深遠な再設計を遂げたのだ。例えるなら、馬車からリニアモーターカーへの進化。単に速くなっただけでなく、移動という概念そのものが新しくなったと言える。
旧来の方法は？ブリッジだ。二つの部屋の間で、手書きのメモを運ぶ、非常に丁寧で慎重なメッセンジャーだと考えてほしい。JavaScriptがメッセージを書き、封筒（JSONシリアライズ）に入れてブリッジに送る。ブリッジはそれを丁寧に開封し（デシリアライズ）、ネイティブ側に届ける。ネイティブ側が作業を終え、返事を書き、それを封筒に入れて返送する。このやり取りが、毎回延々と繰り返された。このシステムは機能的ではあったものの、三つの悩ましい問題を抱えていたのだ。
デフォルトで非同期、必要に迫られて同期。時として、すぐに答えが欲しい、という場面がある。例えば、アニメーションの前に要素の正確なピクセル位置を知る必要がある場合だ。ブリッジは、遅い非同期の往復を強いるか、あるいは古いキャッシュデータに依存するような、壊れやすい回避策を必要とした。理想的とは言えない。
シリアライズのオーバーヘッド。メッセージの、文字通り、全てだ。JSONに変換し、また戻すという手間を惜しまずにやらねばならなかった。スクロール、ジェスチャー、毎フレーム発火するアニメーションといった高頻度のイベントでは、これが積み重なる。まるで、「こんにちは」と言うためだけに、メッセンジャーに小説を電報に翻訳させ、送り、戻ってきて、再び翻訳させるようなものだ。
イージア（早期）初期化。アプリが使用するかどうかにかかわらず、全てのネイティブモジュールが起動時に読み込まれていた。サードパーティSDKが詰め込まれた大規模アプリでは、痛ましいほど長い初期ロード時間につながっていた。これは、後で必要になるかもしれないという、家の中のあらゆる物をスーツケースに詰め込むようなものだった。
ここで、魔法が起こる：JSIだ。JavaScript Interface。これはブリッジを完全にぶち壊す。代わりに、JavaScriptはネイティブオブジェクトへの直接参照を保持し、ネイティブメソッドを同期的に、シリアライズなしで呼び出せるようになる。JavaScriptがネイティブの部屋に直接手を伸ばし、ネイティブ関数の肩を叩いて、即座に答えを得るようなものだ。待つ必要はない。翻訳も不要だ。
JavaScriptの視点から見れば、JSI対応の関数を呼び出すのは、通常のJavaScript関数を呼び出すのと同じ感覚だ——なぜなら、実質的にそうだからだ。ネイティブ実装は、JSIホストオブジェクトプロトコルを介して、JavaScriptスレッド上で同期的に実行される。
これが、TurboModulesが構築される基盤だ。TurboModulesは、ネイティブコードにアクセスするための新しい方法だ。これらは、遅延ローディングと型安全性という、二つの巨大なメリットをもたらす。遅延ローディングとは、モジュールが実際に使用されるまで起動しないということだ。つまり、アプリに50個のネイティブモジュールがあっても、ある画面で5個しか使わない場合、初期化されるのはその5個だけだ。起動時間は劇的に短縮される。型安全性は、Codegenを通じて実現され、型不一致による厄介な実行時クラッシュを過去のものにする。仕様はTypeScriptまたはFlowで記述され、Codegenが自動的にネイティブコードを生成するため、JavaScriptから送信されたものがネイティブ側で期待されるものと完全に一致することが保証される。
これは、高度なスキルを持ち、バイリンガルなパーソナルアシスタント（JSI）がいるようなものだ。彼は瞬時に情報を取得できるだけでなく、細部に至るまであなたの特定のニーズを理解し（TurboModulesとCodegen）、誤解がないことを保証してくれる。これは単なるアップグレードではない。クロスプラットフォーム開発でかつて不可能と思われていたパフォーマンスを解き放つ、パラダイムシフトだ。非同期の憶測の時代は終わった。直接的でパフォーマンスの高いインタラクションの時代が幕を開けたのだ。
では、Fabricはどうだろうか？FabricはReact Nativeの新しいレンダリングシステムだ。あなたのコンポーネントツリーをネイティブUI要素に変換するビジュアルエンジンである。旧レンダラーは同期型でシングルスレッドだった。しかし、Fabricは並行処理のために構築されている。レンダリングタスクを優先順位付けし、一時停止・再開でき、さらには異なるスレッドでレンダリングすることも可能だ。これは、複雑なUIやアニメーションにとって計り知れないメリットであり、はるかに滑らかなビジュアル体験を可能にする。一枚の壁画を描こうとする、一人で過労気味のアーティストから、それぞれ異なる部分に特化した、同時に効率的に作業できる協力的なアーティストのチームへのアップグレードを想像してほしい。
既存のアプリにとって、これはスムーズな乗り心地か？それが100万ドルの質問だ。大規模で確立されたアプリを新アーキテクチャに移行するのは、週末プロジェクトでは済まない。新しいコンポーネントの理解、一部のネイティブモジュールインタラクションの書き換え、そして徹底的なテストが必要となる。ドキュメントでも明確にされている：これは移行であり、スイッチをパチンと切り替えるようなものではない。チームは計画を立て、リソースを割り当て、関わる複雑さに対処する準備をする必要がある。
オープンソース開発者にとって、これは何を意味するのか？それは新しい機会を意味する。新アーキテクチャは、より高速で、より強力なライブラリを構築するための招待状だ。それはまた、既存のライブラリを適応させることも意味する。React Native自体に貢献している人々にとっては、パフォーマンス最適化の新しいフロンティアだ。基盤となるメカニズムは、これまで以上にアクセスしやすく、強力になっている。クロスプラットフォームアプリケーションが達成できることの境界線を押し広げるチャンスだ。
JSIとは具体的に何？
JSI、またはJavaScript Interfaceは、古い非同期ブリッジを置き換えるコアコンポーネントだ。これにより、JavaScriptはネイティブメソッドを直接かつ同期的に呼び出し、ネイティブオブジェクトへの参照を保持できるようになり、シリアライズのオーバーヘッドを排除し、リアルタイムの双方向通信を可能にする。
なぜTurboModulesは古いNativeModulesより優れているのか？
TurboModulesは遅延初期化を提供し、初めて使用されるまでロードされないため、アプリの起動時間を大幅に改善する。また、Codegenを通じて型安全性をもたらし、JavaScriptとネイティブコード間のデータ型の不一致による実行時エラーを防ぐ。
新アーキテクチャは全てのパフォーマンス問題を解決するか？
JSI、TurboModules、Fabricを備えた新アーキテクチャは、特にJSとネイティブコード間の通信やレンダリングにおいてパフォーマンスを劇的に向上させるが、あらゆるパフォーマンスボトルネックに対する特効薬ではない。開発者は、最良の結果を得るために、JavaScriptコードとネイティブ実装を最適化し続ける必要がある。
FabricはUIパフォーマンスにどう影響するか？
FabricはReact Nativeの新しい並行レンダリングシステムだ。レンダリングタスクの優先順位付け、一時停止、再開を可能にすることでUIスレッドをより応答性の高いものにし、特に複雑なUIでより滑らかなアニメーションとより流動的なユーザー体験をもたらす。
移行の課題は？
既存のReact Nativeアプリを新アーキテクチャに移行するのは複雑な場合がある。互換性と安定性を確保するためには、慎重な計画、ネイティブモジュールの潜在的なリファクタリング、そして徹底的なテストが必要だ。大規模または成熟したアプリケーションにとっては、かなりの労力を要する作業となる。
🧬 関連インサイト
よくある質問**
React Nativeの新アーキテクチャは具体的に何をするのか？ 古い非同期ブリッジを、直接的で同期的なJavaScript Interface（JSI）に置き換え、遅延ロードされるTurboModulesで起動時間を改善し、並行レンダリングシステムであるFabricでUIをより滑らかにする。
これで私のReact Nativeアプリはすぐに速くなるか？ ネイティブモジュール通信やUIレンダリングにおけるパフォーマンスの大幅な向上のための基盤を提供する。実際の速度向上は、アプリの具体的なユースケースと、新アーキテクチャ内でコードがどれだけ最適化されているかに依存する。
アプリ全体を書き直す必要があるか？ ほとんどのアプリでは、段階的な移行が可能だ。TurboModulesとJSIとの互換性を確保するために、個々のネイティブモジュールを更新または書き直す必要が出てくるだろう。完全な書き直しではないが、専念した努力が必要だ。
