React Native 0.76 - New Architecture by default, React Native DevTools, and more

本日、React Native 0.76のリリースを発表できることを嬉しく思います！これはReact Nativeにとって大きなマイルストーンです。New Architectureをデフォルトで有効にし、React Native DevToolsを導入しています。これは私たちのチームが6年間にわたって取り組んできた努力の集大成であり、素晴らしい開発者コミュニティのサポートによって実現されました。

ハイライト

• React Native New Architectureがデフォルトに
• React Native DevTools
• より高速なMetro解決
• Box ShadowとFilterスタイルプロパティ

破壊的変更

• react-native-community/cliへの依存関係を削除
• ネイティブライブラリの統合によりAndroidアプリが約3.8MB小さくなりました
• 最小iOS・Android SDK要件の更新

ハイライト

React Native New Architectureがデフォルトに

React Native 0.76から、New Architectureがプロジェクトでデフォルトで有効になります。New Architectureは、アプリ開発者がReactを使用して高品質なネイティブアプリケーションを開発できるようにするため、React Nativeの内部を書き直したものです。本日、New Architectureが本番環境での使用準備が整ったことを発表できることを嬉しく思います。

この変更はReact Nativeの進化における重要なマイルストーンであり、New Architectureに含まれる内容とReact Nativeの未来をどのように形作るかを理解するために、専用のブログ投稿をお読みいただくことをお勧めします：The New Architecture is Here。

React Native DevTools

私たちの新しいデフォルトデバッグ体験であるReact Native DevToolsの最初の安定版をリリースします。すべてのプラットフォームでReactをデバッグするために使用するツールが、信頼性があり、馴染みがあり、シンプルで、一貫性があることを望んでいます。React Native DevToolsはこれらの原則を実現します — React Nativeと深く統合されたブラウザ対応の開発者ツールです。

主な機能には以下が含まれます：

• 馴染みのある、Web対応のツール — 信頼性のあるブレークポイント、ウォッチ値、ステップスルーデバッグ、スタック検査、豊富なJavaScriptコンソールを備えたChrome DevToolsベースの完全機能デバッガー。これらのコア機能は現在、信頼性があり、リロード間でも動作します。
• 改善・統合されたReact DevTools — 内蔵のReact Components InspectorとProfilerがシームレスに動作し、より高速で信頼性の高いコンポーネントハイライト機能を提供します。
• 改善されたUX — 新しい「Paused in Debugger」オーバーレイにより、アプリがブレークポイントで一時停止していることが明確になります。LogBoxの警告は要約として表示され、DevToolsが接続されている間は非表示になります。
• 修正された再接続動作 — JavaScriptブレークポイントがリロード間やDevToolsが切断・再接続された際に確実に動作します。DevToolsはネイティブリビルド後でも同じアプリに再接続できます。
• 即座の起動 — React Native DevToolsは設定不要でデフォルトで準備完了です。アプリ内のDev Menuから、またはCLIサーバーでjキーを使用して開くことができ、複数のエミュレーターとデバイスをサポートします。

React Native DevToolsは、0.73で最初に提供されたExperimental Debugger体験とは異なるものを含め、以前のデバッグオプションとは根本的に異なります。過去1年間で再構築した新しいバックエンドデバッグスタックに切り替わります。これは、以前のツールとの互換性が変更されたことを意味し、エンドツーエンドでより信頼性の高い体験を期待できます。

私たちは、この新しいスタックを基盤として、PerformanceやNetworkパネルなどのより多くの機能を将来的に確実に実装できるようにする予定です。

Metroでのログの段階的廃止

次のリリースでは、モダンなブラウザツールに合わせ、古いデバッグ統合を削除するため、Metroでの転送ログを削除します。代わりに、ログ記録にはReact Native DevToolsの完全機能のConsoleパネルを使用してください。詳細はFAQをご覧ください。

リンク

