個人開発中の入力中の情報をリアルタイムで共有できる掲示板、「NEAR」にプライベートチャット機能を導入しました！
NEARはこちら
NEARとは
NEARは、リアルタイムで入力中のテキストや絵が送受信できる掲示板プラットフォームです。
今日は、NEARプラットフォームに新たにプライベートチャット機能を実装した経験について共有したいと思います。NEARはまだ始まったばかりの私しかいないプラットフォームですが（笑）、ユーザー間の直接的なコミュニケーション手段がなかったのでリアルタイムに相手が打った文字が表示されるという特色を反映したプライベートチャット機能を開発することにしました。
↓できたプライベートチャットの画面
概要
今回のミッションは、NEARプラットフォーム内でシームレスに機能するプライベートチャットシステムを構築することでした。
開発した主な機能：
・ユーザーの登録と管理
・リアルタイムメッセージング
・ユーザーのブロックと削除
・アニメーション付きのモダンなUI
実装方法
基本的にはCursorのClaude3.7sonnetを使います。
それでも無理ならChatGPTに聞いてコピペしながら実験を繰り返します。
最近流行りのVibe Codingってやつです。
（この方法の一番の問題は、細かいセキュリティ関係の設計がガバガバになってしまいがちなことと、サーバーへの負荷があまり考えられていなかったりすることだと思います。※後で書きます。）
一応AIが考えた実装のステップは以下のようになっています。（細かいことはわかりません。）
ステップ1：UIの設計とHTML構造
まず、シンプルで使いやすいインターフェースを設計しました。左側にユーザーリスト、右側にチャットエリアという王道の配置です。
ステップ2：スタイリングとアニメーション
ユーザー体験を向上させるため、様々なアニメーションを取り入れました。特に、ユーザー削除時のアニメーションはこだわりました！(AI談)
ステップ3：ユーザー管理機能の実装
ユーザー管理は本システムの中核です。特にユーザーの削除機能やブロック機能など、匿名掲示板には必須の機能は一通り入れたつもりです。
この部分で（AIが）最も苦労したのは、やっぱりリアルタイム通信機能。独自の機能なのでAIがやりたいことについて理解しきれず、何度も生成を繰り返しました。（やっとできたと思ったら追加機能を付け加えるときに最初の機能が削除されたりは普通によくあります。）
ステップ4：メッセージング機能の実装
メッセージの送受信機能は、WebSocketを使用して実装しました。これにより、リアルタイムでのコミュニケーションが可能になります
function sendMessage() {
const messageInput = document.getElementById("messageInput");
const content = messageInput.value.trim();
if (!content || !selectedUser) return;
const message = {
type: "message",
recipient: selectedUser.email,
content: content,
timestamp: Date.now()
};
socket.send(JSON.stringify(message));
displayMessage(content, true, new Date());
messageInput.value = "";
}
socket.onmessage = function(event) {
const data = JSON.parse(event.data);
if (data.type === "message") {
const { sender, content, timestamp } = data;
if (selectedUser && sender === selectedUser.email) {
displayMessage(content, false, new Date(timestamp));
} else {
// 未読メッセージの通知処理
notifyNewMessage(sender);
}
} else if (data.type === "user_update") {
// ユーザーリストの更新
updateUserList(data.users);
}
};
Vive Codingで直面する課題と解決策
1. 一度実装した機能が次の機能で削除されがち
UIを更新したいだけなのに、肝心の通信機能が削除されたり、うまくうごかなくなって白紙に戻るとかはAIコーディングの場合普通にあります。
対策としてはよく勉強してコードを一つ一つ再確認すること。
と言いたいところですが、そんな時間もないので、AIの使い分けと指摘方法がぶっちゃけ一番大事かなと思います。
それから、当たり前かもしれないけど一度うまくいったら絶対にその機能はプッシュかコミットすることがめちゃくちゃ大事です。
AIは賢いけど、人間がしない思いもよらないミスを多発します。
2. 1000行以上になると大体トラブルからモジュール化せよ
感覚ですが、1000行以上のコードは人間もそうですけど読みづらいです。どこがどうでどうなってるか整理できたら、モジュール化をお願いしましょう。もちろんモジュール化する前には絶対コミット。HTML、CSS、JavaScriptの分離くらいならコピペで私でもできますが、それ以上細かくなるとAIに丸投げしたほうが早いです。
3. セキュリティとかサーバー負荷とかへの対策が甘い
もう一つの大きな課題は、コードは動くけど、実際の現場で使われるようなセキュリティ対策とかサーバーへの負荷が考えられてるのかという点。
私は初心者なのでたぶんまだできてないですが、私でもわかるエラー（環境変数がgitignoreになかったり）があるのでそのへんは甘々なようです。（なにか問題があればぜひお知らせください笑）
得られた知見と成果
それでも、このプロジェクトを通じて、私は多くの知見を得ることができたかなと思います。
少なくとも、分厚い教科書を一から読んでいくようなタイプの勉強ではなく、AIの吐き出す80点位のコードを大量にさばきながら、Acceptを繰り返すVibe Codingは、実践的という点では他の学習方法に勝る最強の勉強法なのではと思いました。
実装後、少なくともNEARのユーザー間コミュニケーションは大幅に改善されました。特に、以下の点はAIが優れていると思います。
・デザインに疎くてもシンプルで直感的なインターフェースが実現可能
・これまでにないスピード実装
・アイデアだけでゼロイチができること
・超初心者でも理屈さえ通ればなにかができる
今後の展望
今後は機能面では以下を実装することを検討しています
・グループチャット機能
・ファイル共有機能 - 画像や文書の送受信
・既読機能 - メッセージが読まれたかどうかの確認
・検索機能 - 過去のメッセージを検索可能に
などなど
おわりに
NEARプラットフォームにプライベートチャット機能を実装することで、リアルタイム文字通信の可能性を密かに感じました。実際に使うと、自分で言うのもおかしいけどなんか良さげに見えてきます。モダンなWeb技術とユーザーインターフェースの原則を組み合わせ、使いやすく効果的なコミュニケーションツールになったかなと。
最終的にはユーザーが増えるといいなの一言に尽きますが、そのときのスケールアップが今のAIに可能かどうかは未知数です。
そんな悩みができますように。。。