フロントエンド

フロントエンドとは、WebサイトやWebアプリで、利用者が接する画面の表示や操作を担う領域です。AWSも、利用者に表示される要素と操作に関わる側として説明しています。[1]

画面上で見える内容だけでなく、入力や選択に応じた振る舞いも含めて捉えます。Web以外でも使う言葉ですが、ここではWeb開発の文脈を中心に説明します。

中心となるのは、利用者が情報を読み、入力し、操作できる画面を形にすることです。見た目を置くだけでなく、操作の結果をどう見せるかまでを扱います。

• 内容の表示：見出し、文章、画像などを画面に構成する。
• 入力・選択：検索欄やメニューなどで操作を受け取る。
• 状態の表示：選択した内容や処理の結果などを利用者へ伝える。

たとえば、項目を選ぶと対応する説明を表示する画面なら、その選択と表示の振る舞いも対象です。画面を作るためにコードを書く作業はコーディングと呼びますが、作業の名前と開発領域の名前は区別します。

違いは、主にどの役割へ焦点を当てるかです。利用者が触れる表示・操作の側に対し、バックエンドは要求を受け、処理した結果を返す側を指します。[1]

たとえば、予約の候補を選ぶ画面と、選択内容に応じて利用できる候補を確認する処理を考えると、表示と処理の役割を分けて説明できます。画面側だけ、または処理側だけを見ても、利用者が行う操作全体は捉えきれません。

ただし、この区分を「ブラウザーで動けばすべて前者、サーバーで動けばすべて後者」という唯一の定義にはしません。指す範囲は構成や説明の文脈に応じて捉えます。

HTML、CSS、JavaScriptは、内容、表現、動作という異なる役割で使われます。

HTMLは、Webページのコンテンツを記述し、定義するためのマークアップ言語です。[2]

CSSは、文書の体裁や見栄えを表すためのスタイルシート言語です。[3]

JavaScriptは、Webページの機能や振る舞いを記述するために使います。ブラウザー以外の環境でも利用されるため、この言語自体をフロントエンド専用とは捉えません。[2][4]

たとえば、HTMLで情報とボタンを用意し、CSSで見え方を整え、JavaScriptで操作に応じた表示を扱う、と役割を分けて考えられます。レスポンシブWebデザインは、その画面を異なる表示幅などへ対応させる設計と関わります。