React Native Meetup#21 基調セッション ft menu

Transcript

1. 2025.4.16
 
 React Native Meetup #21 menu.inc Sponsor Talk
 React Nativeとリアルタイム通信

2. 👋 自己紹介
 matsuzakk 経歴 趣味 フロントエンジニア menuユーザーアプリ / オンクレ / 開発横断 HP => モノクレア => menu (ハード系 ) => (Web受託系 ) => (モバイル開発 ) 釣り・筋トレ・ご飯 余談 ・昨年12月、React Native Meetupの運営に参加した人
3. イントロ

4. AI時代 成長期真っ只中ですね
 AIツールも次から次へ登場して乱立中
5. フードデリバリーアプリも新規デザイン実装だけなら一瞬で終わる！ 
 by https://rork.app/
6. これからのエンジニア時代どうなる？ 
 • プロトコルやフレームワーク・言語など技術をつくれるエンジニア は依然強い ◦ LLMが認知していない概念を生み出せる人 ◦ 生成AIのおかげでこれらの技術を生み出す人も増える • 最適化して プロダクトや開発チームに還元できるエンジニア は強い ◦ AIをプロンプト・フィードバック・チューニングするため人間の学びは続く ◦ フロントエンドエンジニアは能力を差別化しづらくなりそう 最近よく考えます
7. 今日の懇親会でも皆さんの生成AIとの付き合い方
 聞かせてください！話しましょう！
 👍
 もちろん React Nativeの話もしましょう ＼(^o^)／
8. React Nativeでリアルタイム通信を実装するときの話
 本題入ります。
