React Native 0.76 - 新アーキテクチャのデフォルト化、React Native DevToolsなど
本日、React Native 0.76のリリースを発表できることを嬉しく思います！
これはReact Nativeにとって大きな節目となるリリースです。新アーキテクチャがデフォルトで有効になり、React Native DevToolsが導入されます。これは、私たちのチームによる6年間の努力と、素晴らしい開発者コミュニティのサポートの集大成です。
ハイライト
破壊的変更
- react-native-community/cliへの依存関係を削除
- ネイティブライブラリのマージにより、Androidアプリが約3.8Mb小さくなりました
- 最小iOSおよびAndroid SDK要件の更新
ハイライト
React Nativeの新アーキテクチャがデフォルトに
React Native 0.76から、あなたのプロジェクトでは新アーキテクチャがデフォルトで有効になります。新アーキテクチャは、アプリ開発者がReactを使って高品質なネイティブアプリケーションを開発できるようにするための、React Nativeの内部の書き直しです。
本日、新アーキテクチャが本番環境で利用可能になったことを発表できることを嬉しく思います。
この変更はReact Nativeの進化における画期的な出来事です。新アーキテクチャに含まれる内容と、それがReact Nativeの未来をどのように形作っていくのかを理解するために、ぜひ専用のブログ記事をお読みください: 新アーキテクチャの登場 (The New Architecture is Here)。
React Native DevTools
新しいデフォルトのデバッグ体験であるReact Native DevToolsの最初の安定版をリリースします。
私たちは、すべてのプラットフォームでReactをデバッグするために使用するツールが、信頼性が高く、馴染み深く、シンプルで、一貫性のあるものであることを目指しています。React Native DevToolsはこれらの原則を実現します—React Nativeと深く統合された、ブラウザに準拠した開発者ツールです。主な機能は以下の通りです。
- ウェブに準拠した使い慣れたツール — 信頼性の高いブレークポイント、値のウォッチ、ステップ実行デバッグ、スタック検査、豊富なJavaScriptコンソールを備えた、Chrome DevToolsベースのフル機能デバッガ。これらのコア機能は、リロードをまたいでも確実に動作するようになりました。
- 改善され統合されたReact DevTools — 組み込みのReactコンポーネントインスペクタとプロファイラがシームレスに動作し、コンポーネントのハイライトがより高速かつ信頼性の高いものになりました。
- 改善されたUX — 新しい「Paused in Debugger」オーバーレイが表示され、アプリがブレークポイントで一時停止していることが明確になります。LogBoxの警告は要約として表示され、DevToolsが接続されている場合は非表示になります。
- 再接続の挙動を修正 — JavaScriptのブレークポイントは、リロードをまたいだり、DevToolsが切断・再接続されたりしても、確実に動作するようになりました。DevToolsは、ネイティブのリビルド後でも同じアプリに再接続できます。
- 即時起動 — React Native DevToolsは、設定不要でデフォルトで利用可能です。アプリ内の開発メニューから、またはCLIサーバーでjキーを押して開くことができ、複数のエミュレータやデバイスに対応しました。
React Native DevToolsは、0.73で初めて提供されたExperimental Debugger体験を含め、これまでのデバッグオプションとは根本的に異なります。この1年で再構築した新しいバックエンドのデバッグスタックに切り替わっています。これは、以前のツールとの互換性が変更されたことを意味し、エンドツーエンドでより信頼性の高い体験が期待できます。私たちはこの新しいスタックを基盤として、将来的にはパフォーマンスパネルやネットワークパネルなどのさらなる機能を確実に実装していく予定です。
Metroでのログの段階的廃止
次のリリースでは、現代のブラウザツールに合わせて、古いデバッグ統合を削除するために、Metroでの転送ログを削除します。代わりに、ロギングにはReact Native DevToolsのフル機能のコンソールパネルを使用してください。詳細はFAQをご覧ください。
リンク
より高速なMetroの解決
Metroのリゾルバ（importパスからモジュールを見つけるコンポーネント）にいくつかのパフォーマンス改善を行い、約15倍高速化しました。これによりMetroの全体的なパフォーマンスが向上し、特にウォームビルドでは約4倍高速化されたことが確認されています。
Box ShadowとFilterスタイルプロパティ
0.76では、新アーキテクチャ専用の2つのスタイルプロパティ、boxShadowとfilterを追加しました。これらのプロパティは両方ともウェブ上に存在し、チームは可能な限り仕様に準拠しているため、これらのプロパティは予測可能で、馴染みやすく、最終的に採用しやすくなっています（例外については、制限と仕様からの逸脱のセクションを参照してください）。その結果、ウェブのドキュメントを参照してこれらの動作を完全に理解することができますが、以下に述べるいくつかの重要な違いがあります。
boxShadow
boxShadowは要素に影を追加し、影の位置、色、サイズ、ぼかし具合を制御する機能を提供します。これらの引数の完全な概要と、自分で試すためのFiddleについては、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の通常の影はAndroid 9+でサポートされます
- Androidの内側の影はAndroid 10+でサポートされます
filter
filterは要素に特定のグラフィカルフィルタを追加します。明るさ、彩度、色相などを変更できるカラーフィルタと、ぼかしや影を追加できる非カラーフィルタが混在しています。各フィルタ関数の完全な概要と、自分で試すためのFiddleについては、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を正しくロードするために必要であり、upgrade-helperに含まれています。
ライブラリ作成者は、カスタムC++コードがない限り、この変更の影響を受けません。
この変更に関する技術的な詳細やライブラリ作成者への提案については、専用の投稿で詳しく読むことができます。
最小iOSおよびAndroid SDK要件の更新
最小プラットフォームとSDKのバージョンを更新しました
この変更は、0.75がリリースされた今年の初めに発表されました。背景については、AndroidとiOSの専用投稿を参照してください。
その他の破壊的変更
- Animation
- ループアニメーションでReactへの状態更新の送信を停止。これにより、ループアニメーションで不要な再レンダリングが発生していました。
- devtools
- 新アーキテクチャ下のインスペクタパネルからパフォーマンスとネットワークタブを削除。（RFC）
- text engine
- TextLayoutManagerでAttributedStringの代わりに常にAttributedStringBoxを使用するように変更
Android
- rendering
- Viewの背景が直接
ReactViewBackgroundDrawableまたはCSSBackgroundDrawableではなくなりました
- Viewの背景が直接
iOS
- turbomodule
- 純粋なCxxモジュールの自動リンクのための
RCT_EXPORT_CXX_MODULE_EXPERIMENTALマクロを削除しました。
- 純粋なCxxモジュールの自動リンクのための
謝辞
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
0.76は現在、React Nativeの最新の安定版であり、0.73.xはサポート対象外に移行します。詳細については、React Nativeのサポートポリシーを参照してください。近い将来、0.73の最終的なEOL（End-of-Life）アップデートを公開する予定です。