・言葉の意味が分からず、説明が理解できない
・調べても別の用語が出てきて混乱する
・何となく流してしまい、後で詰まる

こうした状態を防ぐために、
この記事では Web開発を学ぶうえで最低限知っておくべき用語 を
分野別にまとめました。

すべてを暗記する必要はありません。
「聞いたことがある」「意味を思い出せる」状態を目指してください。

この記事の使い方

・分からない用語が出てきたら戻ってくる
・学習初期に一度ざっと目を通す
・復習用のチェックリストとして使う

この用語集は、
今後の記事すべての 共通前提知識 になります。

Web全体に関する基本用語

Webサイト

インターネット上で公開されているページ群のこと。
HTML・CSS・JavaScriptなどで構成されます。

Webアプリケーション

ユーザーの操作に応じて動的に処理が行われるWebサービス。
ログイン、投稿、検索などの機能を持ちます。

ブラウザ

Webページを表示するソフト。
Chrome、Safari、Firefoxなどが代表例です。

サーバー

Webページやデータを保存し、
リクエストに応じてブラウザに返すコンピュータ。

クライアント

サーバーにアクセスする側。
一般的にはブラウザを指します。

URL・通信に関する用語

URL

Webページの住所。
どのサーバーの、どのファイルかを示します。

HTTP / HTTPS

ブラウザとサーバーが通信するためのルール。
HTTPSは通信内容が暗号化されています。

リクエスト

ブラウザからサーバーへ送られる要求。
「このページをください」という指示。

レスポンス

サーバーからブラウザへ返される結果。
HTMLやデータが含まれます。

開発環境・運用に関する用語

開発環境

コードを書き、動作確認を行うための環境。
ローカル環境（MAMPなど）が代表例です。

本番環境

実際にユーザーがアクセスする公開環境。
レンタルサーバーやVPSなど。

ローカル環境

自分のパソコン内に構築した開発環境。
外部からはアクセスできません。

ドキュメントルート

ブラウザからアクセスできるファイルの起点となるフォルダ。

HTML・CSSに関する用語

HTML

Webページの構造を定義する言語。
見出し、文章、リンクなどの意味を表します。

CSS

Webページの見た目を整えるための言語。
色、サイズ、レイアウトを指定します。

タグ

HTMLで使われる要素。
見出しや段落などの役割を持ちます。

属性

タグに追加情報を与えるもの。
class、id、href などがあります。

セマンティックHTML

見た目ではなく「意味」を重視したHTMLの書き方。
SEOや保守性に影響します。

JavaScriptに関する用語

JavaScript

Webページに動きを付けるための言語。
クリックや入力に応じた処理を行います。

DOM

HTMLをプログラムから操作できる形にしたもの。
JavaScriptはDOMを通して画面を変更します。

イベント

クリックや入力など、ユーザーの操作。

PHP・バックエンドに関する用語

PHP

サーバー側で動作するプログラミング言語。
フォーム処理やデータ操作を担当します。

バックエンド

画面の裏側で処理を行う領域。
PHPやデータベースが含まれます。

フロントエンド

ユーザーの目に見える画面側。
HTML、CSS、JavaScriptが中心です。

バリデーション

入力内容が正しいかチェックする処理。
セキュリティ上とても重要です。

データベースに関する用語

データベース

データを整理して保存する仕組み。

MySQL

代表的なデータベース管理システム。

SQL

データベースを操作するための言語。

CRUD

データ操作の基本4つ。
作成、取得、更新、削除を指します。

セキュリティに関する用語

XSS

悪意のあるスクリプトを実行させる攻撃手法。

CSRF

ユーザーの意図しない操作を実行させる攻撃。

エスケープ

特殊文字を安全な形に変換する処理。

学習・開発全般でよく出てくる用語

フレームワーク

よく使う処理をまとめた土台。
LaravelやReactなどがあります。

ライブラリ

特定の機能をまとめた部品。

デバッグ

エラーや不具合の原因を調査・修正する作業。

