React Native ライブラリの新しいアーキテクチャへの移行支援
要約:React Native の新しいアーキテクチャをサポートするリソースの改善に取り組んでいます。アプリの移行を支援するリポジトリ(RNNewArchitectureApp)とライブラリのリポジトリ(RNNewArchitectureLibraries)を既にリリースしています。また、ウェブサイト上の新しいアーキテクチャガイドを改訂し、新しいアーキテクチャに関する質問に答えるためのGitHubワーキンググループを作成しました。
はじめに
この記事では、ネイティブモジュールとネイティブコンポーネントを新しいアーキテクチャの相当物であるTurboModuleとFabric コンポーネントに移行するのを支援するツールとリソースに関するアップデートを共有しています。
React Native ユーザーは、アプリの構築に膨大な数のオープンソースライブラリを活用しています。完全で一貫性のあるエコシステムを実現するには、これらのライブラリを移行して、誰もが新しいアーキテクチャによって実現される機能とパフォーマンスの向上から恩恵を受けられるようにする必要があります。
ライブラリ開発者が新しいアーキテクチャに移行するのをサポートするために、現在取り組んでいる内容を以下に示します。
- ドキュメント:ウェブサイト上の新しいアーキテクチャガイドを拡張して、新しいアーキテクチャの概念とコンポーネントの開発方法についてさらに詳しく説明します。
- 移行例:React Native アプリを新しいアーキテクチャに移行する方法を示す2つのリポジトリ(RNNewArchitectureApp)、および両方のアーキテクチャで動作するFabric コンポーネントとTurboModuleを作成する方法を示すリポジトリ(RNNewArchitectureLibraries)を設定しました。
- サポート:今年初めに、新しいアーキテクチャに関する議論と質問に特化したGitHubワーキンググループを作成しました。
この記事では、これらのリソースについてさらに詳しく説明し、最も効率的に使用する方法を詳しく説明します。最後に、最も使用されている React Native ライブラリの現在の移行状況のスナップショットを示します。
ドキュメント
過去 6 か月間で、新しいアーキテクチャの採用に関するガイドとFabricに関するアーキテクチャの詳細な解説を追加しました。これを拡張して、TurboModule の作成、CodeGen の理解などに関するガイドやドキュメントをさらに追加する予定です。0.70 リリースまでに共有できるアップデートを予定しています。
現在、新しいアーキテクチャガイドでは、アプリの移行方法とライブラリの移行方法について説明し、新しいアーキテクチャを適切にサポートする方法について説明しています。
このガイドの進化に興味がある場合、またはフィードバックがある場合は、このプルリクエストをフォローできます。
移行例
コードで確認したい開発者のために、2 つのサンプルリポジトリを用意しました。
RNNewArchitectureApp
このリポジトリは、React Native バージョン 0.67 のレガシーアーキテクチャから新しいアーキテクチャと最新の React Native バージョンへのアプリ、ネイティブモジュール、ネイティブコンポーネントの移行方法を示すために作成されました。各コミットは、個別の移行ステップに対応しています。

