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

React Native 0.72 - シンボリックリンク対応、エラー表示の改善など

·8分で読めます
Lorenzo Sciandra
Lorenzo Sciandra
シニアソフトウェアエンジニア @ Microsoft
Marek Fořt
Marek Fořt
ソフトウェアエンジニア @ Shopify
Riccardo Cipolleschi
Riccardo Cipolleschi
ソフトウェアエンジニア @ Meta
Luna Wei
Luna Wei
ソフトウェアエンジニア @ Meta

本日、0.72をリリースします！

このリリースでは、Metroに待望の機能が追加され、エラーハンドリングが改善されるなど、開発者体験が向上しています。2022年のコミュニティアンケートでのフィードバックを元に、多くの作業が優先的に進められました。参加してくださった皆さま、ありがとうございました！

ハイライト​

破壊的変更​

ハイライト​

Metroの新機能​

シンボリックリンクのサポートは、Metroで最も要望の多かった機能の1つであり、React Native 0.72ではベータ版としてサポートされることをお知らせします。

シンボリックリンクのサポートにより、React Nativeはモノレポ構成やpnpmと透過的に動作するようになり、回避策が不要になります。アプリで使用するには、「ベータ版機能の有効化」を参照してください。

現在、様々なワークフローにおける開発者体験に関するフィードバックを収集するためにベータ版として提供されています。詳細についてはこちらをご覧ください。0.73ではシンボリックリンクをデフォルトで有効にする予定です。

Package Exportsのサポート (ベータ)​

Package Exportsは、package.jsonの"main"フィールドに代わる現代的な方法で、npmパッケージが公開APIを定義し、React Nativeをターゲットにするための新機能を提供します。

Metroの設定でPackage Exportsのサポートを有効にすると、新しい"react-native"コミュニティ条件などを通じて、アプリはより広範なJavaScriptエコシステムと互換性を持つようになります。アプリで使用するには、「ベータ版機能の有効化」を参照してください。

ヒント

この機能と安定版への展開計画の詳細については、「React NativeでのPackage Exportsのサポート」をご覧ください。

ベータ版機能の有効化​

これらの機能をプロジェクトで有効にするには、アプリのmetro.config.jsファイルを更新し、resolver.unstable_enableSymlinksまたはresolver.unstable_enablePackageExportsオプションを設定します。

const config = {
  // ...
  resolver: {
    unstable_enableSymlinks: true,
    unstable_enablePackageExports: true,
  },
};

新しいmetro.config.jsのセットアップ​

React Native 0.72では、React Native CLIにおけるMetroの設定読み込みの仕組みを変更しました。プロジェクトのmetro.config.jsファイルをテンプレートのバージョンに合わせて更新してください。

情報

設定ファイルを以下のフォーマットに更新してください。upgrade-helperに従うこともできます。

metro.config.jsのこのフォーマット変更は0.73で必須となります。0.72では、更新されていない場合に警告がログに出力されます。

これにより、React Nativeの基本Metro設定を拡張する制御がプロジェクト側に移り、残っていたデフォルト設定を整理しました。さらに、これによりmetro get-dependenciesのようなスタンドアロンのMetro CLIコマンドが機能するようになります。

開発者体験の向上​

無効なスタイルプロパティによるレッドボックスはもうありません​

このリリース以前は、StyleSheetで無効なスタイルプロパティを指定するとレッドボックスが表示されていました。これは比較的リスクの低いエラーであるにもかかわらず、開発者のワークフローを中断させる強いシグナルのエラーでした。

0.72では、この挙動を緩和し、ブラウザで無効なCSSプロパティを指定したときのように、サイレントに失敗するようにしました。また、型定義を更新し、一部のエラーが実行時ではなくビルド時にキャッチされるようになりました。

Hermesのエラーの可読性向上​

Hermesは、未定義の呼び出し可能オブジェクトを呼び出した際のエラーメッセージを改善しました。

    var x = undefined; x();
    // Before: undefined is not a function
    // After: x is not a function (it is undefined)

