にょっす速報🐮✋

【解説】React Native 0.76リリース！新アーキテクチャのデフォルト適用とReact Native DevTools

この記事の目次

React Native 0.76のリリースは、React Nativeの進化における重要なマイルストーンです。このバージョンから、新アーキテクチャがデフォルトとして有効になり、React Native DevToolsが新たに導入されるなど、多くの注目すべき更新が含まれています。本記事では、React Native 0.76の詳細なアップデート内容、パフォーマンスの改善点、新たなデバッグツール、そして開発者が注意すべき変更点について詳しく解説します。

React Native 0.76 の注目ポイント

1. 新アーキテクチャをデフォルトで有効化

React Native 0.76から、新しいアーキテクチャがデフォルトで有効になります。この新アーキテクチャはReact Nativeの内部構造を刷新し、Reactを使用したネイティブアプリの開発をより効率化するための大幅な改良が施されています。これにより、パフォーマンス向上や拡張性の向上が期待され、React Nativeが本格的なプロダクション環境で活用しやすくなりました。新アーキテクチャの詳細については、公式ブログ記事「The New Architecture is Here」にて確認可能です。

2. 新デバッグツール「React Native DevTools」

React Native DevToolsは、Chrome DevToolsに基づく新しいデバッグツールで、React Nativeに統合された信頼性の高いデバッグ環境を提供します。React Native DevToolsには以下の特徴が含まれます：

  • Chrome DevToolsに似た使い勝手：ブレークポイントやウォッチ、ステップ実行など、ウェブデバッグに慣れた開発者にとって使いやすい設計。
  • React DevToolsの改善：コンポーネントのインスペクタやプロファイラが統合され、コンポーネントのハイライト表示がよりスムーズに。
  • UIの改良：ブレークポイントで停止している際に表示されるオーバーレイが追加され、デバッグ時のステータスが明確に。
  • 高速な再接続と自動起動：ネイティブビルド後でも再接続が可能で、複数のエミュレータやデバイスでのデバッグもサポート。

DevToolsは、これまでのデバッグオプションと異なり、最新のバックエンドデバッグスタックに基づいているため、従来のツールに比べて高い信頼性と使いやすさが実現されています。将来的にはパフォーマンスやネットワークパネルも追加予定です。

3. Metroの解決速度が15倍に高速化

Metroのリゾルバが改良され、特にウォームビルドの速度が大幅に向上しました。インポートパスからモジュールを見つける処理が15倍高速化され、全体的なビルド速度も改善されています。これにより、開発サイクルがさらに短縮され、React Nativeプロジェクトの効率が向上します。

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

React Native 0.76では、ウェブでおなじみのboxShadowとfilterスタイルプロパティが追加されました。これらのプロパティは新アーキテクチャのみで使用可能で、既存のCSSの仕様に準拠しつつ、以下のようなカスタマイズが可能です：

  • boxShadow：影の位置、色、サイズ、ぼかし具合を細かく設定可能。
  • filter：明るさや彩度、ぼかし効果などを制御し、視覚効果を強化。

ただし、iOSやAndroidのバージョンによっては一部制限があるため、対応するドキュメントで確認することをおすすめします。

破壊的変更（Breaking Changes）

React Native 0.76にはいくつかの破壊的変更が含まれており、開発者はプロジェクトの互換性に注意する必要があります。

  1. @react-native-community/cliの依存関係削除
    React Native 0.76では、フレームワークの中立性を目指して@react-native-community/cliの依存関係が削除されました。CLIを使用する場合はpackage.jsonに直接追加する必要があります。

  2. Androidアプリのサイズ削減
    ネイティブライブラリの統合により、Androidアプリのサイズが約3.8MB（全体の20％）削減され、起動時間も短縮されました。この変更に伴い、MainApplicationの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)
    }
}

  3. 最小iOSおよびAndroid SDK要件の更新
    iOSは13.4から15.1に、AndroidはSDK 23からSDK 24にそれぞれ引き上げられました。これにより、新しい機能やパフォーマンス改善を活用できるようになります。

アップグレードガイド

React Native 0.76へのアップグレードには、React Native Upgrade Helperを使用してコードの変更を確認することが推奨されています。また、Expoを利用している場合は、Expo SDK 52でReact Native 0.76がサポートされます。

まとめ

React Native 0.76は、新アーキテクチャの導入によりReact Nativeの生産性とパフォーマンスが大幅に向上しました。新たなデバッグツールのReact Native DevToolsも登場し、開発効率がさらに向上しています。一方で、破壊的変更も多いため、既存のプロジェクトをアップグレードする際は注意が必要です。React Nativeの最新バージョンを活用し、モバイルアプリの開発をさらに効率化していきましょう。

);

コメント(0件)

トピックス