ヘルニアクソ野郎エンジニアblog

~ヘルニアでHell near~

WEBサイトの動的ページと静的ページの違いについて「前者はデータベース管理、後者はHTMLファイル管理」

calendar

個人的趣味で現在CMS(コンテンツマネジメントシステム)をフルスクラッチ開発しているのですが、色々勉強になる事が多く、難易度は高いながらもコツコツと続けているところです。

CMSの代表的なものとして「ワードプレス」がありますが、これが如何にものすごい技術で成り立っているのかが分かります。普段何気なしに使っているものですが、とにかくフロントからサーバーサイドまで、かなりの知識がなければこんなものは作れないです。

html/cssはもちろん、php/MySQL、そして厄介なのがjavascriptですよねなんてったって。最低でもこれらの知識が必要です。

だだ、同じものは無理としても、仕組みを理解し、出来栄えとしては比較にならないほどのゴミであったとしても、CMSの自作は幅広い重要な知識が身につくと感じています。

もし興味があるならば、是非チャレンジしてみる事をお勧めします。

今私が作成しているCMSは、完成すれば後日ここのブログでまとめようかと思います。

だいぶ話がそれましたが、今回はCMSを自作することで気づいた「WEBサイトの動的ページと静的ページの違いについて」を簡単にまとまようかと思います。

もともと違いは分かっていたつもりでしたが、実際にその仕組みを作成する事で「なるほどね~」と、少し目からうろこな事があったので、その辺を是非皆さんに知ってもらいたいです。

スポンサーリンク

WEBサイトの動的ページと静的ページの違い

静的ページ

静的ページというのは、ページごとにファイルが存在する仕組みの事です。

例えば、小規模なお店のホームページなどは、基本的に更新をする事がありません。したがって、各ページを専用のHTMLファイルで作成し、それをサーバーに格納している事が多いです。

各ページには、ファイル名がそのままURLに反映されます。

必要な知識は、html/cssだけでも可能ですので、比較的容易に運用できるWEBサイトになりますね。

ざくっと、これが静的ページの特徴になります。

動的ページ

動的ページは、ブログなど、投稿記事、記事の更新が多いサイトで採用されています。

ブログでは、毎日静的なページで記事を投稿していると、とんでもないファイルの数になってしまいます。

しかも、全体的に記事の一部分を修正したい、となった場合、途方もない時間と労力を要する事になります。

こういった背景から、「1ページで管理出来るシステム」の動的ページが採用されています。

例えば、ブログでいえばテンプレートとなる投稿記事のフォームを1つ作成しておきます。

あとは、タイトル、サムネイル、本文、URLなどをCMSを使ってデータベースに保存しておけば、テンプレートがデータベースと紐づき、そこに投稿記事が反映されます。

なんといっても、データベースを利用する事によって「1つのファイル」(厳密に言えばパーツの集合体)で投稿ページを管理する事ができるので、もしページの一部に修正が必要になった場合でも、テンプレを修正するだけで全てのページが変更されるので、メンテナンスが断然楽になります。

ただし、運用にはHTML/CSSだけではなく、PHP/MySQLのサーバーサイドや、javascriptの知識も必要になります。少し高度な知識になるので、そこがネックではあるかもしれません。(※カスタマイズしたり、自作したりする場合)

動的ページは1ページしかないのにURLをどう識別しているのか?

指定先のリンクにページは存在しない

一見、簡単に思えるかもしれませんね。前途した通り、CMSで記事を投稿する際に「URL」もデータベースに保存しておけばいいだけの話ですから。

しかし、よく考えて下さい、静的ページのように、指定先のリンクにページはないのです。ならどうやって、動的ページは表示されるのでしょうか。

ここが、phpやMySQLを理解していないと説明できない部分になるかと思います。

なんとなく、「それはデータベースと紐づいているからだよ」と、ふわっとした説明しか出来ないのではないでしょうか。

合ってはいますが、厳密にいえばこうなります。

URLのパラメータをGET受信している

例えば、unko.com というブログサイトがあるとします。

unko.com/amazing の記事にアクセスしたい場合、静的ページではunko.com/amazingのページがあるので、もちろんそこにアクセスして、そのまま表示されます。

変わって、動的ページの場合も、unko.com/amazingで、記事が表示されます。

このページが存在しないのに記事が表示される仕組みを紐解くと、動的ページのURLは、実際には下記のようになっているのです。

unko.com?n=id5

この?以降の部分が「パーマリンク」と呼ばれるものであり、動的ページが表示される核の部分となります。

仕組みとしては、上のリンクの場合、まずunko.comにアクセスします。

そこのページで、URLにパラメータとして乗っかっている?n=id5を受け取ります。このように、URLの端に?が付いている値を「GETパラメータ」と呼びます。

続いて、GETした値でデータベースを参照します。テーブルに該当するレコードがあれば、そこから投稿ページのテンプレにタイトルや画像、本文を渡し、その表示を返します。

このようにして、1つのテンプレートであたかも複数のページが存在するかのような振る舞いを実現させているんですね。

ちなみに、ワードプレスではパーマリンクの部分を記事タイトルに変換する機能があるので、上記のように動的ページであっても、あたかも静的ページのリンクかのように、unko.com/amazing で表す事ができるんです。

ただ、しつこいようですが、本当はunko.com?n=id5 のような感じで、GETのパラメータがのっかっているのです。

まとめ

以上、WEBサイトの動的ページと静的ページの違いについて簡単にまとめましたが、意外と知らなかった人は多かったのではないでしょうか。(そう信じています。。)

まあ、何事もそうですが、本質を理解することが結構重要だったりすると思いますので、もし今、何かしらふわっとしか理解していない事柄があるなら、一度自分の手で自作(体験)してみると良いかもしれません。

調べて知識を得るのが一番手っ取りばやいですが、自ら体験する事も、理解が深まるので重要だと思います。