個人的備忘録：フロントでつぶやき → バックエンドから応援が返るUIの仕組み実装メモ

はじめに

今回は、フロントエンド（Next.js）上で「美女から応援メッセージが届くUI」を実装した「bijyoモード」について紹介します。

個人の備忘録程度の走り書きとなっておりますが、温かい目で見守っていただければ幸いです。

書こうと思ったきっかけ

受講しているITスクールのハッカソンの開発の一環で取り組んでいるフロントエンド開発の一部で、この機能の実装内容を後から見返せるよう、備忘録として記事にまとめています。

内容

このモードでは、ユーザーが「今日のつぶやき」を入力して送信ボタンを押すと、FastAPI経由でバックエンドにリクエストが送られ、応援メッセージ（AIの返答）が「美女からのやさしいエール」欄に表示される仕組みになっています。

実際の画面

つぶやき後の画面

主な構成は以下のとおりです：

ステート管理：

const [diaryMessage, setDiaryMessage] = useState("");
const [cheerMessage, setCheerMessage] = useState("");
const [token, setToken] = useState("");
const [sessionId, setSessionId] = useState("");

ユーザーの入力内容、応援メッセージ、セッション情報などを管理しています。

初期処理：

useEffect(() => {
  localStorage.setItem("session_id", "1");
  document.body.classList.add("washitsu");
  const storedToken = localStorage.getItem("token");
  const storedSessionId = localStorage.getItem("session_id");
  if (storedToken) setToken(storedToken);
  if (storedSessionId) setSessionId(storedSessionId);
  return () => {
    document.body.classList.remove("washitsu");
  };
}, []);

セッションIDの初期化と和風スタイルの適用を行っています。

API通信：

const handleEnergy = async () => {
  const payload = {
    session_id: Number(sessionId),
    is_user: true,
    content: diaryMessage,
  };

  const res = await fetch(`http://localhost:8000/api/sessions/${sessionId}/messages`, {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(payload),
  });

  const result = await res.json();
  setCheerMessage(result.content || "美女から応援が届きました！");
};

ユーザーのつぶやきをサーバーへ送り、応援メッセージを受け取って画面に表示しています。

UI表示：

<div className="bg-[#fff0f5] border-[4px] border-[#d48fb1] rounded-xl shadow-md p-6 w-full max-w-xl">
  <h2 className="text-2xl font-bold mb-4">美女からのやさしいエール</h2>
  <div className="w-full h-32 border border-gray-300 rounded-md p-3 bg-[#fff7fa] whitespace-pre-wrap overflow-y-auto">
    {cheerMessage || "ここに美女からの応援が表示されます"}
  </div>
</div>

応援メッセージをテキストとして表示する専用のエリアです。

まとめ

この実装では、非同期通信の基本をおさえつつ、状態管理とUIの連動をシンプルにまとめることができました。

今後は、複数メッセージの履歴表示やチャット形式への拡張も視野に入れています。

同様の構成は「さぶちゃんモード」にも応用できるため、キャラクター別モードの切り替えなどにも展開していきたいと考えています...！