バージョン管理

コードの変更履歴を管理する仕組み。
Gitが代表例です。

まとめ

Web開発では、
用語の理解がそのまま理解度に直結します。

・分からない言葉を放置しない
・一度で覚えようとしない
・必要なときに戻って確認する

この用語集を
学習の辞書代わり に使いながら、
少しずつ理解を積み上げていきましょう。

次に読むべき記事

▶ 次の記事
2-1 Web開発に必要なツール一覧と選び方

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

・開発環境
・本番環境

しかし初心者のうちは、

「なんとなく違う気はするけど、
正直よく分からない」

という状態になりがちです。

この違いを曖昧なまま進むと、

・ローカルでは動くのに公開すると壊れる
・エラーが表示されなくて原因が分からない
・なぜ設定を分ける必要があるのか分からない

といった 典型的なトラブル に直結します。

この記事では、
開発環境と本番環境の違いを“役割”から整理 し、
後のPHP・サーバー学習につながる形で解説します。

この記事で学べること

・開発環境とは何か
・本番環境とは何か
・なぜ分ける必要があるのか
・初心者が必ずつまずくポイント
・今後の学習で意識すべきこと

まず結論：目的がまったく違う

最初に結論です。

・開発環境
　→ 作る・試す・壊す場所

・本番環境
　→ 公開して使ってもらう場所

目的が違うため、設定も扱い方も違う
というのが最大のポイントです。

開発環境とは何か

開発環境とは、
自分のパソコン上でWeb開発を行うための環境 です。

主な目的は次の通りです。

・コードを書く
・動作を確認する
・エラーを確認する
・自由に試行錯誤する

MAMP や XAMPP などを使って、

・PHP
・Webサーバー
・データベース

を、
ローカル環境で動かします。

開発環境の特徴

開発環境には、
次のような特徴があります。

・自分しかアクセスしない
・エラーを画面に表示してよい
・設定を頻繁に変えてよい
・多少壊れても問題ない

つまり、
学習と実験のための安全な場所
という位置づけです。

本番環境とは何か

本番環境とは、
実際にWeb上で公開されている環境 です。

・レンタルサーバー
・VPS
・クラウドサーバー

などが該当します。

ここでは、

・一般ユーザーがアクセスする
・信頼性と安全性が最優先
・エラーを見せてはいけない

という前提で運用されます。

本番環境の特徴

本番環境には、
次のような特徴があります。

・誰でもアクセスできる
・エラー内容を表示しない
・設定変更は慎重に行う
・セキュリティを最優先する

開発環境と違い、
「壊して学ぶ」は許されない場所
です。

なぜ環境を分ける必要があるのか

環境を分ける最大の理由は、
安全性と効率 です。

もし本番環境で、

・エラーを表示
・未完成のコードを実行
・設定を試行錯誤

してしまうと、

・ユーザーにエラーが見える
・情報漏洩につながる
・信頼を失う

といったリスクがあります。

「ローカルでは動くのに本番で動かない」理由

初心者が最も混乱するポイントです。

これは、
環境の違いを意識していない ことが原因です。

よくある違いとして、

・PHPのバージョン
・拡張機能の有無
・ファイルパス
・権限設定

などがあります。

エラー表示の違いは特に重要

開発環境では、

・エラーを表示する
・警告もすべて出す

のが基本です。

一方、本番環境では、

・エラーを表示しない
・ログにだけ記録する

という設定が一般的です。

この違いを知らないと、

「本番で真っ白になって原因が分からない」

という状態になります。

PHP学習で意識すべき環境の考え方

これからPHPを学ぶうえで、
次の意識を持ってください。

・開発環境で試す
・本番環境では完成したものだけ動かす
・設定は環境ごとに分ける

この考え方は、
6章で学んだ

・エラーハンドリング
・セキュリティ
・セッション

すべてにつながっています。

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

よくある勘違いです。

・本番サーバーで直接開発する
・エラーが出ない＝正しいと思う
・環境差を考えずにコードを移す