• 更新されたデバッグドキュメント
• React Universe Confでの発表講演
• フィードバックスレッドとFAQ

より高速なMetro解決

インポートパスからモジュールを見つける責任を持つコンポーネントであるMetroのリゾルバーにいくつかのパフォーマンス改善を提供し、約15倍高速化しました。これによりMetroの全体的なパフォーマンスが向上し、特にウォームビルドでは約4倍高速化されました。

Box ShadowとFilterスタイルプロパティ

0.76では、New Architectureのみの2つのスタイルプロパティ - boxShadowとfilterを追加しました。これらのプロパティはWebに存在し、チームは可能な限り仕様に従うため、これらのプロパティは予測可能で馴染みがあり、最終的に採用しやすくなります（例外については制限事項と仕様からの逸脱セクションを参照）。

その結果、これらがどのように動作するかを完全に理解するためにWebドキュメントを参照できますが、以下に記載されているいくつかの重要な違いがあります。

boxShadow

boxShadowは要素に影を追加し、影の位置、色、サイズ、ぼかしを制御できます。これらの各引数の完全な概要と、自分で試すためのフィドルについては、MDNドキュメントをご確認ください。以下は作成できる影のいくつかの例です。

boxShadowは、CSS構文を模倣する文字列、または変数を埋め込むことができるJSオブジェクトのいずれかを取ることができます。例えば、文字列'5 5 5 0 rgba(255, 0, 0, 0.5)'とオブジェクト{offsetX: 5, offsetY: 5, blurRadius: 5, spreadDistance: 0, color: 'rgba(255, 0, 0, 0.5)'}は同じボックスシャドウを生成します。

以前の影機能には、現在boxShadowによって対処されているいくつかの欠点がありました：

• Androidで動作しない
• インセットにできない
• スプレッドがない
• 背景色がない場合、Viewで動作しない
• 別のプロパティなので、同じWeb構文を共有できない

制限事項と仕様からの逸脱

• デフォルトの影の色は親の色ではなく黒です
• Android通常の影はAndroid 9+でサポートされています
• Androidインセット影はAndroid 10+でサポートされています

filter

filterは要素に特定のグラフィカルフィルターを追加します。明度、彩度、色相などを変更できるカラーフィルターと、ぼかしや影を追加できる非カラーフィルターが混在しています。各個別のフィルター関数の完全な概要と、自分で試すためのフィドルについては、MDNドキュメントをご確認ください。

以下は、さまざまなフィルターが適用されたホットドッグの画像です。左から右へ：フィルターなし、saturateフィルター、blurフィルター、invertフィルター

boxShadowと同様に、filterはCSS構文を模倣する文字列、または変数を埋め込むことができるJSオブジェクトの配列のいずれかを取ることができます。例えば、文字列'saturate(0.5) grayscale(0.25)'と配列[{saturate: 0.5}, {grayscale: 0.25}]は同じフィルターを生成します。

filterにはboxShadowとわずかに異なるdropShadow値があります。最大の違いは、dropShadowがアルファマスクであることです - つまり、影はピクセルがゼロ以外のアルファ成分を持つ場合にのみキャストされます。一方、boxShadowは、内部に何もない場合でも、要素のボーダーボックスの周りにキャストされます。さらに、dropShadowにはスプレッド距離パラメータがなく、インセット（要素内部にキャストされる影）にできません。

制限事項と仕様からの逸脱

• iOSフィルターは明度と不透明度のみをサポートします
• iOSフィルターは影、アウトライン、または要素の境界外のその他のグラフィカル要素には適用されません
• Androidのblurとdrop-shadowはAndroid 12+でのみサポートされています
• filterはoverflow: hiddenを意味するため、フィルターを持つ要素の子要素は、親の境界外に配置されている場合はクリップされます

破壊的変更

@react-native-community/cliへの依存関係を削除

0.75で以前に共有したように、私たちのビジョンはReact Nativeをフレームワーク非依存にすることです。そのため、React Nativeの直接依存関係として@react-native-community/cliを削除する作業を完了しました。

