普段、私たちはURLをクリックしたり、
検索結果を開いたりするだけで
当たり前のようにWebページを見ています。
しかし、
その裏側では 複数の技術が連携して処理 されています。
・HTMLはどこで処理されているのか
・PHPはいつ実行されているのか
・ブラウザは何をしているのか
これらを理解していないと、
後の学習で 必ず混乱 します。
この記事では、
Webページが表示されるまでの流れ を
できるだけシンプルに、順番で整理します。
この記事で学べること
・Webページ表示の全体像
・ブラウザとサーバーの役割
・HTML / CSS / JavaScript / PHP の位置づけ
・なぜエラーが起きるのかの理由
Webページは「誰が作っているのか」
まず結論から整理します。
Webページは、サーバーとブラウザの共同作業 です。
・サーバー
→ データを用意する側
・ブラウザ
→ 画面に表示する側
この役割分担を理解することが、
Web開発の最初の一歩です。
Webページ表示の全体の流れ
Webページが表示されるまでの流れは、
次のようになっています。
-
ブラウザがURLにアクセスする
-
サーバーにリクエストが送られる
-
サーバーが処理を行う
-
HTMLがブラウザに返される
-
ブラウザが画面に表示する
重要なのは、
最終的にブラウザが受け取るのは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 開発環境と本番環境の違いとは？
コメント