・フロントエンド
・バックエンド

なんとなく、

「見た目がフロントで、裏側がバック」

と理解している方も多いと思いますが、
この理解のまま進むと、
後の学習で 確実に混乱 します。

この記事では、

・フロントエンドとバックエンドの役割
・なぜ分けて考える必要があるのか
・学習ロードマップとの関係

を、実務視点で整理します。

この記事で学べること

・フロントエンドの役割
・バックエンドの役割
・それぞれが担当する処理
・なぜ両方を理解する必要があるのか

まず結論：役割がまったく違う

最初に結論です。

・フロントエンド
　→ ユーザーと直接やり取りする部分

・バックエンド
　→ 裏側で処理を行う部分

どちらが上・下という関係ではなく、
役割が完全に分かれている
と考えてください。

フロントエンドとは何か

フロントエンドとは、
ユーザーのブラウザ上で動く部分 です。

ユーザーが、

・見る
・触る
・操作する

すべての要素が、
フロントエンドに含まれます。

フロントエンドで使われる主な技術

代表的な技術は次の3つです。

・HTML
　→ 画面の構造を作る

・CSS
　→ 見た目を整える

・JavaScript
　→ 動きをつける

これらはすべて、
ブラウザで実行 されます。

フロントエンドの役割

フロントエンドの主な役割です。

・画面を表示する
・入力を受け取る
・操作に反応する
・ユーザー体験を作る

つまり、
使いやすさ・分かりやすさを担う領域
と言えます。

バックエンドとは何か

バックエンドとは、
サーバー側で動く処理全体 を指します。

ユーザーからは見えませんが、
Webサービスの中核となる部分です。

バックエンドで使われる主な技術

代表的な技術は次の通りです。

・PHP
・データベース（MySQLなど）
・Webサーバー

これらは、
サーバー上で実行 されます。

バックエンドの役割

バックエンドの主な役割です。

・入力データを処理する
・データを保存・取得する
・条件によって処理を分ける
・安全に制御する

6章で学んだ PHP の内容は、
すべてこの領域に属します。

フロントとバックはどうつながっているか

実際のWeb開発では、
次のようにつながっています。

1. フロントで入力

2. バックにデータ送信

3. バックで処理

4. 結果をフロントに返す

どちらか一方だけでは、
Webサービスは成立しません。

フォーム処理で考えてみる

例として、
お問い合わせフォームを考えます。

・入力画面
　→ フロントエンド

・入力内容のチェック
　→ バックエンド

・保存・通知
　→ バックエンド

・完了画面表示
　→ フロントエンド

このように、
役割が自然に分かれている ことが分かります。

なぜ分けて考える必要があるのか

理由は大きく3つあります。

1. 処理する場所が違う

2. 使う技術が違う

3. 考え方が違う

これを混同すると、

・PHPをブラウザで動かそうとする
・JavaScriptでDBを操作しようとする

といった
誤った理解 につながります。

学習ロードマップとの関係

このロードマップでは、

・1章
　→ Web全体の仕組みを理解

・2〜5章
　→ フロントエンド基礎

・6章
　→ バックエンド基礎（PHP）

・7章以降
　→ データベース・実践

という順序で進みます。

これは、
役割を分けて理解するための設計 です。

初心者がやりがちな勘違い

よくある勘違いです。

・フロントだけ学べばWebが作れる
・バックだけ分かれば十分
・どちらか一方しか必要ない

実際には、
両方の基礎を理解していること が
大きな強みになります。

まとめ

フロントエンドとバックエンドは、

・動く場所
・役割
・使う技術

が、はっきり分かれています。

・フロントエンド
　→ ユーザーに見せる・触らせる

・バックエンド
　→ 処理する・守る・管理する

この違いを理解できたことが、
Web開発学習の 重要な分岐点 です。

次に読むべき記事

▶ 次の記事
1-5 開発環境と本番環境の違いとは？

▶ 関連記事
1-3 Webページが表示される仕組み