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

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ファイルをテンプレートのバージョンに合わせるように更新してください。

情報

設定ファイルを以下の形式に更新してください。アップグレードヘルパーも利用できます。

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

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

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

以下の仕様のHermesでのサポートがReact Native 0.72に導入されました。

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

新しいアーキテクチャの更新の移行​

新しいアーキテクチャは現在実験段階です。更新を対象読者に集中させるため、0.72以降のリリースにおける新しいアーキテクチャの更新は、専用のワーキンググループに移行します。この変更により、ナイトリービルドで提供される作業のように、より頻繁な更新も可能になります。

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

破壊的変更​

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

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

パッケージ名の変更​

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へのアップグレード​

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

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

情報

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