ユーザーから見たサイトの構造！「フロントエンド」と「バックエンド」

サイトの制作者側に続いて、今度は私たち「サイトの利用者（ユーザー）」から見たときの構造について解説します！😊

普段何気なく使っているサイトやアプリですが、ユーザーの目に見える部分と、絶対に見えない裏側の部分では、役割がハッキリ分かれているんですよ。✍️

---

ユーザーから見た2つの世界

サイトの構造は、大きく分けて「フロントエンド」と「バックエンド」の2つで構成されています。

1. フロントエンド（Front-end）

【役割：ユーザーが直接触れる「表舞台」】

ブラウザ（SafariやChromeなど）で見ることができる、サイトの「顔」の部分です。

• 何が見える？：きれいなデザイン、読みやすい文章、クリックできるボタン、動く画像など。

• 大事なこと：ユーザーが「使いやすい！」「かっこいい！」と感じる**UX（ユーザー体験）**を形にすることです。

• 例：通販サイトで商品を選んだり、SNSで「いいね」ボタンを押したりする画面そのものがフロントエンドです。🎨

2. バックエンド（Back-end）

【役割：目には見えない「裏方の魔法」】

ユーザーからは絶対に見えない、サーバーやシステムの裏側の部分です。

• 何をしている？：データの計算、保存、呼び出しなど、複雑な「仕組み」を動かしています。

• 大事なこと：正確に、そして安全に処理を行うこと。ユーザーが入力した大切なパスワードや個人情報を守るのもバックエンドの重要な仕事です。🔐

• 例：注文ボタンを押した後に「在庫を減らす処理」をしたり、ログインしたときに「この人は本人かな？」と確認したりする動きです。⚙️

---

フロントエンドとバックエンドの連携

この2つがどのように協力しているか、具体例で見てみましょう！📝

例：ネットでログインするとき

1. フロントエンド（表）：あなたがIDとパスワードを入力して「ログイン」ボタンを押します。

2. （情報の受け渡し）：入力されたデータが裏側へ送られます。

3. バックエンド（裏）：送られてきたデータが、保存されている情報と合っているか一瞬でチェックします。✅

4. フロントエンド（表）：バックエンドから「OK！」という返事をもらって、あなたのマイページを表示します。🌈

---

まとめ

サイトを利用するとき、私たちは常にフロントエンドと対話していますが、その裏ではバックエンドが休まずに働いてくれています。

• フロントエンド ＝ お客さんを喜ばせる「おもてなしの画面」

• バックエンド ＝ 正確に仕事をこなす「プロの職人システム」

この両方がうまく組み合わさることで、私たちは便利にインターネットを楽しむことができるんですね。✨

---

用語解説

• ブラウザ：Webサイトを見るためのソフト（Chrome, Safariなど）。フロントエンドを表示する舞台です。

• サーバー：バックエンドが動いているコンピュータのこと。

• UX（User Experience）：ユーザーがサイトを使って感じる「体験」のこと。