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

React Native 0.72 - シンボリックリンクのサポート、エラーの改善など

·6 分で読む
Lorenzo Sciandra
ロレンゾ・シアンドラ
Microsoft のシニアソフトウェアエンジニア
Marek Fořt
マーレック・フォート
Shopify のソフトウェアエンジニア
Riccardo Cipolleschi
リッカルド・チポレッスキ
Meta のソフトウェアエンジニア
Luna Wei
ルナ・ウェイ
Meta のソフトウェアエンジニア

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

このリリースでは Metro によくリクエストされる機能が追加され、エラー処理が向上し、その他の開発者エクスペリエンスが改善されています。この作業の多くは、2022 年コミュニティ調査での皆様のフィードバックから優先的に決定されました。ご参加いただいた皆様、ありがとうございます!

ハイライト​

重大な変更​

ハイライト​

Metro の新機能​

シンボリックリンクのサポートは Metro で最もリクエストされる機能の 1 つであり続け、React Native 0.72 では、ベータサポートを発表できることを嬉しく思います。

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

現在は、さまざまなワークフローによる開発者エクスペリエンスに関するフィードバックを収集するためのベータ版です。こちらで詳細をご覧ください。0.73 ではシンボリックリンクをデフォルトで有効にする予定です。

パッケージエクスポートのサポート (ベータ)​

パッケージエクスポート は package.json の "main" フィールドの最新の代替であり、npm パッケージが自分のパブリック API を定義して React Native をターゲットするための新しい機能を提供します。

Metro 設定でパッケージエクスポートのサポートを有効にすると、アプリは新しい "react-native" コミュニティ条件 を含め、より広い JavaScript エコシステムと互換性を持つようになります。ベータ機能を有効にするを参照して、アプリで使用してください。

ヒント

詳細情報および安定的なロールアウト計画はこちらのReact Native のパッケージエクスポートサポートをご覧ください。

ベータ機能の有効化​

プロジェクトでこれらの機能を有効にするには、アプリの 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) も組み込まれ、JSON 操作に大きく依存する redux-persist などのライブラリを使用するアプリが恩恵を受けます。

Hermes での ECMAScript サポートの強化​

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

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 のサポート ポリシー を参照してください。