React NativeをCLIから分離することで、これらのプロジェクトを独立してリリースすることでより迅速に進歩し、両プロジェクトの責任をより良く分離できます。

日常のワークフローでCLIに依存している場合は、package.jsonにCLIへの依存関係を明示的に追加してください：

//…
"devDependencies": {
  // …
+ "@react-native-community/cli": "15.0.0",
+ "@react-native-community/cli-platform-android": "15.0.0",
+ "@react-native-community/cli-platform-ios": "15.0.0",
},

ネイティブライブラリの統合によりAndroidアプリが約3.8MB小さくなりました

React Native 0.76では、多くのネイティブコードをlibreactnative.soという単一のライブラリに統合したため、ネイティブライブラリの数が削減されて出荷されます。この変更により、アプリサイズの削減とAndroidでのアプリ起動パフォーマンスの向上がもたらされます。

私たちのベンチマークから、アプリサイズが約3.8MB（全体の20%）削減され、アプリ起動時間の中央値が約15ms（約8%）削減されることがわかりました（ソース）。

一方、これはアプリとライブラリの両方の開発者にとって破壊的変更です。アプリ開発者は、アプリケーションのonCreateを以下のように更新する必要があります：

+ import com.facebook.react.soloader.OpenSourceMergedSoMapping
import com.facebook.soloader.SoLoader

class MainApplication : Application(), ReactApplication {
    override fun onCreate() {
        super.onCreate()
+       SoLoader.init(this, OpenSourceMergedSoMapping)
-       SoLoader.init(this, false)
    }
}

この変更はlibreactnative.soを適切にロードするために必要であり、upgrade-helperに含まれています。

ライブラリ作成者は、カスタムC++コードがない限り、この変更の影響を受けません。この変更の技術的な詳細とライブラリ作成者への提案については、専用投稿で詳しく読むことができます。

最小iOS・Android SDK要件の更新

最小プラットフォームとSDKバージョンを更新しました：

• iOS - 13.4から15.1へ
• Android - SDK 23からSDK 24（Android 7）へ

この変更は、0.75がリリースされた際に今年初めに発表されました。詳細については、AndroidとiOSの専用投稿をご覧ください。

その他の破壊的変更

Animation

• ループアニメーションでReactへの状態更新の送信を停止。これはループアニメーションで不要な再レンダリングを引き起こしていました。

devtools

• New Arch下でInspector Panelのperf + networkタブを削除。（RFC）

text engine

• TextLayoutManagerで常にAttributedStringの代わりにAttributedStringBoxを使用

Android

• rendering: Viewの背景は直接ReactViewBackgroundDrawableまたはCSSBackgroundDrawableではなくなりました

iOS

• turbomodule: 純粋なCxxモジュールの自動リンク用のRCT_EXPORT_CXX_MODULE_EXPERIMENTALマクロを削除

謝辞

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

このリリース投稿で機能の文書化に取り組んだすべての追加著者に感謝します：

• Joe VilchesとNick Gerleman：box-shadowとfilterスタイルプロパティ
• Alex Hunt：React Native DevTools
• Nicola Corti：Androidの単一ライブラリとしての出荷

0.76へのアップグレード

既存のプロジェクトについては、React Native Upgrade Helperを使用してReact Nativeバージョン間のコード変更を確認し、アップグレードドキュメントも併せてご利用ください。

Expoを使用している場合、React Native 0.76はExpo SDK 52でサポートされる予定です。

CLIを使用して新しいプロジェクトを作成する必要がある場合は、次のコマンドを実行できます：

npx @react-native-community/cli@latest init MyProject --version latest

info 0.76は現在React Nativeの最新安定版であり、0.73.xはサポート対象外になります。詳細については、React Nativeのサポートポリシーをご覧ください。近い将来、0.73の最終的なend-of-lifeアップデートを公開する予定です。