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

React Native 0.73 - デバッグの改善、安定したシンボリックリンク対応など

·13分で読めます
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のサポート、そして新しい実験的な機能が追加されています。また、レガシーなデバッグ機能を非推奨とし、New Architectureの次の柱であるブリッジレスモードもリリースします！

ハイライト​

破壊的変更​

ハイライト​

デバッグの改善​

React NativeとHermesチームは、React Nativeにおけるデバッグ体験の向上に取り組んでいます。0.73では、この継続的な投資から生まれた初期の進捗をいくつか共有できることを嬉しく思います。

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

console.log()は、開発者がJavaScriptコードを素早くデバッグするための常に人気のある方法です。以前のリリースでは、React Nativeアプリのコンソールログはデバッガーが接続されるまで記録されませんでした。これにより、アプリのロード初期に発生するログを観察することが困難でした。

React Native 0.73では、この問題に対処しました。Hermesはバックグラウンドですべてのconsole.log()呼び出しをキャプチャし、デバッガーが最初に接続されたときにコンソールタブに送信されるようになりました。これにより、ウェブブラウザでのデバッグ体験と一致します。この新しい動作は、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でのシンボリックリンクの解決サポートがデフォルトで有効になりました。シンボリックリンクのサポートにより、関連ディレクトリがwatchFoldersで設定されているモノレポ構成でReact Nativeが動作するようになります。

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

情報

モノレポの回避策​

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

React Nativeのテンプレートプロジェクト（npx react-native init）の場合、Metroがプロジェクトルート外のwatchFoldersを発見できるように設定する必要があります（詳細情報）。また、react-native依存関係が異なる階層のフォルダにインストールされている場合は、ファイルパスを更新する必要があるかもしれません。

Expoアプリの場合、Yarn (Classic) ワークスペースのサポートは最初から設定されています。Expoドキュメントのモノレポでの作業ガイドも参照してください。

AndroidでのKotlinテンプレート​

0.73から、KotlinがReact NativeでビルドされるAndroidアプリの推奨言語になったことをお知らせします。これは、Androidエコシステムが数年にわたって進んできた方向に従うものであり、モダンな言語を使用してアプリを記述できるようになります。

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

Upgrade Helperも更新され、.javaファイルを.ktファイルに移行しやすくなりました。以前にプロジェクトのJavaファイルを変更したことがあり、それらをKotlinに移行するサポートが必要な場合は、Android StudioのCode > Convert Java file to Kotlin Fileユーティリティ（ショートカット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

を実行し、Getting Startedガイドに記載されているようにJAVA_HOMEを更新してください。

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

写真や動画への部分的なアクセスを許可する​

選択した写真へのアクセスにより、Android 14ユーザーはすべてのメディアへのアクセスではなく、メディアライブラリ内の特定のアイテムへのアクセスをアプリに許可できます。0.73では、React NativeアプリはPermissionsAndroidAPIで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バージョンの引き上げに関する今後の変更については、こちらで詳しく読むことができます。

New Architectureのアップデート​

私たちは、React NativeのNew Architectureをオープンソースコミュニティの誰もが利用できるように、引き続き展開していきます。

React Native 0.68以降、New Renderer（Fabric）とNew Native Module System（TurboModules）の両方が、ユーザーによる実験と評価のために利用可能でした。これまでにいただいたコミュニティからのフィードバックに感謝します。

本日、New Architectureのもう一つの要素であるブリッジレスモードをリリースします。これまでは、アプリでNew Architectureを有効にしても、古いコンポーネントやモジュールとの後方互換性をサポートするためにBridgeが利用可能でした。しかし、私たちのビジョンはBridgeを完全に廃止することです。React Native 0.73から、Bridgeの作成を完全に無効にするブリッジレスモードを有効にできます。

ブリッジレスモードとともに、ブリッジレスモード時に古いモジュールを再利用できるNative Module Interop Layerをリリースします。React Native 0.72で導入されたRenderer Interop Layerも、ブリッジレスモードで動作するように適合されています。

New Architectureの他の部分と同様に、ブリッジレスモードは当初は実験的なものです。興味のあるユーザーに有効にしていただき、直面した問題や非互換性をNew Architectureワーキンググループに報告していただくようお願いします。

非推奨となったデバッグ機能​

Flipper ↔ React Native統合​

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

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

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

リモートJavaScriptデバッグ​

リモートJavaScriptデバッグは、外部のウェブブラウザ（Chrome）をアプリに接続し、ウェブページ内（例: https://:8081/debugger-ui）でJavaScriptコードを実行するレガシーなデバッグモードです。このモデルは、デバッグ中にアプリの動作が不安定になる可能性があり、New Architecture下のネイティブモジュールとは互換性がありません。

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

情報

リモートJavaScriptデバッグは、以前はJavaScriptCore（JSC）を使用するアプリのデフォルトのデバッグ体験でした。iOSアプリには、代わりにSafari Developer Tools（直接JSCデバッグ）をお勧めします。

すべてのプラットフォームで一貫したデバッグ体験を得るために、Hermesの使用をお勧めします。

破壊的変更​

Babelパッケージ名の変更​

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

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

旧パッケージ名新パッケージ名
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のフォーマットが、CLIからこれらのデフォルトのフォールバックコピーを削除したため、0.73では必須となります。
  • run-iosから--configurationオプションを削除（--modeに置き換え） (#2028)。
  • build-androidコマンドから--variantオプションを削除（--modeに置き換え） (#2026)。

v12.0.0の完全な変更履歴を参照.

@types/react-nativeの非推奨化​

TypeScriptのファーストクラスサポートで述べたように、0.71以降、TypeScriptの型をreact-nativeに同梱しており、0.73で@types/react-nativeを非推奨とします。

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

謝辞​

React Native 0.73には、68人のコントリビューターによる2259件以上のコミットが含まれています。皆さんのご尽力に感謝します！

0.73へのアップグレード​

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

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

情報

0.73は現在React Nativeの最新安定版となり、0.70.xはサポート対象外となります。詳細については、React Nativeのサポートポリシーをご覧ください。