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

React Native 0.73 - デバッグ機能の向上、安定したシンボリックリンクのサポートなど

·10 分で読めます
Marek Fořt
Marek Fořt
Shopifyのソフトウェアエンジニア
Thibault Malbranche
Thibault Malbranche
Brigadのリードモバイルエンジニア
Hur Ali
Hur Ali
Callstackのソフトウェアエンジニア
Luna Wei
Luna Wei
Metaのソフトウェアエンジニア
Alex Hunt
Alex Hunt
Metaのソフトウェアエンジニア

本日、React Native 0.73をリリースします！このリリースでは、Hermesでのデバッグの改善、安定したシンボリックリンクのサポート、Android 14のサポート、新しい実験的機能が追加されています。また、レガシーデバッグ機能を廃止し、新しいアーキテクチャの次の柱であるブリッジレスモードをリリースします！

ハイライト​

破壊的変更​

ハイライト​

デバッグ機能の向上​

React NativeとHermesチームは、React Nativeのデバッグエクスペリエンスの向上に取り組んでいます。0.73では、この継続的な投資からいくつかの初期の進捗を共有できることを嬉しく思います。

Hermesのコンソールログ履歴​

console.log()は、開発者がJavaScriptコードをすばやくデバッグするためによく使用される方法です。以前のリリースでは、React Nativeアプリのコンソールログは、デバッガーが接続されるまで記録されませんでした。そのため、アプリの読み込み初期に発生するログを観察するのが困難でした。

React Native 0.73では、この問題に対処しました。Hermesは अबすべてのconsole.log()呼び出しをバックグラウンドでキャプチャし、デバッガーが最初に接続されたときにコンソールタブに送信されます。これは、Webブラウザのデバッグエクスペリエンスと一致します。この新しい動作は、Flipper、Hermesに接続されたChrome DevTools、および実験的な新しいデバッガーで機能します。

更新されたデバッグドキュメント​

ドキュメントのデバッグセクションを更新しました。これには、サポートされているすべてのデバッガーの接続方法に関する最新情報、React DevToolsに関する詳細情報、更新されたビジュアルが含まれています。

Overview of the Debugging docs as of 0.73

実験的な新しいデバッガー​

React Nativeチームは、Flipperに代わる新しいJavaScriptデバッガーエクスペリエンスに取り組んでおり、React Native 0.73の時点でテクニカルプレビューが利用可能です。新しいデバッガーはすぐに開き、HermesでReact Nativeをデバッグするためにカスタマイズされた、簡素化されたChrome DevTools UIを備えています。

注記

新しいデバッガーは**実験的**であり、React Nativeの今後のリリースで積極的に解決に取り組んでいる既知の問題がいくつかあります。試してみる場合は、同じディスカッションスレッドを使用してフィードバックを報告してください。

The new debugger frontend opened to the "Welcome" pane

このエクスペリエンスを有効にする方法の詳細については、ドキュメントをご覧ください。

Metroでのシンボリックリンクの解決のサポートが**デフォルトで有効**になりました。シンボリックリンクのサポートにより、React Nativeは、ディレクトリを含むディレクトリがwatchFoldersで構成されている場合、モノレポ設定で動作できます。

シンボリックリンクはMetroの内部で深く表現されているため、高速リフレッシュなどの機能で動作し、バンドル中のパフォーマンスオーバーヘッドはほとんどありません。シンボリックリンクは、Watchmanの有無にかかわらず、すべてのデスクトッププラットフォームでサポートされています。

情報

モノレポの回避策​

モノレポレイアウトでReact Nativeを使用する場合、まだエッジケースがあることを認識しています。これらのいくつかに対処するための作業を計画していましたが、0.73には間に合いませんでした。しかし、できるだけ早く出荷することを目指しています。

**React Nativeテンプレートプロジェクト（npx react-native init）の場合**、Metroがそれらを検出するために、プロジェクトルートの外側にwatchFoldersを構成する必要があります（詳細情報）。また、react-native依存関係が異なるレベルのフォルダーにインストールされている場合は、ファイルパスを更新する必要がある場合があります。

**Expoアプリの場合**、Yarn（Classic）ワークスペースのサポートはすぐに構成されます。Expoドキュメントのモノレポで作業するガイドも参照してください。

AndroidにおけるKotlinテンプレート​

0.73以降、React Nativeで構築されたAndroidアプリの**推奨言語**がKotlinになったことを発表いたします。これは、Androidエコシステムがここ数年で進んできた方向性に沿ったものであり、最新の言語を使用してアプリを記述できるようになります。