9. フロントエンドにおいてリアルタイム通信する主な手段 
 Server-Sent Events WebSocket WebRTC 通信方向 一方向（サーバー > クライアント） 双方向 双方向 プロトコル HTTP/HTTPS WebSocket プロトコル (ws://, wss://) 独自のプロトコル (ICE, STUN, TURNなどを組み合わせ ) 接続方法 EventSource WebSocket RTCPeerConnection DataChannel 利用シーン AI応答受信、通知など チャット、ゲーム、同期処理など 音声、ビデオ通話、ファイル転送 ブラウザ対応 ⚪ ⚪ ⚪ React Native 公式対応 × ⚪ × 使いやすさ 簡単 (サーバーの設定も軽い ) 難しい (接続管理が必要 ) 難しい（ NAT越えや信号処理など複雑） バイナリ通信対応 不可 可能（ ArrayBuffer, Blobなど） 可能　(ArrayBuffer) クライアントからの送信 不可 可能 可能
10. これらをReact Nativeで実装するには？
 に焦点を当てていきます

11. Server-Sent-Event

12. Server-Sent-Events と ストリーム処理(Stream API) について整理
 • Server Sent Events ◦ これ自体は HTTPベースの通信プロトコル (MIMEタイプ: text/event-stream) ◦ サーバーからの 一方向で、レスポンスは data: から始まるチャンク形式 • Stream API ◦ Javascriptで用意された データを逐次的に処理する手段 ◦ Server Sent Eventsの場合は読み込みで使うが、 API自体は書き込みもできるので 双方向
13. Server-Sent-Events の流れ

14. 余談: MCPの通信方式でも使われてますね 
 Client-Server間の通信方式はSSE 今この話題でいっぱい (ローカルリソースの場合は stdin/stdoutを使う方法もある )
15. よし、じゃあReact Nativeでも
 SSEのイベント受け取ってみよう

16. OpenAIのSDKを使って、Chat Completion API の応答を受け取ってみる
 const fetchChatStream = async () => { setResponseText('') setLoading(true) const client = new OpenAI({ apiKey: API_KEY, }) const stream = await client.chat.completions.create({ model: 'gpt-4o', messages: [ { role: 'user', content: inputText, }, ], stream: true, }) for await (const chunk of stream) { const delta = chunk.choices?.[0]?.delta?.content || '' setResponseText((prev) => prev + delta) } setInputText('') setLoading(false) } ← ここをtrueにすることで受け取れる https://platform.openai.com/docs/guides/streaming-responses?api-mode=responses
17. (NOBRIDGE) ERROR Error fetching stream: [Error: Attempted to iterate over a response with no body] あれ？
 React Native デフォルトの fetch だと ブラウザ環境における Response.body.getReader() などのスト リームAPIはサポートされていない。 つまり、Open AIのライブラリの仕様だとうまく動かない ... どうしよう？
18. 解決策

19. expo-fetch
 import { fetch } from 'expo/fetch'; const res = await fetch('https://api.openai.com/v1/chat/completions', { ... }); const reader = res.body?.getReader(); const decoder = new TextDecoder(); // Read the stream while (true) { const stream = await reader?.read(); const { done, value } = stream; if (done) break; // Decode the stream const decodedText = decoder.decode(value, { stream: true }); const chunks = ... chunks.forEach((jsonString) => { const json = JSON.parse(jsonString); const delta = json.choices?.[0]?.delta?.content || ''; setResponseText((prev) => prev + delta); }); } ウェブおよびモバイル環境で一貫して動作する WinterCG 準拠の Fetch API を提供してくれる 内部的には web-streams-polyfillを使って適応している
20. サンプルデモ⚡

21. WebSocket

22. WebSocket通信の流れ

23. React Nativeでは安心の標準サポート✨

24. React & Websocket の実装でOK
 const wsRef = useRef<WebSocket | null>(null); // Refを使うようにする！ useEffect(() => { wsRef.current = new WebSocket('wss://echo.websocket.events'); wsRef.current.onopen = () => {...}; wsRef.current.onmessage = (event) => {...}; // subscribe wsRef.current.onerror = (error) => {...}; wsRef.current.onclose = () => {...}; return () => { if (wsRef.current) { wsRef.current.close(); } }; }, []); // publish const sendWebSocketMessage = () => { wsRef.current.send(inputText); };
25. サンプルデモ⚡

26. WebRTC

27. WebRTCとは？
 • P2Pによる音声／ビデオなどのストリームの送受信 を可能にする • ただし「 P2P」とは言いづらい　 (接続確立までにサーバーを跨いでる ) 通信の特徴 • TCPではなく UDPを使う => 正確性よりリアルタイム性 • Web実装では ◦ 音声や映像のデータのストリーミングを表現する => MediaStream API ◦ 接続のインターフェース => RTCPeerConnection ◦ データ送受信 => RTCDataChannel (WebSocketと使い方が似てる )
28. WebRTC接続までの流れはとても複雑 󰷺
 【通信の流れイメージ】 1. シグナリングサーバーで接続開始 2. STUNでクライアント同士 IPアドレスを確認 3. 経路情報を交換して、最適な通信ルートを探る 4. P2P接続、だめだったらリレーサーバーで通信 5. 通信準備完了 【接続するための技術】 • SDP…接続のための提案 /合意プロトコル • STUN…グローバル IPとポート番号の確認用 ◦ NATを超えるために必要 • ICE Candidate…接続のための経路候補 ◦ 💻 → [NAT] → 🌐 → [NAT] → 💻 • TURN…P2Pできない時の、中継サーバー (最終手段 )
29. でもライブラリあるから大丈夫

30. react-native-webrtc
 【前提】 WebRTC本体は、libwebrtc(C++製)でできている。 ブラウザやネイティブはこれをラップして各言語で実装できるよう に提供している。 👉内部的にやっていること • デバイスのカメラやマイクのアクセスをネイティブで処理 できるようにしてくれている • JavascriptからネイティブのWebRTCのAPIを呼び出せ るようにブリッジしてくれている
31. というわけで
 WebRTCで音声をつなげて会話してみよう

32. OpenAI Realtime API (ベータ版) で リアルタイムモデルとWebRTC接続
 接続のイメージ OpenAI Realtime APIとは？ リアルタイムAPIを使うことでWebRTC経由で GPTリアルタイムモデルに接続できる これを使うことで、 アプリからの音声入力をモデルに聞かせて、 応答を音声ストリームで再生できる https://platform.openai.com/docs/models
33. サンプルデモ⚡

34. まとめ

35. 結論: ReactNativeでもWeb標準のリアルタイム通信はできる！ 
 Server-Sent Events WebSocket WebRTC 通信方向 一方向（サーバー > クライアント） 双方向 双方向 (P2P) プロトコル HTTP/HTTPS WebSocket プロトコル (ws://, wss://) 独自のプロトコル (ICE, STUN, TURNなどを組み合わせ ) 接続方法 EventSource WebSocket RTCPeerConnection DataChannel 利用シーン AI応答受信、通知など チャット、ゲーム、同期処理など 音声、ビデオ通話、ファイル転送 ブラウザ対応 ⚪ ⚪ ⚪ React Nativeでは...？ expo-fetchで対応すれば 👌 デフォルトサポート 👌 react-native-webrtcで対応すれば 👌 使いやすさ 簡単 (サーバーの設定も軽い ) 難しい (接続管理が必要 ) 難しい（ NAT越えや信号処理など複雑） バイナリ通信対応 不可 可能（ ArrayBuffer, Blobなど） 可能　(ArrayBuffer) クライアントからの送信 不可 可能 可能
36. さいごに

37. 会社紹介

38. ITを軸とした新規事業の 
 立ち上げを強みとするスタートアップです 

39. メディア事業開始 2011 フードテック 事業開始 2018 2010 創業 広告事業開始 2013 ゲーム事業開始 2019 「Pipa.jp Ltd.」 M&Aにより合流 2021 コンテンツ事業開始 YouTubeチャンネル 『佐久間宣⾏のNOBROCK TV』配信開始 menu社 、KDDI社と資本業務提携開始 （2023年JV化） 2020 「Decoo」 M&Aにより合流 ⾳声認識技術「ReazonSpeech」無償公開 スマホアプリ『Zapshot』リリース マレーシア法⼈ 「REAZON MALAYSIA SDN. BHD.」設⽴ 2023 2022 シンガポール法⼈ 「REAZON SINGAPORE PTE.LTD.」設⽴ 『ブルーロック Project: World Champion』 リリース 「techtec」M&Aにより合流 ブロックチェーン事業開始 2024 ブランディング事業開始 GIFTech開催 「株式会社newt」設⽴ ペットテック事業開始 ベトナム法⼈ 「REAZON VIETNAM COMPANY LIMITED」設⽴ 『キングダム 頂天』リリース
40. BUSINESS: 01 ビジネス ADVERTISING 広告事業 インターネット広告を得意としており、 仕⼊れ‧クリエイティブ制作‧運⽤‧ 広告配信システムの開発までワンストップで提供 01 電⼦書籍やアプリ領域では業界トップクラスの実績 ゲームやフードテックなど、 グループ事業のプロモーションを担当 03 02
41. GAME ゲーム事業 2023年上半期DL数No.1のスマートフォン向けアプリゲーム 『ブルーロック Project: World Champion』や『キングダム頂 天』を中⼼に約10本程度、ゲームの企画‧開発‧運⽤ 01 ゲームの企画から開発‧デザイン、運⽤、分析まで全て内製 現在は⼤型IPを含め、グローバル展開も 視野に⼊れた複数の新規タイトルを開発中 03 02 BUSINESS: 02 ビジネス
42. BUSINESS: 05 ビジネス CONTENTS 有名テレビプロデューサー佐久間宣⾏さんとともに、 YouTubeチャンネル『佐久間宣⾏のNOBROCK TV』の運営 コンテンツ事業 01 02 チャンネル登録者数250万⼈以上、 総再⽣回数14億6千万回を超える⼤⼈気チャンネルに成⻑ (2025年2⽉時点) 03 100ボケ100ツッコミチャレンジを はじめとする超⼈気企画などを通じて、 新たなスターの発掘などを実現
43. BUSINESS: 05 ビジネス MEDIA グローバルチームで、 LAをベース拠点としてSNSアプリを開発‧運営中 メディア事業 01 02 ⾳声ベースのメディアをコンセプトとして Z世代向けの新しいソーシャルメディア 03 2023年7⽉にAI技術によってユーザーのクローンボイスを⽣成す る“ZapVoice”をリリース。 さらにAIチャットボット機能も開発中
44. 『Reazonヒューマンインタラクション研究所』にて、 さまざまな意思伝達⽀援技術とそれを応⽤した 協働ロボット技術の研究 BUSINESS: 7 ビジネス RESEARCH & DEVELOPMENT 研究開発 2023年1⽉にリリースした オープンソース⾳声認識技術「ReazonSpeech」、 画像処理による⾼精度視線認識技術「ReazonGaze」などの研究 02 01 ヒューマンインタラクション技術と、 模倣学習を⽤いた協働ロボット制御技術とを 組み合わせた次世代ロボットシステムの研究も実施 03
45. PET TECH BUSINESS: 04 ビジネス ペットテック事業 ペットケア分野で最先端技術を⽤いて、 猫と家族が共に成⻑し、共に喜びを分かち合えるような 商品‧サービス開発に取り組む 収集した⽣体情報を元に付帯サービスを展開し、 アプリだけではなく、ハードウェア‧AI開発を内製化し ⼀気通貫したサービス作りを実施 02 01 ペットの予防医学分野において⽇本トップのブランドを⽬指す 03
46. FOOD TECH BUSINESS: 06 ビジネス フードテック事業 01 デリバリー‧テイクアウトアプリ 『menu』の開発‧運営 02 2021年には、⽇本のすべてのアプリの中で 最も利⽤者が伸びたアプリに 03 2023年よりKDDI社とJV化、フードだけでなく、 『クイックコマース領域』のサービスとして、 国内No.1を⽬指す
47. 💬 Qiitaで積極的に色々と発信してます〜
 よかったら見てください 
 https://techblog.reazon.jp/ https://qiita.com/organizations/reazon-hd 最近はてなブログから移行しました
48. ご清聴ありがとうございました