はじめに
こんにちは、menu事業部フロントエンドエンジニアの久米です。
2025年2月18日(火)に株式会社マイベストさまのオフィスにて開催されたReact Native Meetup #20に参加してきました📚
本記事では、当日のセッションの全体的なレポートと、その中でも特に興味深かった内容を紹介したいと思います。
※前回開催されたReact Native Meetup #19の現地レポートは💁こちら
イベント全体のレポートと各セッションへの所感
イベントは約100人の参加者で、会場が非常に賑わっていました。
個人的に今回のMeetupで特に注目していたのは、React Native開発に大きく貢献されているMetaとCallstack両チームのメンバーが、ゲストとして参加された点です🔥
合計7つのセッションがあり、以下のようなテーマについてLTが行われました。
① Expoの進化と再評価
過去にExpoの導入を断念した企業が、その後の技術進化を背景に再度導入を検討する事例
Expoの進化は目覚ましく、以前はできなかったことが今では簡単に実現できるようになっていることに驚きました。
導入を断念した企業が再びExpoに注目しているという事実は、Expoの可能性を改めて示していると感じました。
弊社ではReact Native(Expo)を使用していますが、Bare WorkflowからCNG(Continuous Native Generation)への移行が進んでおります。
今後のExpoの更なる進化が楽しみです🙌
Bolt+Expoでアプリ開発
BoltとExpoの組み合わせは、開発効率を大幅に向上させる可能性を秘めていると感じました。Boltを使用してアプリを開発する時のプロンプトの考え方や注意点が実例を交えて紹介されました。
特に、プロンプトを「プロジェクト概要」「機能一覧要件」「コンポーネント設計」「ナビゲーション設計」「スタイルガイド」のように構造化して記述することで、より精度の高いコード生成が期待できるという点が印象的でした。
② ビルド関連
ビルドプロファイリング
React Native(Expo)のビルドプロセスとそのパフォーマンスについてグラフを用いて説明頂きました。
特にビルド時間の内訳と直列・並列処理を行なっている場所をグラフで確認するアプローチが非常に興味深かったです。
ビルドプロセスとそのパフォーマンスを可視化することで、ボトルネックを特定するという視点は、開発体験の向上において非常に重要だと感じました。
React Native用のビルドツールRe.Packを使用したModule Federation
Re.Packは今回のイベントで初めて知りましたが、React Nativeで開発されたアプリケーションにおけるマイクロフロントエンドの可能性を感じる内容でした。
こちらについては、別のセクションで少し掘り下げてみたいと思います。
③ 先端技術の活用と開発課題
ViroとExpoを用いたAR開発の事例紹介
AR開発は個人的にハードルが高い印象を持っていましたが、ViroとExpoを使えば比較的簡単に実現できることが分かりました。AR技術の可能性を感じるとともに、React Nativeの応用範囲の広さに改めて驚かされました。
個人開発や技術検証で触ってみるのも面白そうです👀
React Nativeのissueへの向き合い方
普段開発を行っている中で発生する不具合（issue）への向き合い方を改めて考える機会になりました。
特に、issueの報告から解決までのプロセスを体系的に理解できた点が大きかったです。自身でissueを解決できない場合でも、的確な情報を揃えて報告することで、他の開発者の協力を得やすくなることも実感しました。
まとめ
React Nativeの最前線から開発における実践的な課題、そして未来への展望まで、多岐にわたる内容で非常に興味深く、刺激的なものでした。
特に印象に残ったセッション: Re.PackとModule FederationによるReact Nativeマイクロフロントエンド
今回のイベントで個人的に特に印象に残ったのは、Re.PackのModule Federationを扱うことで実現する、React Nativeのマイクロフロントエンド構成についてのセッションでした。
Re.Packの簡単な説明は公式より引用させて頂きます🙇♂️
Re.Pack
A webpack-based toolkit to build your React Native application with full support of webpack ecosystem.
マイクロフロントエンドとは？
Microfrontends (MFEs) are an architectural approach that breaks down a web application’s frontend into smaller, independently deployable pieces that can be downloaded on demand. Think of them as the frontend equivalent of microservices: instead of one massive, tangled codebase, you get modular chunks that different teams can own, develop, and ship on their own timelines. It's important to note that we're not talking about producing a single JS bundle from multiple independent teams. It's about producing many JS bundles that can be later downloaded on demand by a mobile app.
React Nativeにおけるマイクロフロントエンド
React Nativeにおいても、マイクロフロントエンドの導入は、アプリケーションの複雑さやチームが大きくなるにつれて重要な課題になると思います。しかし、従来のReact Nativeでは、コードの共有や依存関係の管理が複雑になり、それの実現は容易でなかったと思います。
しかし、WebpackをベースとしたReact Native用のツールキットRe.Packの機能の一つModule Federationを使用することで、複数のJavaScriptアプリケーション間でコードとリソースを共有できるようになるという点は非常に魅力的であると感じました。
Re.Pack + Module Federationの仕組み
Re.PackのModule Federationが組み込まれたマイクロフロントエンドでは、上記のように、機能を A / B / C に分割し独立して開発、ビルドされます。そしてApp Shellと呼ばれるアプリケーションの土台となる部分が、実行時に必要なマイクロフロントエンドを動的にロードし、画面を表示します。
これにより、チームの境界が明確に分けられ、各マイクロフロントエンドが独立して開発・デプロイできるため、開発効率が向上する可能性があるのだと理解しました。
加えて、機能によってアプリ内の境界が分けられるという点で、React NativeのOTAアップデートを行う際に、従来のように全てのJSバンドルを置き換える必要がなく、よりターゲットを絞ってデプロイすることができるようになるという点も興味深かったです。
モノリス環境のOTAでもそれほど長い時間はかからない認識ですが、マイクロフロントエンドを導入することでどれほどの違いがあるのか気になりますね🤔
まとめ
Re.PackのModule Federationを活用することで、React Nativeでもマイクロフロントエンドの恩恵を受けられることがわかりました。💡
チームやプロダクトの状況に応じて、適切にマイクロフロントエンドを導入することで、開発効率や保守性を向上させることができるのではないでしょうか。
より詳細な情報や技術的な解説については、ぜひRe.Packの公式サイトやドキュメントをご覧ください。
Re.Pack公式サイト：https://re-pack.dev/
Re.Packのマイクロフロントエンド実装例：https://github.com/callstack/super-app-showcase
おわりに
React Native Meetup #20に参加してみて、たくさんの学びがあったと感じています。
休憩時間にはサブウェイのサンドイッチを頂きながら、居心地の良い雰囲気でセッションを聞くことができました🥪
今後もこういったイベントには積極的に参加していきたいですね〜💨
以上、React Native Meetup #20の現地レポートでした！
次回のReact Native Meetup #21はmenuのオフィスで開催予定です！！！
▼採用情報
レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい"当たり前"を作り続ける」というミッションを推進しています。
現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。