はじめに
Next.js（React）と FastAPI を連携したアプリケーションで、ユーザーが日記を投稿すると、AI（さぶちゃん）からの応援メッセージが返ってくる機能を実装しています。
本記事では、返答内容を「さぶちゃんからの熱いエール」欄に画面表示する方法を紹介します。
書こうと思ったきっかけ
受講しているITスクールのハッカソンの開発の一環で、日記投稿後の返答メッセージを見せる仕組みを作ろうとした際に、応答の扱いと表示形式の工夫が必要だったため、記録としてまとめました。
実際の画面（開発中）
実際の画面（一旦、完成画面）
内容
以下は実際に使用している SabutyanMode コンポーネントの抜粋コードです。応援メッセージの表示に関係する部分を中心に紹介します。
状態管理
const [diaryMessage, setDiaryMessage] = useState("");
const [cheerMessage, setCheerMessage] = useState("");
ユーザーが入力した日記（diaryMessage）と、APIからの応答メッセージ（cheerMessage）を別々の状態で管理しています。
応援メッセージの取得処理
const handleEnergy = async () => {
if (!sessionId) {
alert("セッションIDが見つかりません");
return;
}
try {
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),
});
if (!res.ok) throw new Error("送信に失敗しました");
const result = await res.json();
setCheerMessage(result.content || "さぶちゃんから応援が届きました！");
} catch (error) {
console.error("エラー:", error);
alert("エラーが発生しました");
}
};
API のレスポンスから result.content を取得し、それを cheerMessage にセットしています。
応援メッセージの表示エリア
<div className="w-full h-32 border border-gray-300 rounded-md p-3 bg-[#fffaf0] whitespace-pre-wrap overflow-y-auto">
{cheerMessage || "ここにさぶちゃんの応援が表示されます"}
</div>
この表示専用 div によって、API から受け取った応援メッセージがリアルタイムに画面に表示される仕組みとなっています。
起きていた問題
- 日記欄と応援メッセージ欄に同じ状態変数を使っていたため、文字が連動していた
- 応援メッセージを表示させたいが、textarea ではユーザーが編集できてしまう
修正内容
1. 状態管理を分離
const [diaryMessage, setDiaryMessage] = useState("");
const [cheerMessage, setCheerMessage] = useState("");
2. FastAPI 応答を cheerMessage にセット
const result = await res.json();
setCheerMessage(result.content || "さぶちゃんから応援が届きました！");
3. 表示専用のエール欄を div に変更
<div className="w-full h-32 border border-gray-300 rounded-md p-3 bg-[#fffaf0] whitespace-pre-wrap overflow-y-auto">
{cheerMessage || "ここにさぶちゃんの応援が表示されます"}
</div>
- textarea を div に変更し、ユーザーが編集できないように
-
whitespace-pre-wrapによって改行も反映
まとめ
フォームで状態変数を共通化すると文字が連動してしまうため、用途ごとに状態を分ける必要があります。
また、表示専用の応答欄には div を用いて、ユーザーが内容を編集できないようにすることが重要です。
これにより、ユーザーが入力した日記に対して、さぶちゃんからの応援を自然な形で表示できるようになりました...！