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

✅ 回答

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	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つのプロジェクトでフロントもバックも書けます。