HTML・JavaScript・PHPは「役割の違う担当者」
ども。Dadです。
Web制作でよく出てくるHTML、JavaScript、PHP。この3つは似ているようで混乱しがちですが、結論から言うと、役割がまったく違う担当者です。
同じWebページを作っていても、「見える部分を作る人」「動きをつける人」「裏側で判断する人」に分かれています。
PHPは、その中でも一番見えにくい場所で働く担当者です。
だからこそ「よく分からない」と感じやすいのです。
- HTML（家の骨組み）
「ここにタイトルを書く」「ここに画像を置く」という、サイトの動かない土台を作ります。
例）作品の紹介文をそのまま表示するなどです。 - JavaScript（おもてなしの演出）
お客さんの「目の前」で起きる動きを担当します。ブラウザ（SafariやChrome）の中で動くのが特徴です。
例）画像をクリックしたらふわっと拡大する、マウスを乗せたらボタンの色が変わるなどです。 - PHP（バックヤードの管理）
お客さんからは見えない「サーバー（工房の奥）」で、データを取り出す作業を担当します。
例）お問い合わせフォームで「送信」を押した瞬間に、内容をメールで送る。あるいは、ログインした人の名前に合わせて「こんにちは、○○さん」と表示を変えます。
さらに、WordPressで「新しい記事を投稿」した時に、自動的にその記事を全ページの一番上に表示させるのもPHPの仕事です。
3つは「動く場所」と「動く順番」が違う
混乱の原因は、とてもシンプルです。HTML・JavaScript・PHPは、動く場所とタイミングが違うのです。
例えば、ハンドメイド作品の在庫がなくなった時、HTMLだけなら自分でコードを書き換えて「売り切れ」と表示させる必要があります。
PHPがあれば「在庫データが0になったら、自動的に売り切れボタンを表示する」といった判断を、あなたの代わりに裏側でやってくれます。つまり、サイトを「生き物」のように判断して動かすために欠かせない存在なのです。
具体的に説明すると、HTMLはページの形そのものです。見出しがあって、文章があって、画像がある。ブラウザに表示されている内容は、すべてHTMLです。
JavaScriptは、そのHTMLが表示された「あと」に動きます。ボタンを押したらメニューが開く。スクロールしたら画像がふわっと出てくる。ユーザーの操作に反応するのが役割です。
PHPは、それよりも前に働きます。
ページが表示される「前段階」で、「何を表示するか」を決めています。この順番の違いを理解すると、3つがごちゃごちゃにならなくなります。
WordPressで記事を開いた瞬間、裏側で起きていること
ここで、WordPressでブログ記事を1つ開く場面を、もう少し丁寧に追ってみます。
あなたが記事のURLをクリックした瞬間、まずブラウザに表示される前に、サーバー側でPHPが動き出します。
PHPは最初に、こんなことを確認します。
「このURLに対応する記事は存在するか」「下書きではなく公開済みか」「ログインしていない人でも見ていいか」
次に、「このテーマの、このテンプレートを使おう」「タイトルはこれ、本文はこれ」といった情報を集めます。
この時点では、まだ画面には何も表示されていません。
PHPは集めた情報をもとに、「最終的に表示するHTML」を組み立てます。その完成したHTMLがブラウザに送られ、初めて画面にページが表示されます。
ここまでがPHPとHTMLの仕事です。
そしてページが表示されたあと、メニューをタップしたときに動く、画像がスライドする、そういった部分でJavaScriptが働き始めます。
つまり、PHPが裏で準備し、HTMLが表示され、JavaScriptが反応するという流れで、1ページは完成しています。
PHPは「表示される前の判断係」
PHPは、見た目を直接変える言語ではありません。動きが分かりやすいわけでもありません。
けれど、「何を、誰に、どう見せるか」を判断しているのがPHPです。
PHPはあなたのWebサイトを「単なるチラシ」から「気の利くお店」に変えてくれる魔法の道具です。 コードが書けなくても、「これはPHPが裏で頑張ってくれているんだな」と理解するだけで親近感が湧いてきます。
WordPressを使っている時点で、あなたはすでにPHPと一緒にサイトを運営しています。HTMLは目に見える工作。JavaScriptは触ったときの反応。PHPはその前段階で設計を整える存在です。
この役割分担が分かると、functions.phpやテンプレートファイルの中身を見たときに「何だかわからない怖いコード」ではなく「仕組みの一部」として見えるようになります。
仕組みが分かれば、少しずつ手を加えられるようになって、今よりずっとWEBサイト制作が楽しくなっていくはずですよ。
ではまた。