AndroidのReact Nativeテンプレートを、Javaの代わりにKotlinを使用するように更新しました。新しいMainActivity.ktファイルとMainApplication.ktファイルのサイズは36%小さくなりました。

アップグレードヘルパーも更新され、.javaファイルから.ktファイルへの移行が容易になりました。以前にプロジェクトのJavaファイルを修正していて、Kotlinへの移行にサポートが必要な場合は、Android Studioの「コード > JavaファイルをKotlinファイルに変換」ユーティリティを使用できます（ショートカットCmd ⌘ + Shift ⇧ + Option ⌥ + Kでもアクセスできます）。

Android 14のサポート​

React Nativeを更新し、Android 14を完全にサポートしました。0.73以降、React Native開発者は最新のAndroid SDKバージョンであるAPIレベル34（*Upside Down Cake*）をターゲットにできるようになりました。

Java 17とAndroid Gradle Pluginのアップグレード​

Android 14をサポートするために、Androidアプリのビルドに使用されるAndroid Gradle Plugin（AGP）のバージョンを7.4.xから8.1.xに更新しました。

このAGPのメジャーバージョンアップには、Googleのリリースノート（8.0.0および8.1.0）に記載されている一連の破壊的な変更が含まれています。

最も重要なのは、Androidアプリをビルドするには**Java 17**が必要になったことです。Javaのバージョンを17に更新するには、以下を実行します。

brew install --cask zulu@17

そして、入門ガイドに記載されているように、JAVA_HOMEを更新します。

ライブラリ開発者の場合、ライブラリは変更なしでReact Native 0.73で動作するはずです。今年初めに、AGPのバージョンアップがライブラリ作成者にとって何を意味するのかについての明確化を含むメモを公開しました。

写真とビデオへの部分的なアクセスの許可​

選択した写真へのアクセスにより、Android 14ユーザーは、すべてのメディアへのアクセスではなく、メディアライブラリ内の特定のアイテムへのアクセスをアプリに許可できます。0.73では、React NativeアプリはPermissionsAndroid APIでREAD_MEDIA_VISUAL_USER_SELECTEDパーミッションを使用することで、この機能をサポートするようになりました。

Selected Photos Access in Android 14

最小SDKの引き上げ​

React Native 0.73は、Android 5.0（APIレベル21）をサポートする最後のバージョンになります。React Nativeの次のバージョンでは、最小SDKバージョンが23（Android 6.0）になります。最小SDKの引き上げに関する今後の変更点については、こちらをご覧ください。

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

オープンソースコミュニティのすべての人が利用できるように、React Nativeの新しいアーキテクチャの展開を継続しています。

React Native 0.68以降、新しいレンダラー（Fabric）と新しいネイティブモジュールシステム（TurboModules）の両方が、ユーザーが実験および評価できるようになっています。これまでにいただいたフィードバックに感謝いたします。

本日、新しいアーキテクチャのもう1つの要素である**ブリッジレスモード**をリリースします。 これまで、アプリで新しいアーキテクチャを有効にすると、ブリッジは古いコンポーネントとモジュールとの下位互換性をサポートするために引き続き利用可能でした。しかし、私たちのビジョンは、ブリッジを完全に廃止することです。React Native 0.73以降、ブリッジの作成を完全に無効にするブリッジレスモードを有効にすることができます。

ブリッジレスモードとともに、ブリッジレスモードで古いモジュールを再利用できるネイティブモジュール相互運用レイヤーを提供しています。React Native 0.72で導入されたレンダラー相互運用レイヤーも、ブリッジレスモードで動作するように適合されています。

新しいアーキテクチャの他の部分と同様に、ブリッジレスモードは最初は実験的なものです。興味のあるユーザーは、ブリッジレスモードを有効にして、新しいアーキテクチャワーキンググループで発生した問題や非互換性を報告することをお勧めします。

非推奨のデバッグ機能​

FlipperとReact Nativeの統合​

React Nativeアプリのデバッグに使用するデフォルトツールとして、Flipperから徐々に移行しています。0.73では、React Nativeに含まれるネイティブFlipper統合（Flipperのコアプラグインを接続するブートストラップコード）を非推奨にすることから始めます。次のリリースでは、この統合と依存関係を削除します。つまり、ネットワークプラグインなどのFlipperの一部は機能しなくなります。

**変更なし**: ネイティブアプリのデバッグ用スタンドアロンプロダクトとしてのFlipperは引き続き存在します。 将来、新しいReact Nativeプロジェクトから削除された後でも、開発者は必要に応じてFlipperを手動でアプリに追加できます。

Flipperから移行する理由の詳細については、RFCをご覧ください。