これらは、
成長を遅らせる原因 になります。

今後の学習とのつながり

この後の章では、

・MAMP / XAMPP
・レンタルサーバー
・VPS / Linux

などを扱います。

そのすべてで、
「これは開発環境か？本番環境か？」
という視点が重要になります。

まとめ

開発環境と本番環境は、

・目的
・使い方
・設定
・意識

が、まったく違います。

・開発環境
　→ 学ぶ・試す・壊す

・本番環境
　→ 公開する・守る・安定させる

この違いを理解できたことが、
Web開発者としての大きな一歩 です。

次に読むべき記事

▶ 次の記事
1-6 Web開発で最低限知っておくべき用語集

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

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

なんとなく、

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

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

この記事では、

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

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

この記事で学べること

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

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

最初に結論です。

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

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

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

フロントエンドとは何か

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

ユーザーが、

・見る
・触る
・操作する

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

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

代表的な技術は次の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ページが表示される仕組み

しかし、
その裏側では 複数の技術が連携して処理 されています。

・HTMLはどこで処理されているのか
・PHPはいつ実行されているのか
・ブラウザは何をしているのか

これらを理解していないと、
後の学習で 必ず混乱 します。

この記事では、
Webページが表示されるまでの流れ を
できるだけシンプルに、順番で整理します。

この記事で学べること

・Webページ表示の全体像
・ブラウザとサーバーの役割
・HTML / CSS / JavaScript / PHP の位置づけ
・なぜエラーが起きるのかの理由

Webページは「誰が作っているのか」

まず結論から整理します。

Webページは、サーバーとブラウザの共同作業 です。

・サーバー
　→ データを用意する側
・ブラウザ
　→ 画面に表示する側

この役割分担を理解することが、
Web開発の最初の一歩です。

Webページ表示の全体の流れ

Webページが表示されるまでの流れは、
次のようになっています。

1. ブラウザがURLにアクセスする

2. サーバーにリクエストが送られる

3. サーバーが処理を行う

4. HTMLがブラウザに返される

5. ブラウザが画面に表示する

重要なのは、
最終的にブラウザが受け取るのはHTML
という点です。

ブラウザの役割

ブラウザ（ChromeやSafariなど）は、
次の役割を担っています。

・HTMLを読み取る
・CSSを適用する
・JavaScriptを実行する
・画面として描画する

つまり、
見た目を作っているのはブラウザ です。

サーバーの役割

一方、サーバーは次の役割を担います。

・リクエストを受け取る
・PHPなどのプログラムを実行する
・必要なHTMLを生成する
・結果をブラウザに返す

PHPは、
サーバー側でのみ実行される
という点が非常に重要です。

HTMLはどこで処理されているのか

HTMLは、
サーバーでは処理されません。

サーバーは、

・HTMLを「文字として返す」だけ

です。

HTMLを読み取り、
構造として解釈しているのは
ブラウザ です。

PHPはどこで実行されているのか

PHPは、

・サーバー上で
・HTMLを作るために
・実行されるプログラム

です。

PHPの処理結果として、
HTMLが生成されてから
ブラウザに送られます。

ブラウザには、
PHPのコードそのものは届きません。

PHPとHTMLの関係

整理すると、
次の関係になります。

・PHP
　→ HTMLを作るための道具
・HTML
　→ ブラウザに表示される結果

そのため、

「PHPが正しく動いているか」
＝
「最終的にHTMLがどうなっているか」

を見ることが重要になります。

CSSとJavaScriptはいつ動くのか

CSSとJavaScriptは、
ブラウザ側で動作 します。

・CSS
　→ 見た目を整える
・JavaScript
　→ 動きをつける

PHPとは違い、
ブラウザが直接処理する点が特徴です。

なぜ「表示されない」エラーが起きるのか

Web開発でよくある
「表示されない」という問題は、
次のどこかで止まっています。

・サーバーに届いていない
・PHPでエラーが起きている
・HTMLが正しく生成されていない
・ブラウザ側でエラーが起きている