さらに、LogBoxのスタックトレースは、アプリのユーザーには関係のない内部的なHermesのバイトコードフレームを除外するようになりました。

React Native CLIのエラー出力の改善​

0.72にはReact Native CLI v11が同梱されており、init、run-android、run-iosコマンドにおいて、重複の削減、文言の明確化、冗長なスタックトレースの削減、関連ドキュメントへのディープリンクの追加などの改善が含まれています。

その他の改善点はReact Native CLIの変更履歴で確認できます。

HermesでのコンパイルとJSONパースの高速化​

Hermesは大きなオブジェクトリテラルのコンパイル時間を改善しました。例えば、報告されたある問題#852では、ユーザーはデータセット全体を巨大なオブジェクトリテラルとして記述していました。Hermesが使用する重複排除アルゴリズムを改善することで、コンパイル速度が97%向上しました (221c)。これらの改善は、多くのオブジェクトをバンドルするアプリのビルド時間に貢献します。

JSONパースにも複数の最適化 (de9c, 6e2d) が行われ、redux-persistのようにJSON操作に大きく依存するライブラリを使用しているアプリに恩恵をもたらします。

HermesでのECMAScriptサポートの拡充​

React Native 0.72では、Hermesで以下の仕様のサポートが追加されました。

JSCユーザーの場合、これらの機能はすでに利用可能です。

新しいアーキテクチャのアップデートの移動​

新しいアーキテクチャは現在実験的なものです。アップデートを対象読者に絞るため、0.72以降のリリースでは、新しいアーキテクチャに関するアップデートを専用のワーキンググループに移動します。この変更により、nightlyビルドで提供される作業など、より頻繁なアップデートが可能になります。

新しいアーキテクチャに関する0.72のアップデートはこちらでご覧いただけます。新しいアーキテクチャの進捗状況を常に把握するには、ワーキンググループのGitHub通知を購読してください。

破壊的変更​

非推奨コンポーネントの削除​

以下のパッケージは0.72でReact Nativeから削除されました。推奨されるコミュニティパッケージに移行してください。

パッケージのリネーム​

react-nativeコアリポジトリから公開されるすべてのパッケージは、react-native/packagesに配置され、所有権を明確にするために@react-native npmスコープで公開されるようになりました。

react-nativeパッケージに変更はありません。

旧パッケージ名新パッケージ名
@react-native-community/eslint-config@react-native/eslint-config
@react-native-community/eslint-plugin@react-native/eslint-plugin
@react-native/polyfills@react-native/js-polyfills
@react-native/normalize-color@react-native/normalize-colors
@react-native/assets@react-native/assets-registry
react-native-codegen@react-native/codegen
react-native-gradle-plugin@react-native/gradle-plugin

リネームされたパッケージに直接依存していない場合、この変更による影響はありません。そうでない場合は、React Native 0.72にアップグレードする際に、リネームされた依存関係を~0.72バージョンに更新してください。

これらの変更に至った動機は、専用のRFCで読むことができます。

謝辞​

このリリースの多くは、コミュニティからの直接のフィードバックから生まれました。うるさいレッドボックスに関する報告、Package Exportsのバグ、新しいアーキテクチャのベンチマークなど、すべてが貴重な意見であり、フィードバックを共有していただく時間と労力に感謝しています。

0.72には、66人のコントリビューターによる1100以上のコミットが含まれています。皆さんの尽力に感謝します！

0.72へのアップグレード​

upgrade-helperで必要な変更のリストを確認するか、アップグレードドキュメントを読んで既存のプロジェクトを更新する方法、またはnpx react-native@latest init MyProjectで新しいプロジェクトを作成する方法を確認してください。

Expoを使用している場合、React Nativeバージョン0.72はExpo SDK 49リリースでサポートされます。

情報

0.72は現在React Nativeの最新安定バージョンであり、0.69.xバージョンはサポート対象外となります。詳細については、React Nativeのサポートポリシーを参照してください。