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

✅ 回答

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

技術的な違い

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

学園祭サイトで具体的に

• フロントエンド — トップページのデザイン、出し物カードの表示、スマホ対応、ハンバーガーメニュー
• バックエンド — アンケートの回答を保存、投票の集計、ログイン機能、管理画面

通信の流れ

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

どちらから学ぶ？

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

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

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

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

技術スタックの違い

【フロントエンド】
言語: HTML, CSS, JavaScript, TypeScript
フレームワーク: React, Vue, Svelte, Astro
ツール: VS Code, Chrome DevTools, Figma
成果物: ユーザーが見る画面（UI）

【バックエンド】
言語: Node.js, Python, Go, Java, Ruby
フレームワーク: Express, Django, Gin, Spring
ツール: Postman, Docker, DB管理ツール
成果物: 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つのプロジェクトでフロントもバックも書けます。