React Native 0.76 - 新アーキテクチャのデフォルト採用、React Native DevTools など

本日、React Native 0.76のリリースを発表できることを嬉しく思います！

これはReact Nativeにとって大きなマイルストーンであり、新アーキテクチャをデフォルトで有効化し、React Native DevToolsを導入しています。これは、私たちのチームによる6年間の努力の成果であり、開発者の素晴らしいコミュニティのサポートがあってこそ実現しました。

ハイライト

• React Native新アーキテクチャのデフォルト採用
• React Native DevTools
• 高速化されたMetroの解決
• Box ShadowとFilterスタイルプロパティ

破壊的変更

• react-native-community/cliへの依存関係の削除
• ネイティブライブラリのマージにより、Androidアプリのサイズが約3.8MB削減
• 最小iOSおよびAndroid SDK要件の更新

ハイライト

React Native新アーキテクチャのデフォルト採用

React Native 0.76から、プロジェクトで新アーキテクチャがデフォルトで有効になります。新アーキテクチャは、React Nativeの内部を書き直したもので、アプリ開発者がReactを使用して高品質なネイティブアプリケーションを開発できるようにします。

本日、新アーキテクチャが本番環境での使用準備が整ったことを発表できることを嬉しく思います。

この変更は、React Nativeの進化におけるマイルストーンであり、新アーキテクチャに含まれるものと、それがReact Nativeの将来をどのように形成するかを理解するために、専用のブログ記事をお読みください: 新アーキテクチャの正式リリース。

React Native DevTools

新しいデフォルトのデバッグエクスペリエンスであるReact Native DevToolsの最初の安定版をリリースします。

すべてのプラットフォームでReactをデバッグするために使用するツールは、信頼性が高く、使い慣れたもので、シンプルで、まとまっているものにする必要があります。React Native DevToolsはこれらの原則に基づいて設計されており、React Nativeと深く統合されたブラウザに似た開発者ツールです。主な機能を以下に示します。

• 使い慣れた、Webに似たツール - Chrome DevToolsをベースにした、信頼性の高いブレークポイント、ウォッチ値、ステップスルーデバッグ、スタック検査、豊富なJavaScriptコンソールを備えたフル機能のデバッガ。これらのコア機能は、リロード時にも信頼性高く動作します。
• 改善され、統合されたReact DevTools - 組み込みのReactコンポーネントインスペクターとプロファイラーがシームレスに動作し、コンポーネントの強調表示が高速化され、信頼性が向上しています。
• UXの向上 - ブレークポイントでアプリが一時停止していることが明確になる新しいデバッガで一時停止中オーバーレイが表示されます。LogBoxの警告はサマリーとして表示され、DevToolsが接続されていると非表示になります。
• 再接続動作の修正 - JavaScriptブレークポイントは、リロード時やDevToolsが切断されて再接続された場合でも、信頼性高く動作するようになりました。ネイティブの再構築後でも、DevToolsは同じアプリに再接続できます。
• インスタント起動 - React Native DevToolsは、設定なしでデフォルトで準備できます。アプリ内のDevメニューから開くか、jを使用してCLIサーバーでデバッグします。CLIサーバーは、複数のエミュレータとデバイスをサポートするようになりました。

React Native DevToolsは、0.73で最初にリリースされた実験的デバッガエクスペリエンスとは異なり、以前のデバッグオプションとは根本的に異なります。過去1年間で再構築した新しいバックエンドデバッグスタックに切り替わります。これは、以前のツールとの互換性が変更されたことを意味し、エンドツーエンドでより信頼性の高いエクスペリエンスが期待されます。この新しいスタックを基盤として、パフォーマンスパネルやネットワークパネルなど、将来さらに多くの機能を確実に実装することを目指しています。

Metroでのログの段階的廃止

次のリリースでは、最新のブラウザツールと整合させるために、Metroで転送されたログを削除し、古いデバッグ統合を削除します。代わりに、ログにはReact Native DevToolsのフル機能のコンソールパネルを使用してください。よくある質問で詳細を参照してください。

リンク

• 更新されたデバッグドキュメント
• React Universe Confでの発表
• フィードバックスレッドとよくある質問

高速化されたMetroの解決

インポートパスからモジュールを見つける役割を担うMetroのリゾルバーにいくつかのパフォーマンス改善を行いました。約15倍高速化されました。これにより、特にウォームビルドのパフォーマンスが向上し、約4倍高速化されました。

ボックスシャドウとフィルターのスタイルプロパティ

0.76で、新しいアーキテクチャ専用のスタイルプロパティとしてboxShadowとfilterが2つ追加されました。これらのプロパティは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では動作しません。
• insetにできません。
• spreadがありません。
• 背景色が設定されていないViewでは動作しません。
• 個別のプロパティであるため、Webと同じ構文を使用できません。

制限事項と仕様からのずれ

• デフォルトのシャドウの色は黒で、親の色ではありません。
• Androidの通常のシャドウは、Android 9以降でサポートされています。
• Androidのinsetシャドウは、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にはdropShadow値がありますが、boxShadowとはわずかに異なります。最大の相違点は、dropShadowがアルファマスクであることです。つまり、影は、アルファコンポーネントがゼロ以外であるピクセルによってのみキャストされます。一方、boxShadowは、内部に何もなくても、要素の境界ボックスの周りにキャストされます。さらに、dropShadowにはspread distanceパラメーターがなく、inset（要素の内側にキャストされるシャドウ）にすることはできません。

制限事項と仕様からのずれ

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

破壊的変更

@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を正しくロードするために必要であり、アップグレードヘルパーに含まれています。

ライブラリ作成者は、カスタムC++コードがない限り、この変更の影響を受けません。

この変更の詳細な技術的な解説と、ライブラリ作成者への提案については、専用の投稿で詳しく読むことができます。

最小iOSおよびAndroid SDK要件の更新

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

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

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

その他の破壊的変更

• アニメーション
  • ループアニメーションでReactへの状態更新の送信を停止します。これは、ループアニメーションで不要な再レンダリングを引き起こしていました。
• 開発者ツール
  • 新しいアーキテクチャの下でインスペクターパネルのパフォーマンスとネットワークタブを削除します。（RFC）
• テキストエンジン
  • TextLayoutManagerでAttributedStringの代わりにAttributedStringBoxを常に使用します。

Android

• レンダリング
  • ビューの背景は、もはや直接ReactViewBackgroundDrawableまたはCSSBackgroundDrawableではありません。

iOS

• ターボモジュール
  • 純粋なC++モジュールの自動リンクのためのRCT_EXPORT_CXX_MODULE_EXPERIMENTALマクロを削除しました。

謝辞

React Native 0.76には、156人の貢献者からの1070を超えるコミットが含まれています。皆様の尽力に感謝いたします！

このリリースの投稿で機能のドキュメント作成に取り組んでくださった追加の著者の方々に感謝申し上げます。

• Joe VilchesとNick Gerleman ボックスシャドウとフィルターのスタイルプロパティ。
• Alex Hunt React Native DevTools。
• Nicola Corti 単一ライブラリとしてのAndroidの提供。

0.76へのアップグレード

既存のプロジェクトのReact Nativeのバージョンの間のコード変更を確認するには、アップグレードに関するドキュメントに加えて、React Nativeアップグレードヘルパーを使用してください。

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

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

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

情報

React Nativeの最新安定版は0.76となり、0.73.xはサポート対象外となりました。詳細はReact Nativeのサポートポリシーをご覧ください。近日中に0.73の最終的なEOL（サービス終了）アップデートを公開する予定です。