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

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

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

要約 (tl; dr): 私たちは、React Nativeの新アーキテクチャをサポートするリソースの改善に取り組んでいます。アプリの移行を支援するリポジトリ (RNNewArchitectureApp) と、ライブラリ用のリポジトリ (RNNewArchitectureLibraries) をすでに公開しています。また、ウェブサイト上の新アーキテクチャガイドを刷新中であり、新アーキテクチャ関連の質問に答えるためのGitHubワーキンググループも設立しました。

はじめに​

この記事では、ネイティブモジュールとネイティブコンポーネントを、新アーキテクチャに対応するTurboModuleとFabricコンポーネントに移行するのに役立つツールとリソースに関する最新情報をお届けします。

React Nativeユーザーは、アプリ開発のために膨大な数のオープンソースライブラリを活用しています。エコシステムが完全で一貫性のあるものになるためには、これらのライブラリが移行し、誰もが新アーキテクチャによって解放された機能やパフォーマンス向上から恩恵を受けられるようにすることが必要です。

ここでは、ライブラリ開発者の新アーキテクチャへの移行をサポートするために、私たちが取り組んでいることを紹介します。

  • ドキュメント：ウェブサイト上の新アーキテクチャガイドを拡充し、新アーキテクチャのより多くの概念やコンポーネントの開発方法をカバーしていきます。
  • 移行例：React Nativeアプリを新アーキテクチャに移行する方法を示す2つのリポジトリ（RNNewArchitectureApp）と、両方のアーキテクチャで動作するFabricコンポーネントとTurboModuleの作成方法を示すリポジトリ（RNNewArchitectureLibraries）を用意しました。
  • サポート：今年の初めに、新アーキテクチャに関する議論や質問のためのGitHubワーキンググループを設立しました。

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

ドキュメント​

過去6ヶ月間で、新アーキテクチャ採用に関するガイドと、Fabricに関するアーキテクチャの詳細解説を追加しました。これをさらに拡充し、TurboModulesの作成、CodeGenの理解などに関するガイドやドキュメントを追加していく予定です。0.70リリースの頃には最新情報をお伝えできる予定です。

現在、新アーキテクチャガイドでは、アプリの移行方法と、新アーキテクチャを適切にサポートするためのライブラリの移行方法について解説しています。

このガイドの進展に興味がある方や、フィードバックがある方は、こちらのプルリクエストをフォローしてください。

移行例​

コードを追いながら学びたい開発者のために、2つのサンプルリポジトリを用意しました。

RNNewArchitectureApp​

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

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

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

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

一部の移行ブランチには、各コミットで適用された正確な手順をより分かりやすく説明したRUN.mdファイルもあります。

私たちは、このサンプルを最新の安定版リリースに追従させ、今後リリースするReact Nativeのマイナーリリースへの移行を追加していく予定です。いずれかのステップで問題に気づいた場合は、リポジトリにIssueを立ててください。これは、React Nativeユーザーのほとんどが新アーキテクチャに移行したと合理的に判断できるまで続けます。

RNNewArchitectureLibraries​

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

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

  • mainブランチにはコードはなく、他のブランチを紹介するREADME.mdがあります。
  • TurboModulesとFabricコンポーネントの開発方法を示す他のブランチもあります。

私たちは、このサンプルをReact Nativeの新しいリリース、特にライブラリ開発に影響を与えるリリースに合わせて更新し続けるとともに、高度な機能の使用方法に関する例（コマンド、イベントエミッター、カスタムステートの実装など）を追加していく予定です。エラーに気づいた場合は、サンプルリポジトリにIssueを立ててください。

サポート​

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

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

  • お知らせ (Announcements): RN新アーキテクチャの展開に関するマイルストーンや重要な更新情報を共有する場所
  • 詳細解説 (Deep Dive): 詳細な解説や技術的なトピックについてチャットする場所
  • ドキュメント (Documentation): 新アーキテクチャのドキュメントや移行資料についてチャットする場所
  • ライブラリ (Libraries): サードパーティライブラリとその新アーキテクチャへの移行ストーリーについてチャットする場所
  • Q&A: 新アーキテクチャのトピックについてコミュニティに助けを求める場所
  • リリース (Releases): リリース固有のバグやビルドの問題についてチャットする場所

このグループを効果的に利用するために

  • あなたのライブラリがライブラリセクションにリストされていることを確認してください。これにより、ライブラリの移行状況を共有し、ライブラリ作者が直面している困難を理解し、より良いサポートを提供できるようになります。
  • ブロッカーに直面しサポートが必要な場合は、Q&Aセクションを活用してください。私たちのチームとコミュニティの専門家が監視し、ベストエフォートでサポートします。
  • あなたに影響を与える可能性のあるトピックについては、他のセクションにも注意を払ってください。新しいリリースで、まさに探していたAPIが導入されるかもしれません。GitHub経由で特定のディスカッションを購読できます。

私たちは、新アーキテクチャがデフォルトで有効になり、主要なライブラリがすべてそれに移行するまで、このグループをサポートする予定です。

ライブラリのメンテナーたちが、ワーキンググループで移行作業の状況を共有してくれていますので、その概要を簡単にお伝えします。

次のステップ​

私たちは、React Nativeコミュニティによる新アーキテクチャの採用を支援することに尽力しています。具体的には、今後も以下を継続します。

  • ワーキンググループでベストエフォートのサポートを提供します。
  • RNNewArchitectureリポジトリで、新アーキテクチャで素晴らしい結果を達成するためのより多くの例を提供します。
  • 新アーキテクチャに関する明確で最新のドキュメントを提供します。
  • ワーキンググループで、重要なReact Nativeライブラリの移行状況を追跡します。
  • 開発者の移行パスを簡素化します。

さらに、React Native 0.69は、アプリおよびライブラリ開発者向けの新アーキテクチャ採用の開発体験（devX）を向上させて出荷されます。0.69.0リリースの詳細については、こちらをご覧ください。

新アーキテクチャで共に作り上げるものに、私たちはワクワクしています！