リモートJavaScriptデバッグ​

リモートJavaScriptデバッグは、外部Webブラウザ（Chrome）をアプリに接続し、Webページ、つまりhttps://#:8081/debugger-ui内でJavaScriptコードを実行するレガシーデバッグモードです。このモデルでは、デバッグ中にアプリの動作に一貫性がなくなる可能性があり、新しいアーキテクチャのネイティブモジュールとは互換性がありません。

0.73では、リモートJavaScriptデバッグは非推奨となり、開発メニューから削除されました。 リモートデバッガーを有効にするには、NativeDevSettings APIを介して手動で行う必要があります。 これを行う方法は、その他のデバッグ方法のドキュメントで説明されています。

情報

リモートJavaScriptデバッグは、以前はJavaScriptCore（JSC）を使用するアプリのデフォルトのデバッグエクスペリエンスでした。 iOSアプリの場合は、代わりにSafari開発ツール（直接JSCデバッグ）をお勧めします。

すべてのプラットフォームで一貫したデバッグエクスペリエンスを得るには、Hermesを使用することをお勧めします。

破壊的変更​

Babelパッケージの名前変更​

メンテナンスとアップグレードを簡素化するために、Babel関連の2つのパッケージをMetroからReact Nativeのリポジトリとバージョン管理スキームに移動しました。 これらのパッケージの新しいバージョンは、0.73の新しいアーキテクチャ機能をサポートしているため、これらの依存関係を更新する必要があります。

アップグレード時には、アップグレードヘルパーに従って、これらの依存関係が更新されていることを確認してください。 一部のパッケージの名前が変更されました。

古いパッケージ名新しいパッケージ名
metro-react-native-babel-preset@react-native/babel-preset
metro-react-native-babel-transformer@react-native/metro-babel-transformer
情報

@react-native/babel-presetには@react-native/babel-plugin-codegenが含まれるようになったため、Babel設定ファイルで個別に指定する必要がなくなりました。

その他の破壊的変更​

これらは、0.73における主要な破壊的変更の一部です。 破壊的変更の完全なリストについては、完全な変更ログを参照してください。

  • Node.jsの最小要件を18.xに引き上げました（#37709）（Node.js 16 EOLも参照）。
  • テンプレートでTypeScript 5.0が使用されるようになりました（#36862）。
    • React Nativeの型は、TypeScript 4.8でも引き続き機能します。
  • **Android**: Androidアプリをビルドするには、Java 17が必要になりました（上記参照）。
  • **Android**: Frescoを3.0にメジャーバージョンアップしました（#38275）。
  • **iOS**: iOSの最小バージョンを13.4に引き上げました（#36795）。
  • **iOS**: Xcodeでビルドを実行すると、Metroが自動的に起動しなくなりました（#38242）。

ライブラリ作成者向け

React Native CLIの変更​

重要な変更点​

  • build-android コマンドのデフォルトタスクのプレフィックスを変更しました。 今後は、build-android を実行すると、assemble の代わりに bundle タスクが実行されます（#1913）。
  • Metro 設定のデフォルト値のフォールバックフローを削除しました（#1972）。
    • 0.72 から更新されたmetro.config.js のフォーマットが 0.73 で必須になりました。CLI からこれらのデフォルト値のフォールバックコピーが削除されたためです。
  • run-ios から --configuration オプションを削除しました（--mode に置き換えられました）（#2028）。
  • build-android コマンドから --variant オプションを削除しました（--mode に置き換えられました）（#2026）。

v12.0.0 の完全な変更ログをご覧ください。.

@types/react-native は非推奨になりました​

TypeScript のファーストクラスサポートで述べたように、0.71 以降、react-native に TypeScript の型定義が含まれており、0.73 では @types/react-native が非推奨になります。

既存のバージョンに対する今後のパッチは提供されません。@types/react-native からの移行を推奨します。移行方法の手順をご覧ください。

謝辞​

React Native 0.73 には、68 人の貢献者による2259 件以上のコミットが含まれています。皆様のご尽力に感謝いたします！

0.73 へのアップグレード​

既存のプロジェクトの React Native バージョン間のコード変更を確認するには、アップグレードドキュメントに加えて、React Native Upgrade Helperをご利用ください。npx react-native@latest init MyProject で新しいプロジェクトを作成することもできます。

Expo を使用している場合、React Native 0.73 は Expo SDK 50 リリースでサポートされます。

情報

0.73 は React Native の最新の安定バージョンであり、**0.70.x はサポート対象外になりました**。詳細については、React Native のサポートポリシーをご覧ください。