Webサイトについて調べていると、
「静的サイト」「動的サイト」という言葉をよく見かけます。
・この2つは何が違うのか
・どちらを使えばいいのか
・WordPressやWebアプリはどちらに分類されるのか
これを曖昧なまま学習を進めると、
HTML・JavaScript・PHPの役割が混ざってしまい、理解が一気に難しくなります。
この記事では、
静的サイトと動的サイトの違いを、具体例を交えて分かりやすく解説します。
ここを理解すると、なぜPHPやデータベースが必要になるのかが自然に分かるようになります。
この記事で学べること
・静的サイトと動的サイトの違い
・それぞれの仕組みと特徴
・どんな場面で使われるのか
・HTML・PHP・WordPressとの関係
静的サイトとは何か
静的サイトとは、
用意されているHTMLファイルを、そのままブラウザに返すWebサイトです。
サーバー側で特別な処理は行われず、
リクエストが来たら決まったファイルを返します。
静的サイトの仕組み
静的サイトの流れはとてもシンプルです。
ブラウザがURLにアクセスする
サーバーがHTMLファイルを返す
ブラウザがそのまま表示する
この間に、
PHPなどのプログラム処理は入りません。
静的サイトの具体例
・企業のコーポレートサイト
・LP（ランディングページ）
・ポートフォリオサイト
・説明用のシンプルなWebページ
内容が頻繁に変わらないページに向いています。
静的サイトの特徴
メリット
・仕組みがシンプル
・表示が速い
・サーバー負荷が少ない
デメリット
・内容の変更はHTMLを書き換える必要がある
・ユーザーごとに内容を変えられない
・データ管理に向かない
動的サイトとは何か
動的サイトとは、
アクセス時にサーバー側で処理を行い、表示内容を生成するWebサイトです。
PHPなどのプログラムが実行され、
必要に応じてデータベースから情報を取得します。
動的サイトの仕組み
動的サイトの流れは次のようになります。
ブラウザがリクエストを送る
サーバーでPHPなどの処理が実行される
データベースから情報を取得する
生成されたHTMLをブラウザに返す
ブラウザが表示する
毎回、
状況に応じてHTMLが作られるのが特徴です。
動的サイトの具体例
・WordPressのブログ
・会員制サイト
・お問い合わせフォーム
・ECサイト
・Webアプリケーション
ほとんどの実用的なサービスは、
動的サイトに分類されます。
動的サイトの特徴
メリット
・内容を柔軟に変更できる
・ユーザーごとに表示を変えられる
・データ管理ができる
デメリット
・仕組みが複雑
・サーバー負荷が高くなりやすい
・セキュリティ対策が必要
静的サイトと動的サイトの違いまとめ
整理すると、次のようになります。
静的サイト
・HTMLをそのまま返す
・処理がシンプル
・内容は固定
動的サイト
・サーバーで処理してHTMLを生成
・PHPやDBを使う
・内容が状況で変わる
この違いを理解しておくと、
「なぜPHPが必要なのか」がはっきりします。
JavaScriptがあると動的になる？
ここでよくある勘違いを整理しておきます。
JavaScriptを使うと、
画面が動いたり、表示が変わったりしますが、
それだけでは動的サイトとは呼びません。
理由は、
JavaScriptは基本的に ブラウザ側で動く処理 だからです。
・表示の切り替え
・入力チェック
・アニメーション
これらは、
サーバー側の処理とは別物です。
WordPressはどちら？
WordPressは、
動的サイトに分類されます。
・アクセス時にPHPが実行される
・データベースから記事を取得する
・条件によって表示が変わる
そのため、
WordPressを理解するには、
静的サイトと動的サイトの違いを知っておくことが重要です。
学習の順番とこの知識の位置づけ
ここまでの内容は、
今後の学習で次のようにつながっていきます。
・HTML → 静的サイトの基礎
・CSS → 見た目の調整
・JavaScript → 画面の動き
・PHP → 動的サイトの処理
・DB → データ管理
今は完全に理解できなくても問題ありません。
「役割の違い」が分かっていれば十分です。
まとめ
静的サイトと動的サイトの違いは、
サーバー側で処理を行うかどうかにあります。
・静的サイトはHTMLをそのまま返す
・動的サイトはPHPなどで処理して生成する
・WordPressやWebアプリは動的サイト
この理解があると、
これから学ぶHTML・CSS・JavaScript・PHPの位置づけが明確になります。
次は、
ドメインやDNS、SSLといったWebの基盤要素について解説していきます。
次に読むべき記事
▶ 次の記事：
1-4 ドメイン・DNS・SSLの役割を初心者向けに説明
▶ 関連記事：
1-1 Webサイトが表示される仕組みを図解で理解する
1-2 HTTPとは何か｜リクエストとレスポンスの基本
コメント