フロントエンドとバックエンドの違い

✅ 回答

Webサイトをコンビニに例えると：フロントエンド＝店内（商品棚、レジ、看板）、バックエンド＝バックヤード（在庫管理、発注システム、防犯カメラ）。

技術的な違い

	フロントエンド	バックエンド
動く場所	ブラウザ（ユーザーのPC/スマホ）	サーバー（インターネット上のPC）
使う言語	HTML, CSS, JavaScript	Python, PHP, Go, Ruby, Node.js
担当する仕事	見た目、操作、アニメーション	データ保存、認証、API提供
ユーザーから見える？	見える（ソースコードも見られる）	見えない
セキュリティ	ユーザーが改ざん可能	サーバー側で守る

クラスの「席替えアプリ」で具体的に

• フロントエンド — 座席表のデザイン、シャッフルボタンの見た目、スマホ対応、結果のアニメーション表示
• バックエンド — 席替え結果の保存、過去の履歴の集計、ログイン機能、管理画面

通信の流れ

1. ユーザーがブラウザでURLを入力
2. バックエンドがHTMLファイルを返す
3. ブラウザ（フロントエンド）がHTMLを表示
4. ユーザーがフォームを送信
5. バックエンドがデータを受け取って保存
6. バックエンドが「保存しました」と返す
7. フロントエンドが「送信完了」と表示

コードで見る違い（ログイン処理の例）

// フロントエンド（ブラウザで動く）
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: '認証失敗' });
  }
});

順番	担当	やること
①	フロント	入力欄の値を集めてサーバーに送る
②	バック	DBでユーザーを検索しパスワードを検証
③	バック	結果（成功/失敗）をJSONで返す
④	フロント	返ってきた結果で画面を更新する

このように両者は fetch と API を通じてキャッチボールします。フロントだけ・バックだけでは成り立たず、協力して1つの機能を作るのがWebアプリです。

どちらから学ぶ？

フロントエンドが先。理由：

• 結果が目に見えるのでモチベーションが続く
• 環境構築が不要（ブラウザだけで動く）
• バックエンドを学ぶときも、フロントエンドの知識が前提になる

「フロントエンドだけ」でも十分作れるもの

静的サイト（データ保存が不要なもの）はフロントエンドだけで完結します。自己紹介サイト、ポートフォリオ、部活の紹介ページなど。バックエンドが必要になるのは「ユーザーのデータを保存したい」ときです。

技術スタックの違い

	フロントエンド	バックエンド
言語	HTML / CSS / JavaScript / TypeScript	Node.js / Python / Go / Ruby
フレームワーク	React / Vue / Svelte / Astro	Express / Django / Gin / Spring
主なツール	Chrome DevTools / Figma	Postman / Docker / DB管理ツール
成果物	ユーザーが見る画面（UI）	API / データベース / 認証システム

フルスタック（両方やる）は Next.js・Nuxt・SvelteKit など、1つのフレームワークで両方書けるものが人気です。中高生はフロントエンドから始めましょう。

学習ロードマップ

1〜3ヶ月目：HTML/CSS/JS（フロントエンドの基礎）

4〜6ヶ月目：React or Vue（フロントエンドフレームワーク）

7〜9ヶ月目：Node.js + Express（バックエンド入門）

10〜12ヶ月目：データベース + 認証（フルスタック）

最初からフルスタックを目指す必要はありません。フロントエンドだけでも十分な作品が作れます。

「フルスタックエンジニア」は両方できる人のこと。Next.jsやNuxtを使えば、1つのプロジェクトでフロントもバックも書けます。