フロントエンド

Frontend

アプリ・Web開発

Webサイトやアプリケーションのうち、ユーザーが情報を見たり操作したりする画面と、その振る舞いを担う領域のこと。WebではHTML・CSS・JavaScriptなどを使い、入力の受付、結果の表示、通信中や失敗時の案内を作ります。

🐾 猫で例えると？

綺麗なお花が飾られたカウンター越しに、愛嬌たっぷりの可愛い表情でこちらを見つめて飼い主を魅了している茶トラの猫 — お花越しに最高のビジュアルを提供する茶トラ

お花の向こうからこちらを見る茶トラが、ユーザーと接する画面の役だと考えてみましょう。猫の表情が見えるだけでなく、呼び掛けに反応が返るとやり取りができます。フロントエンドも見た目だけでなく、押したボタンへの反応や「まだ処理中」「もう一度試せる」といった状態の伝え方まで担当します。

💻 アプリ・Web開発における「フロントエンド」とは？

Webアプリケーションの開発において、フロントエンド（クライアントサイドとも呼ばれます）は、ユーザーとシステムが最初に出会う接点です。主な役割は、デザインカンプに沿った正確なUI（ユーザーインターフェース）の構築と、ボタンクリックや文字入力といったユーザーのアクションに応じた動的な動作制御です。

基本は、情報の構造を表すHTML、見た目を整えるCSS、動作や通信を扱うJavaScriptです。ReactのようなUIライブラリやVueのようなフレームワークを使うこともありますが、必須ではありません。ページの規模や必要な操作に応じて選びます。Next.jsなどはサーバーで動く機能も含むため、製品名だけで実行場所を判断しないようにします。

⚠️ フロントエンドの仕組みと注意点

ブラウザに送ったJavaScriptや通信内容は利用者が調べられます。秘密のAPIキーやデータベースのパスワードは送らず、権限の判定もサーバー側で行います。一方、画面のHTMLをサーバーで生成するSSRもあり、「画面に関係する処理はすべてブラウザだけで実行する」という意味ではありません。

HTML/CSSおよびJavaScriptによるUIイベント処理の例

次はおやつの在庫を確認する例です。HTMLの後にスクリプトを置き、同じオリジンの /api/v1/treat-stock が available という真偽値を持つJSONを返すAPIを別途用意する前提です。GETは在庫の参照に使い、支給などの更新は行いません。

<button id="treat-button" type="button">おやつの在庫を確認</button>
<p id="treat-status" role="status"></p>
<script>
  const button = document.querySelector("#treat-button");
  const status = document.querySelector("#treat-status");

  button.addEventListener("click", async () => {
    button.disabled = true;
    status.textContent = "確認中です…";
    try {
      const response = await fetch("/api/v1/treat-stock");
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      const data = await response.json();
      if (typeof data.available !== "boolean") throw new Error("Unexpected response");
      status.textContent = data.available ? "在庫があります" : "在庫がありません";
    } catch {
      status.textContent = "確認できませんでした。もう一度お試しください。";
    } finally {
      button.disabled = false;
    }
  });
</script>

fetch() は404や500のHTTP応答だけでは失敗として例外を投げないため、response.ok を確認しています。通信やJSONの読み取りに失敗しても再試行できるよう、最後にボタンを戻します。実際の画面では必要に応じてタイムアウトや中断も設計し、長時間待たされる状態を確認します。

🛠️ フロントエンドを賢く使うためのポイント

フロントエンドエンジニアが実際のプロダクト開発やUI改善を行う際は、デザインの美しさだけでなく、ユーザーの環境に配慮した以下の品質特性を満たす必要があります。

レスポンシブWebデザインの徹底： パソコン、タブレット、スマートフォンなど、異なる画面サイズ（解像度）のどの端末からアクセスされても、レイアウトが崩れずに最適化されて表示されるように設計します。
最初に必要なものから表示する： 画像の寸法や容量、JavaScriptの実行量を確認します。画面外の画像は遅延読み込みの候補になりますが、最初に見せたい大きな画像まで一律に遅らせると、かえって表示が遅くなります。
操作と状態を伝える： ボタンは button、入力欄にはラベルを使い、キーボードだけでも操作できるかを確認します。画像の代替テキストは用途に合わせ、装飾画像なら空にするなど、単に全画像へ同じ説明を付けないことも大切です。

花のそばで目を引く茶トラのように、フロントエンドは利用者と最初に接する場所です。見た目だけでなく、読み込み中の表示、入力のしやすさ、失敗したときの案内まで確かめると、操作を完了できる画面になっているかを判断できます。