そもそも何が違う？
フロントエンドは「ユーザーの目に見える部分」を担当します。ブラウザの中で動くHTML・CSS・JavaScriptが主役です。一方、バックエンドは「目に見えない裏側」を担当します。サーバーで動くプログラム・データベース・認証・決済など、ユーザーには見えないけれどサービスを成り立たせている部分です。
仕組み：両者はどう連携する？
たとえばSNSで「いいね」ボタンを押すと、まずフロントエンドが画面の数字を増やして見せます。その裏で、バックエンドに「Aさんが投稿123にいいねした」という情報が送られ、データベースに記録されます。フロントエンドはユーザーへの応答を素早く返す係、バックエンドはデータを正しく記録・計算する係。役割が分かれていることで、巨大なサービスでもスムーズに動けます。
同じ機能を分解してみる
ログイン機能で考えると、フロントエンドは入力フォーム、エラーメッセージ、ログイン後の画面切り替えを担当します。バックエンドは、送られてきたメールアドレスとパスワードを確認し、本人ならセッションやトークンを発行します。データベースにはユーザー情報が保存されますが、パスワードをそのまま保存してはいけません。このように、1つの機能でも「見える部分」「通信」「保存」「安全確認」に分けると、担当範囲が理解しやすくなります。
何に使われている？それぞれの代表技術
中高生におすすめの選び方
絵を描く・色やデザインが好き・人がどう操作するかを考えるのが楽しいタイプは、フロントエンドが入り口に向いています。逆に、論理パズルが好き・整然としたルールに従うのが快適・データを扱うのに抵抗がない人は、バックエンドに興味を持ちやすいです。とはいえ、両方やる人（フルスタックエンジニア）もいます。最初に決めず、まずHTML・CSS・JavaScriptで小さく作ってみて、次に小さなAPIやデータ保存を足し、楽しい部分を伸ばす方針でOKです。
気をつけたい落とし穴
- 「フロントは簡単、バックは難しい」という決めつけ。デザインを正しく実装する難しさは、ロジック以上に奥が深い
- 流行のフレームワーク（Reactなど）だけ追って、HTML・CSS・JSの基礎を飛ばす。土台がないと結局つまずく
- 「自分はバック向き」と早く決めすぎる。1年やってみて違和感があれば乗り換えていい
将来どう役立つ？
Webエンジニアの求人では、フロントエンド・バックエンドが別々の職種として募集されることがあります。新卒や学習初期では、画面に結果が見えやすいフロントエンドから入りやすい人も多いです。一方で、バックエンドや設計、インフラに広がると、サービス全体の仕組みを考える仕事にもつながります。
今日からできること
- 普段使っているWebサービスを1つ選び、F12で「フロントの動き」を観察する
- 「ボタンを押したらどんな処理が裏で走っているか」を想像して紙に書いてみる
- HTML+CSSで1ページ作ったら、次にPython（Flask）かNode.jsで小さなサーバーを動かしてみる