フロントエンド Frontend

かんたんに言うと

ウェブサイトを開いたときに見える文字や画像、クリックすると反応するボタン——これらはすべてフロントエンドの仕事です。ブラウザやスマホの上で動き、「見せること」と「操作」を担当します。

フロントエンドの仕事は三つに分けられます。構造（画面に何があるか）、スタイル（どんな見た目か）、ふるまい（クリックすると何が起きるか）です。自分でデータを保存することはふつうなく、データが必要なときは「バックエンド」に取りに行きます。

この三つを毎回ゼロから作らなくて済むよう、多くのチームは React、Vue、Next.js といったフロントエンドのフレームワークを使います。

アーキテクチャ

動作の流れ

「購入」を押すと何が起きるか

一度のクリックは、フロントエンドにとって一つの動作ではなく、一連の流れです。

1. クリックを受け止める——ボタンが押されたことに気づき、何を選んだかを読み取ります。
2. 読み込み中の表示を出す——ボタンを無効にしてスピナーを出し、二重クリックを防ぎます。
3. リクエストを送る——注文をまとめ、バックエンドに処理を依頼します。
4. 画面を更新する——成功すれば確認を表示し、失敗（在庫切れ、カード拒否）ならわかりやすいメッセージを出して、やり直せるようにします。

購入が成立するかどうかをフロントエンドが決めることは決してありません——リクエストを取り次ぎ、バックエンドが下した結果を表示するだけです。

まとめ

• フロントエンド ＝ 利用者が直接触れる層。
• 見せることと操作を担当し、データはバックエンドから受け取る。
• 体験は大切だが、正しさはバックエンドと一緒に守る。