P2Pでリアルタイム同期する人狼ゲームを開発。React＆WebRTCを用いた実装手法、f4samuraiが技術ブログで解説

f4samuraiは2026年1月22日（木）、「React × WebRTCでリアルタイム人狼ゲーム開発！状態同期の仕組み｜f4エンジニアブログ」と題した記事をnoteで公開しました。

UI開発ライブラリ「React」とリアルタイム通信技術「WebRTC」を活用して、ブラウザでプレイできるP2P（Peer-to-Peer）型の人狼ゲームを実装した事例を紹介しています。

（画像はf4samurai公式noteより引用）

Reactは、米国の企業であるMeta Platforms（旧：Facebook）によって開発されたJavaScriptライブラリ。「コンポーネント」と呼ばれるコードのまとまりを階層上に組み合わせることでUIを作成します。

記事では、Reactに搭載されたフック（※）「useReducer」によって管理する、状態（prevState）およびアクション（action）の遷移を、無料かつオープンソースのリアルタイム通信技術「WebRTC」を経由することで他のユーザー環境と同期させる実装事例を紹介しています。
※　「Hook」とも。React 16.8より導入された、名前が「use」で始まる関数。従来はクラスコンポーネント（JavaScriptのclass構文で記述する方式）でしか扱えなかったStateやLifecycleといった概念を、関数コンポーネント（単なるJavaScript関数として記述する方式）でも使用可能とする

 

Unity公式パッケージ「Netcode」を参考にしてホストクライアント型の同期を採用している（画像はf4samurai公式noteより引用）

2つのブラウザ間でWebRTCを用いたP2P通信を確立するためのサンプルコードを掲載しているほか、WebRTCを導入する上で有効活用できるサービスやオープンソースソフトウェアを紹介しています。

そのほか、遅延を想定してネットワークの整合性を保つ設計手法などについても言及しています。

なお、開発した人狼ゲームのデモを紹介するYouTube動画がnote本文中に掲載されているほか、デモゲームおよびその開発に使用したライブラリのソースコードがGitHubで公開されています。

詳細はf4samurai公式noteをご確認ください。