21日目。今日は「生きてる」感じのあるものを作りたかった。他の人がリアルタイムで何かしてるのが見えるようなやつ。というわけで、匿名チャットルームを作ることにした。
プロンプト#
「リアルタイムチャットルームアプリを作って。匿名認証でカスタムハンドル、ルーム作成、ライブメッセージング、リアクション、ファイル共有、タイピングインジケーター、オンラインプレゼンス付きで。」
どうやって作ったか#
今回は7つの Watchfire タスクを経て完成した。リアルタイムアプリとしては、この順番がすごく理にかなってた：
- Firebase Realtime Database。 土台部分。匿名認証、データベースルール、ルーム・メッセージ・ユーザーのデータモデルのセットアップ。他のすべてが依存する配管工事みたいなもの。
- ルーム作成。 新しいルームを作ったり、既存のルームを閲覧できる機能。サイドバーにルーム名、参加者数、最後のメッセージプレビューが表示される。
- リアルタイムメッセージング。 コア機能。メッセージはルームにいる全員に即座に表示される。Firebaseのリスナーが同期を処理するので、ポーリングもリフレッシュボタンも不要。打って、送って、みんなに見える。
- リアクション。 メッセージをタップしてリアクションを付けられる。小さな機能だけど、テキストの壁だけのチャットよりずっとインタラクティブに感じる。
- ファイル共有。 チャットルーム内でファイルをアップロードして共有できる。プレーンテキスト以上のメッセージングの幅が広がる。
- プレゼンスとタイピングインジケーター。 誰がオンラインか、誰がタイピング中かが見える。チャットアプリを掲示板じゃなくてちゃんとしたチャットアプリに感じさせるディテール。
- モバイル対応。 レスポンシブレイアウトの調整、タッチターゲット、スマホ画面でもちゃんと動くようにする仕上げ。
出来上がったもの#
超シンプルなオンボーディング。 アプリを開いて、ハンドルネームを選んで、もう入れる。メールもパスワードもOAuthフローもなし。Firebase Anonymous Authが裏でIDを管理してくれる。名前を入力して「Let’s go」を押すだけ。
すっきりしたルームブラウザ。 左のサイドバーに利用可能なルームが参加者数と一緒に表示される。上部に「Create Room」ボタン、ルームをフィルタリングする検索バーもある。デフォルト状態では、ルームを選ぶか新しく作るかを促すウェルカムメッセージが表示される。
ちゃんと動くリアルタイムメッセージング。 メッセージは即座に表示される。各メッセージには送信者のハンドルネーム（色付きアバター付き）、タイムスタンプ、メッセージ内容が表示される。画面下部には現在ルームにいるメンバーとメッセージ入力欄、送信ボタンがある。右上にはオンライン人数が表示される。
タイピングインジケーターとプレゼンス。 誰がオンラインで、誰が今タイピングしてるかが分かる。こういう小さなこだわりが、チャットアプリをコメント欄と差別化するポイント。全体的にレスポンシブで生き生きした感じがする。
ダークテーマがいい感じ。 ダークネイビーの背景にパープルのアクセントで、モダンなチャットアプリの雰囲気が出てる。宿題の課題みたいには見えない。タイポグラフィはきれいで、スペーシングも適切、ユーザーごとの色分けで会話が追いやすい。
バグレポート#
Firebaseのリアルタイムアプリは、複数ユーザーや再接続時にだけ出るタイプのバグが起きがち。今回のプロジェクトでは、Watchfireのタスクが進行をきれいに管理してくれたおかげで、致命的な問題には当たらなかった。プレゼンスシステムとタイピングインジケーターが初回デプロイで動いたのは、正直驚いた。タブ切り替えやネットワーク切断みたいなエッジケースで何回かデバッグが必要になるのが普通なんだけど。
数字で見る#
- Watchfireタスク7つ データベースセットアップからモバイル対応まで
- Firebase Realtime Database ゼロレイテンシーのメッセージ同期
- 匿名認証 摩擦のないオンボーディング
- リアクション、ファイル共有、タイピングインジケーター、プレゼンス すべて段階的に積み上げ
試してみて#
ハンドルネームを決めてチャット開始。ルームを作るか、既存のルームに参加しよう。
Day 21の感想#
リアルタイムは難しい。少なくとも、以前はそうだった。WebSocket接続のセットアップ、接続状態の管理、再接続の処理、クライアント間のデータ同期、レースコンディションへの対処。実際のチャット機能にたどり着く前に、やらなきゃいけないインフラ作業が山ほどある。
Firebaseがそのほとんどを抽象化してくれて、AIはその使い方を完璧に知ってた。「データベースが存在する」状態から「リアクションやタイピングインジケーター付きでチャットしてる」状態への進行が、接続管理について一切考えることなく7つのタスクで実現した。
このプロジェクトで面白いと思ったのは、匿名認証が正しい選択だったこと。カジュアルなチャットアプリで、アカウント作成を強制するのはコンバージョンキラーだ。名前を決めてすぐ使える。Firebaseがアイデンティティを管理して、ユーザーはそのことを意識する必要がない。これは僕が指定しなくてもAIが正しく下した プロダクト判断だ。
21日目終了。もう終盤戦に入ってて、プロジェクトはどんどんインタラクティブになっていく。
これは30 Days of Vibe Codingの21日目です。AIアシストコーディングで30日間に30個のプロジェクトを出荷する様子をフォローしてね。