リポジトリは次のように構成されています。
- main ブランチにはコードはありませんが、他のブランチを紹介する README.md があります。
- 特定のバージョンの RN から別のバージョンへの移行を示す複数の移行ブランチ。
一部の移行ブランチには、RUN.md ファイルもあり、各コミットで適用された正確なステップをより人間が読みやすい形式で説明しています。
この例を最新の安定版リリースに最新の状態に保ち、リリースするマイナーリリースごとに移行を追加する予定です。いずれかのステップに問題がある場合は、リポジトリに問題を報告してください。これは、ほとんどの React Native ユーザーが新しいアーキテクチャに移行したと確信できるようになるまで維持されます。
RNNewArchitectureLibraries
同様に、このリポジトリは、TurboModuleとFabricコンポーネントを作成する方法を段階的に説明しています。 新アーキテクチャと従来のアーキテクチャとの後方互換性を確保することに重点を置いています。
このリポジトリは、以前のリポジトリと同様の方法で構成されています。
- main ブランチにはコードはありませんが、他のブランチを紹介する README.md があります。
- TurboModuleとFabricコンポーネントの開発方法を示す他のブランチ。
この例は、React Nativeの新しいリリース(特にライブラリの開発に影響を与えるリリース)に合わせて更新し続け、高度な機能の使用例(コマンド、イベントエミッタ、カスタム状態の実装など)を追加する予定です。エラーを見つけた場合は、例のレポジトリに問題を報告してください。
サポート
コミュニティが質問をし、新アーキテクチャに関する最新情報を入手できる専用のワーキンググループを作成しました。ライブラリのメンテナーの方は、この貴重なリソースを利用して質問への回答を見つけ、また、お客様の要件を私たちに知らせることができます。参加するには、この手順に従ってください。どなたでも歓迎します。
ワーキンググループはいくつかのセクションに分けられています。
- お知らせ:RN新アーキテクチャのロールアウトに関するマイルストーンと重要な更新情報を共有する場所
- 詳細解説:詳細な解説と技術的なトピックについてチャットする場所
- ドキュメント:新アーキテクチャのドキュメントと移行資料についてチャットする場所
- ライブラリ:サードパーティライブラリとその新アーキテクチャへの移行についてチャットする場所
- Q&A:新アーキテクチャに関するトピックについてコミュニティに助けを求める場所
- リリース:リリース固有のバグとビルドの問題についてチャットする場所
このグループを効果的に使用するには
- ライブラリがライブラリセクションにリストされていることを確認してください。 これにより、ライブラリの移行状況の更新情報を共有し、ライブラリアーが直面している課題を理解し、より良いサポートを提供するのに役立ちます。
- ブロッカーに遭遇し、サポートが必要な場合は、Q&Aのセクションを活用してください。 当社のチームとコミュニティの専門家が監視しており、最善を尽くしてサポートします。
- 影響を与える可能性のあるトピックについては、他のセクションにも注目してください。 新しいリリースでは、まさに探していたAPIが導入される可能性があります。GitHubを介して特定のディスカッションを購読できます。
新アーキテクチャがデフォルトで有効になり、主要なライブラリがすべて移行されるまで、このグループをサポートする予定です。
人気ライブラリの移行状況
ライブラリのメンテナーは、ワーキンググループで移行作業の状況を共有しており、概要を簡単に提供したいと思います。
- react-native-gesture-handler:✅ 移行済み
- react-native-navigation:🏃♂️ 進行中
- react-native-pager-view:🏃♂️ 進行中
- react-native-reanimated:✅ 移行済み。パフォーマンスのテストとプロファイリング中です。
- react-native-screens:🏃♂️ 進行中
- react-native-slider:🎬 開始済み
- react-native-template-new-architecture:✅ 移行済み。徐々に多くの関連ライブラリを採用/テストしています。
- react-native-template-typescript:✅ 移行済み
- react-native-webview:🎬 開始済み
次のステップ
私たちは、React Nativeコミュニティによる新アーキテクチャの採用を支援することに注力しています。具体的には、以下を続けます。
- ワーキンググループで最善を尽くしてサポートを提供します。
- RNNewArchitectureリポジトリで、新アーキテクチャで素晴らしい結果を達成する方法に関する例をさらに提供します。
- 新アーキテクチャに関する明確で最新のドキュメントを提供します。
- ワーキンググループで、重要なReact Nativeライブラリの移行状況を追跡します。
- 開発者にとっての移行パスを簡素化します。
さらに、React Native 0.69は、新アーキテクチャの採用に関して、アプリ開発者とライブラリ開発者向けのDevXを改善して提供します。0.69.0リリースに関する詳細情報はこちらをご覧ください。
新アーキテクチャで一緒に構築できることに興奮しています!