どこで問題が起きているかを
切り分けられるようになると、
デバッグが一気に楽になります。

初心者が混乱しやすいポイント

特に多い混乱ポイントです。

・PHPのechoが画面に出ない
・HTMLは正しいのに表示が崩れる
・JavaScriptのエラーで画面が止まる

これらはすべて、
「どこで処理されているか」
を理解していないことが原因です。

学習時のおすすめの考え方

コードを書くときは、
常に次を意識してください。

・この処理はサーバー側か？
・ブラウザ側か？

この視点を持つだけで、
Web開発の理解度は大きく変わります。

まとめ

Webページは、

・サーバーで処理され
・HTMLが生成され
・ブラウザで表示される

という流れで動いています。

PHPはサーバー側、
HTML / CSS / JavaScript はブラウザ側。

この 役割分担 を理解できたことが、
今後の学習の大きな土台になります。

次に読むべき記事

▶ 次の記事
1-4 フロントエンドとバックエンドの違い

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

そう思って学習を始めたものの、

・結局、何ができるようになればいいのか
・どこまでできれば仕事になるのか
・今学んでいる内容が何につながるのか

が、見えなくなることはよくあります。

この原因の多くは、
Webエンジニアの仕事の全体像を知らないまま学んでいる
ことにあります。

この記事では、
Webエンジニアが実際に何をしているのか を整理し、
これから学ぶ内容との関係を明確にします。

この記事で学べること

・Webエンジニアの仕事の全体像
・フロントエンドとバックエンドの役割
・学習内容がどこにつながるのか
・初心者が最初に目指すべき状態

Webエンジニアとは何か

Webエンジニアとは、
Web上で動く仕組みを作るエンジニア です。

具体的には、

・Webサイト
・Webサービス
・管理画面
・フォームやログイン機能

などを、
設計・実装・運用 します。

単に「ページを作る人」ではなく、
仕組みを作る人 という点が重要です。

Webエンジニアの仕事は「裏側」が多い

普段ユーザーが見ているのは、

・画面
・ボタン
・入力フォーム

ですが、
Webエンジニアの仕事の多くは
ユーザーから見えない部分 にあります。

例えば、

・入力内容をどう処理するか
・データをどう保存するか
・安全に動かすにはどうするか

といった部分です。

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

Webエンジニアの仕事は、
大きく2つに分けられます。

フロントエンド

フロントエンドは、
ユーザーが直接触れる部分 を担当します。

主に使う技術は、

・HTML
・CSS
・JavaScript

役割は、

・画面を表示する
・操作に反応させる
・見た目を整える

です。

バックエンド

バックエンドは、
裏側の処理 を担当します。

主に使う技術は、

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

役割は、

・データを処理する
・保存・取得する
・安全に制御する

です。

なぜ両方を理解する必要があるのか

初心者のうちは、

「フロントだけ」
「バックだけ」

と分けて考えがちですが、
実際のWeb開発では
両者は常につながっています。

例えば、

・フォーム入力（フロント）
・PHPで処理（バック）
・結果を表示（フロント）

という流れです。

Webエンジニアは「流れ」を作る仕事

重要な視点です。

Webエンジニアは、
1つの技術だけを使う仕事ではありません。

・入力 → 処理 → 出力
・アクセス → 判定 → 表示

といった
一連の流れを設計・実装する仕事 です。

今学んでいる内容は何につながるのか

このロードマップで学ぶ内容は、
すべて実務につながっています。

・HTML / CSS
　→ 画面を作る

・PHP
　→ 処理を作る

・セキュリティ
　→ 安全に動かす

・データベース
　→ 情報を保存する

「なぜこれを学ぶのか」が
すべて明確につながる構成 になっています。

初心者が最初に目指すべき状態

最初から、

・難しい設計
・高度なフレームワーク

を目指す必要はありません。

まず目指すべきは、

・処理の流れを説明できる
・コードの役割が分かる
・なぜこの処理が必要か理解している

