前回（第10回）は、Google OAuth 2.0を用いたログイン認証基盤と、@tsndr/cloudflare-worker-jwtによるセッション証明（JWT）の生成、そしてD1データベースへのユーザー登録フローを構築しました。
仕組みとしての認証は完成したため、今回はログインしたユーザーが最初にアクセスするポータル（ハブ）環境、および「ホーム」「ゲーム」「エージェント」からなるユーザーページのルーティングと画面設計を行いました。
ポータルページの設計
認証を通過したプレイヤー（エージェント）がアクセスするポータルです。機能としては、ユーザ情報の表示と現在遊んでいるゲームのライブラリ、運営（私など）からのお知らせなどが見れることが必要です。
今回はスマホでのモバイルファーストな操作性と、PCブラウザでの見やすさを両立するため、上部にタブメニューを配置したルーティングを実装しました。
ログイン後の画面
3つのコア・ルーティング（タブ設計）
ログイン後のハブとして、以下の3つのコンポーネント（タブ）を実装し、状態管理を行っています。
- ホーム（Home）
- 役割： プレイヤーが最初にアクセスするダッシュボード。
- 機能： 運営からの最新パッチノート（お知らせ）の確認や、メインミッションである「ゲームタブ」への即時ジャンプ（ショートカット）を配置。
- ゲーム（Game）
- 役割： 作戦（ミッション）の選択ライブラリ。
- 機能： 開発中のゲームが「カード型コンポーネント」としてグリッド上に並びます。現在は、前回モックアップを作成したWebRTCによるP2P対戦頭脳戦『数値計算ハイアンドロー（Protocol 99）』の「プレイ開始」ボタンを配置。下部には、将来的な拡張を見据えた「[開発中] 次期ミッション（演算領域拡張パッチ）」のプレースホルダーを用意しています。
- エージェント（Agent）
- 役割： ユーザー個人のステータス・管理画面。
- 機能： ハッカーとしての自身の「エージェント名（ユーザー名）」の変更機能、D1データベースから Elo レーティングをリアルタイムに取得して描画する「グローバルランキング（戦績・順位）」の表示エリアを実装。
フロントエンドの実装（ルーティングとタブ制御）
今回のルーティングは、Workers側で認証状態（JWT）を検証した上で静的資産（HTML/JS）を返し、クライアントサイドでタブの状態（State）を切り替えるシングルページアプリケーション（SPA）風の軽量な挙動を採用しています。
一部抜粋（クライアントサイドのタブ切り替えロジック）
const tabs = document.querySelectorAll('.tab-menu');
const contents = document.querySelectorAll('.tab-content');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = tab.dataset.tab;
// アクティブなタブクラスの切り替え
tabs.forEach(t => t.classList.remove('active-tab'));
tab.classList.add('active-tab');
// コンテンツの表示制御
contents.forEach(content => {
if (content.id === `content-${target}`) {
content.style.display = 'block';
} else {
content.style.display = 'none';
}
});
});接続テスト（ルーティング画面）
実際にローカル環境（localhost:8787）でログイン後の挙動を確認しました。
エージェントページです、レートは実際のデータテーブルを参照しています。ランキングはダミーです。
まとめ
今回は、ゲームへの入り口となるポータルサイトの設計と、ユーザー情報の管理（エージェントタブ）の基礎を実装しました。これで「ログイン → ホーム → ゲーム開始」というWebアプリケーションとしての全体的な骨組み（大外のループ）が完全に繋がったことになります
関連記事
CloudFlare Workersセットアップ
Cloudflare Workersの始め方：Wranglerによるローカル環境構築と世界公開の手順
【第４回】ユーザデータベース実装
D1データベース実装：ユーザデータ管理 【CFW P2P心理戦ゲーム開発記】 #4
【第９回】ゲームデザインとアイテム実装
ゲームルールを考える：ハイアンドローモックアップ【CFW P2P心理戦ゲーム開発記】 #9
【第10回】Google OAuthによるログイン実装
認証実装 OAuth(google)【CFW P2P心理戦ゲーム開発記】 #10
次回予告
これまでの実装で、バックエンド、データベース、認証、ポータルUI、そしてP2Pゲームモックアップまで、全てのパーツが一通り出揃いました。次回からは、Logic High＆Low（仮称）の実装に戻ります。
次回は高速で確実なマッチングを実現する方法、cloud flare workerのP２Pを生かせるマッチング手法であるSingleton Matchmaker DO 方式を実装していく予定です
次回：関連記事は、2026年6月22日に公開予定 (あと1日)
ここまで読んでいただきありがとうございます。 では、次の記事で。 lumenHero
