メインコンテンツへスキップ

React Nativeライブラリの新アーキテクチャへの移行支援

·8分で読めます
Riccardo Cipolleschi
Riccardo Cipolleschi
ソフトウェアエンジニア @ Meta

tl;dr: React Native New Architectureをサポートするリソースの改善に取り組んでいます。すでに、アプリの移行を支援するリポジトリ (RNNewArchitectureApp) と、ライブラリの移行を支援するリポジトリ (RNNewArchitectureLibraries) をリリースしました。また、WebサイトのNew Architectureガイドも刷新しており、New Architectureに関する質問に答えるためのGitHubワーキンググループも設立しました。

はじめに​

この記事では、Native ModulesとNative Componentsを、New Architectureの対応物であるTurboModuleとFabric Componentsに移行するのに役立つツールとリソースに関する最新情報をお伝えします。

React Nativeユーザーは、アプリを構築するために膨大な数のオープンソースライブラリを利用しています。完全で一貫性のあるエコシステムのためには、これらのライブラリが移行し、New Architectureがもたらす機能とパフォーマンスの向上を誰もが享受できることが必要です。

ライブラリ開発者がNew Architectureに移行するのをサポートするために取り組んでいることは次のとおりです。

  • ドキュメント: WebサイトのNew Architectureガイドを拡張し、New Architectureのより多くの概念と、コンポーネントを開発する方法について説明します。
  • 移行例: React NativeアプリをNew Architectureに移行する方法 (RNNewArchitectureApp) と、両方のアーキテクチャで動作するFabric ComponentとTurboModuleを作成する方法 (RNNewArchitectureLibraries) を示す2つのリポジトリをセットアップしました。
  • サポート: 今年初め、New Architectureに関する議論と質問に特化したGitHubワーキンググループを設立しました。

この記事では、これらのリソースをさらに深く掘り下げ、それらを最も効率的に使用する方法を詳しく説明します。最後に、最も使用されているReact Nativeライブラリの現在の移行状況のスナップショットを提供します。

ドキュメント​

過去6か月間で、New Architectureを採用するためのガイドと、Fabricに関するアーキテクチャ詳細を追加しました。これを拡張して、TurboModuleの作成、CodeGenの理解などに関するより多くのガイドとドキュメントを含める予定です。0.70リリースまでに共有するアップデートを予定しています。

現在、New Architectureガイドでは、アプリの移行方法と、New Architectureを適切にサポートするためのライブラリの移行方法について説明しています。

このガイドの進化に興味がある場合、またはフィードバックがある場合は、このプルリクエストでフォローできます。

移行例​

コードを追いかけたい開発者のために、2つの例のリポジトリを用意しました。

RNNewArchitectureApp​

このリポジトリは、React Nativeバージョン0.67のレガシーアーキテクチャから、New Architectureと最新バージョンのReact Nativeに、アプリ、ネイティブモジュール、ネイティブコンポーネントを移行する方法を示すために作成されました。各コミットは、分離された移行ステップに対応しています。

Example steps to migrate an app
RNNewArchitectureAppリポジトリでの移行のコミットリスト

リポジトリは次のように構成されています。

  • mainブランチにはコードはありませんが、他のブランチを宣伝するREADME.mdがあります。
  • 特定のRNバージョンから別のRNバージョンへの移行を示すいくつかの移行ブランチ。

一部の移行ブランチには、すべてのコミットで適用された正確な手順をより人間が読みやすい形式で説明するRUN.mdファイルも含まれています。

この例は、最新の安定版リリースに常に最新の状態に保ち、リリースするすべてのReact Nativeマイナーリリースへの移行を追加する予定です。いずれかの手順に問題がある場合は、リポジトリにissueを提出してください。これは、ほとんどのReact NativeユーザーがNew Architectureに移行したという合理的な感覚が得られるまで続きます。

RNNewArchitectureLibraries​

同様に、このリポジトリは、TurboModuleとFabric Componentを作成する方法に関するステップバイステップのガイドを提供します。New Architectureとレガシーアーキテクチャ間の後方互換性を確保することに重点を置いています。

リポジトリは以前のものと同様の方法で構成されています。

  • mainブランチにはコードはありませんが、他のブランチを宣伝するREADME.mdがあります。
  • TurboModulesとFabric Componentsの開発方法を示すその他のブランチ。

この例は、特にライブラリ開発に影響を与えるReact Nativeの新しいリリースに合わせて更新し、高度な機能の使用方法 (例: コマンドの実装、イベントエミッター、カスタム状態) に関するさらに多くの例を追加する予定です。エラーに気付いた場合は、例のリポジトリにissueを提出してください。

サポート​

コミュニティが質問したり、New Architectureに関する最新情報を入手したりできる場を提供するために、専用のワーキンググループを作成しました。ライブラリのメンテナーであれば、これは質問への回答を見つけたり、私たちの要件を把握したりするための貴重なリソースです。参加するには、これらの指示に従ってください。どなたでも歓迎します。

ワーキンググループはいくつかのセクションに分かれています。

  • お知らせ: RN New Architectureの展開に関するマイルストーンや重要なアップデートを共有する場所
  • 詳細分析: 詳細分析や技術的な特定のトピックについてチャットする場所
  • ドキュメント: New Architectureのドキュメントと移行資料についてチャットする場所
  • ライブラリ: サードパーティライブラリとNew Architectureへの移行状況についてチャットする場所
  • Q&A: New Architectureのトピックについてコミュニティに助けを求める場所
  • リリース: リリース固有のバグやビルドの問題についてチャットする場所

このグループを効果的に使用するには

  • ライブラリがライブラリセクションにリストされていることを確認してください。これにより、ライブラリの移行状況を共有し、ライブラリ作成者が直面している問題を理解して、より良いサポートを提供できるようになります。
  • ブロックに直面し、サポートが必要な場合は、Q&Aセクションを活用してください。私たちのチームとコミュニティの専門家が監視し、最善の努力でサポートします。
  • 他のセクションで影響する可能性のあるトピックに目を光らせてください。新しいリリースによって、探していたAPIがまさに導入される可能性があります。GitHubから特定の議論を購読できます。

このグループは、New Architectureがデフォルトで有効になり、すべての主要なライブラリがそれに移行されるまでサポートする予定です。

ライブラリのメンテナーは、ワーキンググループで移行の進捗状況を共有しており、その概要を簡単にお伝えしたいと思います。

次のステップ​

React NativeコミュニティによるNew Architectureの採用を支援することに力を入れています。具体的には、引き続き次のことを行います。

  • ワーキンググループで最善の努力によるサポートを提供します。
  • RNNewArchitectureリポジトリで、New Architectureで素晴らしい結果を達成する方法に関するさらに多くの例を提供します。
  • New Architectureに関する明確で最新のドキュメントを提供します。
  • ワーキンググループで、主要なReact Nativeライブラリの移行状況を追跡します。
  • 開発者向けの移行パスを簡素化します。

さらに、React Native 0.69には、New Architectureの採用に向けて、アプリ開発者とライブラリ開発者向けの改善された開発者体験が搭載されます。0.69.0リリースに関する詳細情報はこちらで確認できます。

New Architectureで何が構築できるかを楽しみにしています！