という状態です。

Webエンジニアの成長ステップ

大まかな成長イメージです。

1. Webの仕組みを理解する

2. フロントとバックの役割を知る

3. PHPで処理を書けるようになる

4. データベースと連携できる

5. フレームワークを使う

このロードマップは、
①〜④をしっかり固めること を目的としています。

この後の学習とのつながり

この後の記事では、

・Webページが表示される仕組み
・開発環境と本番環境
・PHPの基礎と実践

へと進みます。

それらはすべて、
Webエンジニアの仕事を理解するための部品 です。

まとめ

Webエンジニアは、

・画面を作り
・処理を実装し
・データを扱い
・安全に運用する

という
一連の流れを作る仕事 です。

今後学ぶ内容は、
すべてこの仕事につながっています。

「何のために学んでいるのか」を
見失わずに進むための、
基礎となる考え方 を
ここで押さえておきましょう。

次に読むべき記事

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

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

・HTML
・CSS
・PHP

といった技術に入ってしまいます。

しかし、
その前に必ず理解しておくべきことがあります。

それが、
👉 「Webとは何か」 です。

この仕組みを理解していないと、

・なぜその技術が必要なのか分からない
・エラーの原因が理解できない
・学習が断片的になる

という状態になりやすくなります。

この記事では、
Webの基本的な仕組みを
できるだけシンプルに、しかし本質を外さずに 解説します。

この記事で学べること

・Webとは何か
・インターネットとの違い
・Webページが表示される仕組みの概要
・Web開発の全体像

Webとは何か（結論）

Webとは、
👉 インターネット上で情報を閲覧・共有する仕組み です。

私たちが普段使っている、

・Google検索
・ニュースサイト
・SNS
・ECサイト

これらはすべて
Webの仕組みの上で動いています。

インターネットとWebの違い

よく混同される2つの言葉です。

・インターネット
　→ 世界中のコンピュータをつなぐネットワーク

・Web
　→ その上で動く「情報を見る仕組み」

つまり、

👉 Webはインターネットの一部

という関係になります。

Webページはどうやって表示されるのか

Webページは、
次の流れで表示されています。

サンプルイメージ（流れ）

1. ユーザーがURLを入力

2. ブラウザがサーバーへリクエスト送信

3. サーバーがHTMLを返す

4. ブラウザがHTMLを解析して画面に表示

この流れを理解することが、
Web開発のすべての基礎になります。

役割の分担を理解する

Webは、
複数の役割に分かれて動いています。

・ブラウザ（クライアント）
　→ 表示する側

・サーバー
　→ データやHTMLを返す側

・HTML / CSS / JavaScript
　→ 表示内容を作る

HTMLの位置づけ

HTMLは、

👉 ブラウザに「何を表示するか」を伝えるもの

です。

この時点では、

・デザイン（CSS）
・処理（PHP）

はまだ登場しません。

Web開発とは何をするのか

Web開発とは、
一言でいうと次の通りです。

👉 ユーザーのリクエストに対して、適切な情報を返す仕組みを作ること

そのために、

・HTML
・CSS
・JavaScript
・PHP

といった技術を組み合わせます。

初心者がつまずく理由

Webが分かりにくい理由は、

・目に見えない通信がある
・複数の技術が関係している
・役割が分かれている

からです。

しかし、
基本はシンプルです。

👉 「リクエスト → レスポンス」

この1本の流れだけを
まずは理解してください。

このあと学ぶ内容とのつながり

この後の章では、

・HTML → 構造
・CSS → 見た目
・JavaScript → 動き
・PHP → 処理

という形で、
役割ごとに分けて学習していきます。

まとめ

Webとは、

👉 インターネット上で情報をやり取りする仕組み

です。

そしてその基本は、

・ユーザーがリクエストする
・サーバーが応答する

というシンプルな流れです。

この理解があることで、
今後の学習が一気に分かりやすくなります。

次に読むべき記事

▶ 次の記事
1-2 WebサイトとWebアプリの違い

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