Alex Hunt – Metro and React Native DevX in 2023

Summary

アレックスは、Mata社のReact開発者エクスペリエンスチームのソフトウェアエンジニアとして、React Nativeに組み込まれたJavaScriptビルドツールであるMetroの紹介と、2023年の焦点を話します。Metroは、React Native CLIやExpo CLIがアプリケーションをコンパイルする際に使用され、JavaScriptコードと依存関係を最適化されたバンドルに変換します。MetroはReact Native開発の中心的な役割を果たしており、高速でスケーラブルなアーキテクチャを持っています。また、MetroはReact Nativeのニーズに合わせて設計されており、React Native CLIやExpo Dev Serverに組み込まれています。2022年にチームが拡大し、オープンソースコミュニティにMetroの利点を提供するようになりました。今後の焦点は、npmの互換性やDynamic Importsなどの機能の向上、React Native開発体験全体の改善にあります。また、React Nativeのデバッグ機能の強化も計画中です。

Takeaways

• 📚 AlexはMataのReact開発者経験チームのソフトウェアエンジニアで、React Nativeに組み込まれているMetroについて話しました。
• 🚀 MetroはReact NativeのJavaScriptビルドツールで、アプリケーションのJavaScriptコードと依存関係を最適化されたバンドルにコンパイルします。
• 🔄 Metroは高速でスケーラブルで、エピックな規模でのパフォーマンスを維持し、開発者が即時のフィードバックを得られるように設計されています。
• 🌟 2022年にReact Native CLIとExpo CLIが使用するようにMetroが成長し、オープンソースコミュニティと協力して機能を強化しました。
• 🔍 MetroはReact Nativeの開発体験に組み込まれており、React Native CLIとExpo Dev Serverに組み込まれています。
• 🔗 MetroはReact Nativeと密接に連携し、React Nativeのニーズに焦点を当てた開発ツールです。
• 🔄 2022年には、Metroは33のリリースと52のバグフィックスを含んでいます。また、`require.context`とシンボリックリンクのサポートが追加されました。
• 📦 パッケージエクスポートのサポートは、npmパッケージとの互換性を向上させるとともに、React Nativeのパッケージメンテナーが新しい機能を活用できるようになります。
• 🔍 ラズリバンドルは、開発者が大規模なアプリケーションで作業する際に、コンパイルにかかる時間を短縮し、素早くアプリを開始できるようにします。
• ⚡️ SWCはBabelの代替として、より高速なコンパイルとバンドルを可能にします。MetroはSWCと統合し、より高速で正確なバンドルを目指しています。
• 🛠️ MetroはReact Nativeの開発体験を向上させるために、デバッグ、プロジェクト設定、アップグレードなどの他の問題にも取り組んでいます。
• 🤝 コミュニティへの貢献を歓迎し、初心者向けの問題をリポジトリに追加し、オープンソースで機能を構築する手助けを提供しています。

Q & A

アレックスが所属しているチームの主な責任は何ですか？

アレックスは、Mata社内のReact開発者体験チームに所属しており、MetroのほかにもReact NativeとReactコンポーネントを担当しています。彼らのチームは、React開発ツールチェーンのエンドツーエンドの体験を担当しており、その中にはMetroやFB Metro（内部機能セットを持つMetroのラッパー）のカバレッジが含まれます。

MetroはなぜReact Nativeの開発に不可欠なツールですか？

MetroはReact NativeのJavaScriptビルドツールであり、アプリケーションを実行するために必要なJavaScriptコード、依存関係、アセットを準備し、最適化されたJavaScriptバンドルをターゲットプラットフォーム用にコンパイルします。また、開発中の迅速な更新や、デバイス上のJavaScriptエンジンとのインターフェースなど、React Native開発エクスペリエンスの主要な機能を支える役割を果たしています。

Metroがスケーラビリティを持つ理由は何ですか？

Metroは並列処理を使用し、ワーカーを活用して可能なかぎり不要な作業を避けることによりスケーラビリティを確保しています。また、キャッシュアーティファクトを再利用することで、同じプロジェクトで作業するチームのスピードを上げています。これにより、変更されていないファイルの再ビルドをローカルマシンが行う必要がなくなります。

アレックスが言及した「ファストリフレッシュ」とは何ですか？

「ファストリフレッシュ」は、開発中に開発者に即時のフィードバックを提供する機能で、コードベースの規模に関係なく動作します。Metroはこの機能をサポートし、開発者がコード変更を行った際に即座にフィードバックを得られるようにしています。

Metroが提供する「遅延バンドル」とは何ですか？

遅延バンドルは、開発者が作業している画面のコードのみをバンドルする新しい機能です。これにより、アプリが大きくなっても開発が素早く始められます。遅延バンドルは、標準のJavaScriptのDynamic import構文とreact.lazy APIをサポートし、必要になったときにクライアントがMetroから別々のバンドルを取得できるようにしています。

アレックスが言及した「パッケージエクスポート」とは何ですか？

「パッケージエクスポート」は、npmパッケージがパッケージエントリーポイントを指定するための現代の仕様です。これにより、React Nativeのアプリ開発者は、npmパッケージとの互換性が向上し、プロジェクトですぐに使用できるようになります。また、パッケージのエンカプスレーションや条件付きエクスポートなどの新機能を使用することもできるようになります。

Metroで使用されているSWCとは何ですか？

SWCは、Babelの強力な代替品であり、多くのWebバンドルツールで使用されています。MetroはSWCと統合することで、JavaScriptコードのコンパイルを高速化し、Reactコードをより簡単に記述できるようにしています。

React Nativeのデバッグに対するアレックスのチームの取り組みとは何ですか？

アレックスのチームは、React Nativeのデバッグを改善するために、X Google ignorelist Source map拡張機能や、Chrome DevToolsでの1クリックHermesデバッグ、React DevToolsのイントグリッシュを提供することで、デバッグの簡便化を目指しています。また、デバッグワーキンググループを形成し、パートナーと共に取り組みを進めています。

アレックスが言及した「ツリーシェイキング」と「バンドル分割」とは何ですか？

「ツリーシェイキング」は、コードベースから未使用のコードを削除することで、バンドルサイズを小さくするプロセスです。「バンドル分割」は、大きなアプリケーションを複数の小さなバンドルに分割し、必要なものだけを読み込むことでパフォーマンスを向上させる手法です。これらは、Metroで今後取り上げられる予定の最適化機能の一部です。

アレックスが言及した「React Native EU」とは何ですか？

「React Native EU」は、React Native開発者のためのカンファレンスであり、アレックスのチームはそのイベントでMetroの機能について議論し、フィードバックを得るために参加しました。これはReact Nativeコミュニティと密接に連絡を取り、共に成長する取り組みの一環です。

アレックスが言及した「パブリックRFC」とは何ですか？

「パブリックRFC」（Request for Comments）は、提案や機能の変更についてコミュニティにフィードバックを求めるプロセスです。アレックスのチームは、Metroのパッケージエクスポート機能の開発でRFCを使用し、公開してフィードバックを集め、最終的な解決策に至るまで繰り返し議論しました。