こんにちは、menu事業部フロントエンドエンジニアの久米です。
2025年4月16日(水)に弊社オフィスにてReact Native Meetup #21が開催されました📚
本記事では、当日のセッションの全体的なレポートと、その中でも特に興味深かった内容を紹介したいと思います。
※前回、株式会社マイベストさまにて開催されたReact Native Meetup #20の現地レポートは💁こちら
イベント全体のレポートと各セッションへの所感
イベントは約70人の参加者で、会場が非常に賑わっていました。
今回のMeetupでは弊社menu事業部から2人のメンバーが登壇しました🙌
スライドは以下からご覧頂けます
合計5つのセッションがあり、以下のようなテーマについてLTが行われました。
① React NativeでWidgetとLiveActivityの実装を簡略化
React Native(Expo)でWidgetとLiveActivityを実装するにあたって、expo-apple-targetsを使用してそれらを簡略化する方法が紹介されました。
expo-apple-targetsとは？
An experimental Expo Config Plugin that generates native Apple Targets like Widgets or App Clips, and links them outside the /ios directory. You can open Xcode and develop the targets inside the virtual expo:targets folder and the changes will be saved outside of the ios directory. This pattern enables building things that fall outside of the scope of React Native while still obtaining all the benefits of Continuous Native Generation.
本来ならターゲットの切り替えやビルド設定が煩雑になりがちな Apple プラットフォーム向けアプリ開発において、expo-apple-targets を活用することで、iOS・iPadOS・visionOS などの各ターゲットに対して、よりシンプルかつ明示的にビルド設定を行うことが可能になる点について非常に魅力を感じました。
CNG（Continuous Native Generation）のワークフローに乗っかりつつ、App extensionsの機能が開発できるので、WidgetやLiveActivityを実装する機会がある場合はぜひ試してみたいですね🔥
なお、今回登壇されたSoumyajeetさんが、本件についてさらに詳しく掘り下げた技術記事を公開しております。当日の内容に加えて、コードによる解説も書かれておりますので興味のある方はぜひこちらも併せてご覧ください。
② リアルタイム技術・通信系
React Nativeとリアルタイム通信
フロントエンドにおいてリアルタイム通信をする手段の紹介から始まり、React Nativeでそれらを実現するためにはどうすれば良いかが、実例を交えて紹介されました。
個人的に特に気づきだったのが、Server-Sent Eventsにおいて、React Nativeが提供するfetchでは、従来のブラウザfetchによるストリーム（ReadableStrem）をそのまま扱うことができない点でした。👀 （普通に実装してると最初ハマりそう）
ただ、解決策としてはWeb環境とモバイル環境で一貫して動作するWinterCG準拠のexpo/fetchを使用することで、ReadableStream を用いたストリーミング処理やチャンク単位でのデータ読み込みといった通信ロジックを、React Native 上でも実現することが可能になるようです🙌
Realtime Voice Aiプロダクト開発
React Native (Bare Workflow)にて、リアルタイムボイスAIアプリケーションの開発事情(技術選定/Realtime APIの紹介・比較)が紹介されました。
個人的に特に印象に残っているのが、TauriでMacとWindowsのデスクトップアプリケーションを開発している点でした。
Tauriとは？
Tauri は、主要なデスクトップおよびモバイル・プラットフォームのすべてで、軽量・高速なバイナリ・ファイルを構築できるフレームワーク（仕組み）です。フロントエンドには、HTML、JavaScript、CSS にコンパイルされるフレームワークを利用してユーザー・エクスペリエンス（UX）を構築し、バックエンドの処理ロジックには、必要に応じて Rust、Swift、Kotlin などの言語を活用できます。
Tauriの利点
・アプリ構築のための安全なプログラム基盤
・システム本体の Web ビューを使用することによるでバンドルサイズの軽量化
・任意のフロントエンド技術の利用や複数のコンピュータ言語を統合できる柔軟性
Rustベースのバックエンドと、HTML/CSS/JavaScriptベースのフロントエンド（Vue, React, Svelte, Solidなど）を組み合わせて、クロスプラットフォームなデスクトップアプリを構築できるフレームワークのようですね👀
デスクトップアプリと聞くとElectronをよく耳にし、Tauriについてほとんど知見がなかったのですが、今回のセッションを経て、今後のデスクトップアプリの開発ではTauriも１つの選択肢となりそうだと感じました。
③ 令和最新版！モバイルアプリの開発指南 写真・動画のファイルの読み込み編
「よくある機能実装」を再考するというテーマで、特に写真・動画を読み込み実装についてベストプラクティスの検討〜提案内容が紹介されました。
何かと手間がかかるパーミッション周りの実装ですが、写真・動画の取得において、iOS、Android共にUIを作り込む必要がない場合であれば、実行時権限ダイアログが不要になることは気づきでした💡
既存仕様や実装を疑ってみて、本当に必要な機能や実装かを見極め直すことは、開発者とユーザー両方の側面から見ても効率的かつ快適なアプリ体験を実現する上で大切だと感じました。
④ ExpoとNext.jsで Web/Native両対応アプリ開発
ExpoとNext.jsを組み合わせることで、単一のコードベースからWebとモバイルの両方に対応したアプリケーションを開発する方法が紹介されました。
特に印象的だったのは、スタイリングライブラリにTamagui、ルーティングを統一的に扱うためのラッパーライブラリとしてSolitoを使用している点でした🐤
Tamaguiは、スタイルを記述する際にWebとReact Nativeの両方で統一された記述ができるUIライブラリで、コンポーネント設計やテーマの切り替えなども柔軟に対応してくれます。
見た目の一貫性を保ちつつ、開発効率も高めてくれる印象で、デザインシステムとしての側面も強く感じますね👀
Solitoは、Next.jsとReact Navigationの橋渡しをしてくれるライブラリで、ルーティングの定義やページ遷移の書き方をWeb／モバイルで共通化できるのが大きな利点です。
特にルーティングの複雑さに悩まされがちなプロジェクトでは、Solitoのような仕組みがあることでコード全体の保守性が高まると思いました。
また、ディープリンクや動的ルーティングを含むケースでも同じ設計思想で対応できる点が良さそうですね👍
体感全体の7割ほどがWebとNativeでコードが共通化できており、ロジックなどWebとNativeで乖離がない状態にできている
引用：ExpoとNext.jsで Web/Native両対応アプリ開発
WebとNativeコードが全体の7割ほど共通化できているのは、開発効率や保守性の面で非常に魅力的でした。
特に、Webとモバイルで別々にUIやロジックを実装・管理する手間が大幅に削減されることで、少人数のチームでも複数プラットフォームへの展開が現実的になりそうですね✨
また、コードベースが一元化されることで、機能追加や不具合修正のスピードも向上する可能性がある点も大きなメリットだと実感しました。
おわりに
前回のReact Native Meetup #20に続き、今回のMeetupも沢山の学びがありました。
懇親会では、ドーナツを頂きながら、AIや最近の技術動向、日頃の開発で感じている課題や工夫している実装の話などで盛り上がり、とても充実した時間を過ごすことができました🍩
以上、React Native Meetup #21の現地レポートでした！
▼採用情報
レアゾン・ホールディングスは、「世界一の企業へ」というビジョンを掲げ、「新しい”当たり前”を作り続ける」というミッションを推進しています。
現在、エンジニア採用を積極的に行っておりますので、ご興味をお持ちいただけましたら、ぜひ下記リンクからご応募ください。
Views: 0
