E.E Web フロントエンド速習

AI 機能には、ユーザーが操作できる画面が必要です。最小限の有用なフロントエンドは、入力、読み込み、成功、空入力、エラー、再試行をはっきり示します。

まずインタラクションスタックを見る

AI フロントエンドインタラクションスタック図

AI フロントエンド状態機械と体験ループ図

モデル呼び出しは常に不確実なリクエストだと考えます。遅い、失敗する、一部だけ返る、再試行が必要になることがあります。

最小の静的 AI ページを動かす

ai-demo.html として保存し、ブラウザで開きます。

<!doctype html>
<html lang="ja">
<meta charset="utf-8" />
<title>AI デモ</title>
<style>
  body { font-family: system-ui, sans-serif; max-width: 720px; margin: 40px auto; }
  textarea, button, pre { width: 100%; box-sizing: border-box; margin-top: 12px; }
  textarea { min-height: 100px; padding: 12px; }
  button { padding: 10px; }
  pre { min-height: 80px; padding: 12px; background: #f3f4f6; white-space: pre-wrap; }
</style>
<h1>AI 機能デモ</h1>
<textarea id="prompt" placeholder="質問を入力"></textarea>
<button id="run">実行</button>
<p id="status">idle</p>
<pre id="result">結果がここに表示されます</pre>
<script>
  const promptEl = document.querySelector("#prompt");
  const statusEl = document.querySelector("#status");
  const resultEl = document.querySelector("#result");

  document.querySelector("#run").addEventListener("click", async () => {
    const text = promptEl.value.trim();
    if (!text) {
      statusEl.textContent = "empty";
      resultEl.textContent = "先にプロンプトを入力してください。";
      return;
    }

    try {
      statusEl.textContent = "loading";
      resultEl.textContent = "お待ちください...";
      await new Promise((resolve) => setTimeout(resolve, 500));
      if (text.toLowerCase().includes("fail")) {
        throw new Error("simulated backend error");
      }
      statusEl.textContent = "success";
      resultEl.textContent = "シミュレーション回答：" + text;
    } catch (error) {
      statusEl.textContent = "error";
      resultEl.textContent = error.message + "。もう一度試してください。";
    }
  });
</script>
</html>

期待されるブラウザの動き：

空入力：状態が empty になる。
通常入力：状態が loading から success になる。
fail を含む入力：状態が error になる。

UI 状態を意図的にテストする

成功経路を 1 回クリックするだけで終わらせないでください。有用な AI UI テストでは、各経路の状態遷移と表示メッセージを残します。

テスト入力	期待状態	残す証拠
空の入力欄	`empty`	入力を求める画面の screenshot またはメモ
`summarize this note`	`loading` から `success`	前後の screenshot または event trace
`please fail`	`error`	復旧メッセージが見える screenshot

これはフロントエンド版のモデル評価です。このページではモデル呼び出しは擬似ですが、ユーザー体験の契約は本物です。不確実な呼び出しには、進行状況、結果、回復経路が必要です。

UI レビュー

画面をきれいな screenshot としてではなく、state machine としてレビューします。各ユーザー操作について、開始状態、見える feedback、最終状態、失敗時の回復経路を書きます。

この習慣は AI interface を正直にします。model call は遅い、空、部分的、または失敗することがあります。UI は進行状況を示し、silent failure を避け、次の行動をユーザーに示す必要があります。最小の証拠は、empty input、success、error の screenshot またはメモです。

後で本物の呼び出しに置き換える

バックエンドができたら、擬似的な待ち時間を fetch に置き換えます。

const response = await fetch("/api/chat", {
  method: "POST",
  headers: {"Content-Type": "application/json"},
  body: JSON.stringify({prompt: text}),
});
const data = await response.json();
resultEl.textContent = data.answer;

残す証拠

このページを終えたら、この証拠カードを残します。

フロントエンド画面: チャット、ダッシュボード、エディタ、レビュー画面、またはワークフロー UI
状態モデル: loading、streaming、success、empty、error、retry、review の状態
成果物: UI スケッチ、コンポーネントの挙動、イベントトレース、またはスクリーンショット
失敗確認: 遅延の隠蔽、エラー状態の不足、不明確な引用、または弱いレビュー管理
期待される成果: 状態と証拠表示を含む AI フロントエンド対話メモ

合格チェック

1つの AI ページが、入力、読み込み、成功、空入力、エラー、再試行を迷わず扱えるなら合格です。

確認の考え方と解説

合格する答えは、少なくとも 3 つの経路をカバーします。空入力、通常入力、そして失敗のシミュレーションです。証拠としては、小さな表やスクリーンショットが良く、状態、メッセージ、再試行の様子が見える必要があります。

大事なのは、何が起きているのかをユーザーが明確に理解できることです。結果ボックスを 1 つ置くだけでは足りません。