女性向けエンジニアスクール
3秒でわかる
利用者のブラウザや画面上で動く部分の総称。見た目の組み立てと操作への反応を担当し、必要なデータはサーバー側へ通信して取りに行きます。
30秒図解
もう少し詳しく
どういうものか
フロントエンドは、利用者の手元で動く側を指す言葉です。Web なら、ブラウザに読み込まれて実行される HTML、CSS、JavaScript がそれにあたります。文書の構造を HTML が、見た目を CSS が、操作への反応とデータの取得を JavaScript が担当します。
現在は React や Vue のような枠組みを使い、画面を部品 (コンポーネント) に分けて組み立てるのが一般的です。データを受け取ると画面が自動で描き直される作りになっており、要素を 1 つずつ書き換える手作業を減らせます。
なぜ必要か
同じデータでも、見せ方は用途ごとに変わります。並べ替え、絞り込み、入力途中の検証といった反応は、いちいちサーバーへ問い合わせていては待ち時間が発生します。手元で処理できるものを手元で済ませることで、操作に対する反応が速くなり、サーバーの負荷も下がります。
具体例
// サーバーから一覧を取り、一覧を組み立てて表示する
async function showMembers() {
const list = document.querySelector("#members");
list.textContent = "読み込み中";
try {
const res = await <a href="/glossary/fetch-api" class="text-primary font-medium underline underline-offset-2 hover:text-primary-dark">fetch</a>("/api/members");
if (!res.ok) throw new Error("status " + res.status);
const members = await res.json();
list.innerHTML = "";
for (const m of members) {
const li = document.createElement("li");
li.textContent = `${m.name} (${m.points} pt)`;
list.appendChild(li);
}
} catch (e) {
list.textContent = "読み込みに失敗しました";
}
}つまずきやすいところ
フロントエンドのコードは利用者に全部見えます。API キーを JavaScript に直接書けば、開発者ツールを開いた誰にでも読めます。秘密の値はサーバー側に置き、フロントエンドからはサーバー経由で使います。
入力チェックも同じ理由で、フロントエンドだけでは足りません。ブラウザの検証を通さずに直接 API へ送ることが可能なので、同じ検証をサーバー側にも必ず書きます。フロントエンドの検証は、利用者に早く気付いてもらうための親切であり、防御ではありません。
似た用語との違い
バックエンドはサーバー側で動き、データベースの読み書きや認証、外部サービスとの連携を担当します。両方を扱う人をフルスタックと呼びます。なお React などを使うと画面の組み立てをサーバー側で行う構成も選べるため、実行場所での線引きは以前より曖昧になっています。
覚え方
飲食店にたとえると、フロントエンドが客席とメニュー、バックエンドが厨房と食材の在庫です。客からは厨房の中は見えません。
