フロントエンドの実務：画面の状態・操作・連携
Front-End
フロントエンドの実務では、画面の見た目に加え、入力・読み込み中・成功・失敗といった状態を、利用者にどう伝えるかを設計します。用語の基礎はフロントエンドとは？で解説しています。ここでは画面と処理のつなぎ方を見ていきます。
🐾 猫で例えると？
触れやすそうなお腹を見せる茶トラと、そこへ手を伸ばすアメショ。見た目は操作のきっかけになりますが、触れた後の反応も大切です。画面でも「押せるか」「押した結果どうなったか」を伝えて、利用者が次の行動を判断できるようにします。
💻 画面の状態と担当範囲を決める
フォームなら、未入力、入力不備、送信中、成功、失敗を洗い出します。送信中は二重操作を抑え、失敗したときは入力を残して直し方を伝えるなど、完成した1枚の画面だけでは見えない動きを設計します。
フロントエンドは入力支援や表示を担当し、サーバーは受け取った値の検証や権限確認を担当する、といった境界を決めます。ブラウザーの入力制限は回避できるため、サーバー側の検証を省く理由にはなりません。なお、ブラウザー内で完結する画像処理のように、機能ごとに構成は異なります。
⚠️ フロントエンドの仕組みと注意点
成功時だけでなく、低速回線、空の結果、通信断、キーボード操作も確認します。APIを使う場合は、成功時のデータ形式と失敗時のステータスをバックエンド側と合わせ、画面がどの状態になるかを決めておきます。
API通信での連携イメージ
次はReactのJSXが動く環境で使う部品の例です。同じサイトの/api/user-infoがJSONのnameを返す前提です。読み込み中と失敗を表示し、HTTPエラーも判定します。
import { useState } from "react";
export default function UserInfo() {
const [status, setStatus] = useState("idle");
const [name, setName] = useState("");
async function load() {
setStatus("loading");
try {
const response = await fetch("/api/user-info");
if (!response.ok) throw new Error("HTTP error");
const result = await response.json();
if (typeof result.name !== "string") throw new Error("Invalid data");
setName(result.name);
setStatus("success");
} catch {
setStatus("error");
}
}
return (
<section>
<button onClick={load} disabled={status === "loading"}>情報を取得</button>
<p role="status">
{status === "loading" && "読み込み中です"}
{status === "success" && `ようこそ、${name}さん`}
{status === "error" && "取得できませんでした。時間を置いて再試行してください。"}
</p>
</section>
);
}fetchは404や500でも応答を受け取れるため、response.okなどで判定します。このような部分更新は、ページ全体をSPAにしなくても利用できます。実用時には通信の期限やキャンセル、認証切れ時の案内なども要件に合わせて追加します。
🛠️ フロントエンドを賢く使うためのポイント
使う技術を選ぶ際も、利用者が入力から結果の確認まで迷わず進めるかを基準にします。見た目だけでなく、読み込み中や失敗時の案内も確認しましょう。
- UI/UXを徹底的に意識する： 迷わずに目的の操作ができるボタン配置や、クリックした時の心地よい反応（フィードバック）など、ユーザー目線の設計を行う。
- パフォーマンス（表示速度）の最適化： 画像の圧縮や不要なJavaScriptの遅延読み込みを行い、ユーザーを待たせない軽快な動作を実現する。
- アクセシビリティの確保： キーボード操作のみでのナビゲーションや、スクリーンリーダー（音声読み上げ）に対応した適切なHTMLタグ付けを行う。
猫が触れた後の反応まで含めて心地よさが決まるように、画面も処理中や失敗時の案内まで含めて使い勝手が決まります。デザイン、API、支援技術での操作をつないで確認することが、フロントエンドの実務です。