フロントエンドとバックエンドの違いを簡単に

✅ 回答

レストランに例えると一発でわかります。フロントエンド＝ホール（お客さんが見る部分）、バックエンド＝厨房（裏で動いている部分）です。

具体的な違い

	フロントエンド	バックエンド
何をする？	画面の見た目・操作を作る	データの保存・処理を行う
使う言語	HTML / CSS / JavaScript	Python / PHP / Go / Java
動く場所	ブラウザ（ユーザーのPC）	サーバー（インターネット上のPC）
結果の見え方	画面に即反映される	裏で動くので目に見えにくい
レストランで言うと	メニュー表、内装、接客	調理、在庫管理、会計処理

学園祭サイトで考える

• フロントエンド — 出し物一覧ページのデザイン、ボタンの動き、スマホ対応
• バックエンド — アンケートの回答を保存する、投票結果を集計する、ログイン機能

静的なサイト（情報を表示するだけ）ならフロントエンドだけで完結します。「データを保存したい」「ユーザーごとに表示を変えたい」ときにバックエンドが必要になります。

どっちから学ぶ？ → フロントエンドが先

理由は3つ：

1. 結果が目に見えるので達成感がある
2. 環境構築が不要（ブラウザだけで動く）
3. バックエンドを学ぶときも、フロントエンドの知識が前提になる

「フルスタック」とは？

フロントエンドとバックエンドの両方ができる人を「フルスタックエンジニア」と呼びます。最初から両方を目指す必要はなく、フロントエンドを固めてからバックエンドに広げるのが自然な流れです。

コードで見る違い

// フロントエンド（ブラウザで動く）
document.getElementById('btn').addEventListener('click', async () => {
  // バックエンドにデータを送る
  const res = await fetch('/api/login', {
    method: 'POST',
    body: JSON.stringify({ email, password })
  });
  const data = await res.json();
  // 画面を更新する
  document.getElementById('name').textContent = data.name;
});

// バックエンド（サーバーで動く）
app.post('/api/login', async (req, res) => {
  const { email, password } = req.body;
  // データベースでユーザーを検索
  const user = await db.findUser(email);
  // パスワードを検証
  if (user && await bcrypt.compare(password, user.hash)) {
    res.json({ name: user.name });
  } else {
    res.status(401).json({ error: '認証失敗' });
  }
});

フロントエンド：ユーザーの操作を受け取り、画面を更新する。ブラウザで動く。

バックエンド：データの保存・検索・認証など「裏側の処理」を担当。サーバーで動く。

レストランに例えると、フロントエンド＝ホール（お客さんと接する）、バックエンド＝キッチン（料理を作る）です。

中高生はどちらから？

フロントエンドから始めましょう。理由：①すぐ目に見える結果が出る ②ブラウザだけで動く ③HTML/CSS/JSの延長線上にある。バックエンドは「データを保存したい」「ログイン機能を作りたい」と思ったときに学べばOKです。