静的サイト、動的サイトの違いについて調べてみた(html、css、javascript編)

背景

課題やらなんやらでjavascriptを用いて動的サイトを作成することが当たり前になっている今日この頃ですが、そもそも静的サイト、動的サイトってどう違うのか？が疑問に思ったのでサイトを構成するファイル(html、css、js)に着目して静的サイトと動的サイトの違いについて調べた

前提

webエンジニア初心者ですので、初歩的な知識しか書いてありません。

静的サイトと動的サイトの違いって何？

ざっくりと静的サイトと動的サイトの違いを明記します。

静的サイト：誰が見ても同じ内容が表示されるサイト
静的サイトの目的：誰が見ても一定の情報を提供すること

動的サイト：ユーザーによって異なる内容が表示されるサイト
動的サイトの目的：各ユーザーに適した情報を提供すること

もう少し細かく話すと、
静的サイトは、表示される画面が動かないサイトではなく、内容が固定されているサイトを指します。なので、アニメーションが付いていたりコンテンツがスライド表示されていても、誰がそのサイトを見ても同じ内容が表示されれば静的サイトになります。私は最初、一切動きのないサイトだけが静的サイトに当てはまるのだと思っていました。

そして、動的サイトは、画面が動けば動的サイト〜ということではなく、ユーザー毎に適したコンテンツを表示することができるサイトを動的サイトといいます。したがって、画面が一切動かなくても、ユーザー毎に違ったコンテンツを表示していれば動的サイトとなります。

静的サイトと動的サイトがブラウザに表示されるまでの流れ

まず、webサイトがブラウザに表示されるまでの流れを確認します。

サイトを構成するファイル（html、css、js）は、サーバーにアップロードされています。

1. クライアントが表示したいサイトの情報をサーバーにリクエストする
2. サーバーは受け取った情報に適しているファイルを吐き出す
3. サーバーからのレスポンスをクライアントが受け取り、表示する

となります。

静的サイトの一連の流れ

上で書いてあるものと同様で、
クライアントから要求されたファイルをサーバーから吐き出します。
静的サイトは、一定のコンテンツを返すので、特にサーバーで生成するものはありません。

動的サイトの一連の流れ

クライアントから要求されるまでは同じですが、
サーバーでの動きが違ってきます。

• httpリクエストの情報に合わせて必要なコンテンツを生成する
• 静的ファイルは静的サイトと同じように、ファイルをそのまま吐き出す

httpリクエストの情報ってなにがあるのか？

httpリクエストの中には、膨大な情報が組み込まれています。

httpリクエストの内訳があり、

• httpリクエストライン
• httpリクエストヘッダ
• httpリクエストメッセージボディ
  とあります。

簡単に説明すると、

• httpリクエストライン
  どういった処理をしてほしいのか　データ読み込み（GET）、データ追加、作成（POST）他、、
• httpリクエストヘッダ
  クライアント情報　OS、ブラウザ、飛び元のurl 他、、
• httpリクエストメッセージボディ
  httpメソッドがPOSTの時にサーバーに送信する情報が入る

これらの情報からクライアントに吐き出すファイルを構築します。

この流れを基準とし、静的サイトと動的サイトでhtml、css、jsがどう違ってくるのか見ていきます。

html

静的サイトと動的サイトのhtmlファイルの仕組みについては以下のようになっています。

1. 静的サイト
   サーバーサイドにwebページとして作りあげられた状態のhtmlファイルを保存する。

   上でも書いてありますが、静的サイトは、httpリクエストが来たら、一定のコンテンツを返します。つまり、ユーザーによって特にコンテンツを変更する必要がないのでサーバーに表示したい内容をそのまま保存してしまいます。
   したがって、コンテンツを書き換えたい場合はhtmlファイル自体を編集する必要があります。

2. 動的サイト
   サーバーサイドに、htmlファイルにサーバー言語を組み込ませたファイルを保存する。

   サーバー言語のソースコードを組み込ませると、httpリクエストの情報が来た時にそれに適したコンテンツを生成しhtmlファイルを作成します。
   それにより、各ユーザーにあったコンテンツを表示することができます。

css

次に、cssファイルの仕組みは静的サイト、動的サイトでどう違うのかです。

結論は、静的サイトでも、動的サイトでも同じ動きで、cssファイルはサーバーに保管されてリクエストが来たらcssファイルを吐き出します。
理由は、webサイトを訪問してきたユーザーが違っても、デザインの変更はしないからです。
動的サイトの目的を振り返ると、「各ユーザーに適した情報を提供すること」です。
コンテンツが変わりますが、スタイルが変わることはありません。

JS

最後にJSファイルの仕組みは静的サイト、動的サイトでどう違ってくるのかです。

結論は、CSSと同様です。
こちらもユーザー毎に違う動きをすることはないので、リクエストがきたら、jsファイルをそのまま吐き出します

css、jsのような、ファイルを静的ファイルといいます。
静的ファイルには、CSS、JSの他に、画像、静的サイトのHTMLがあります。

結果、静的サイトと動的サイトとでは、HTMLファイルの生成方法に違いがあると分かります。

最後に

静的サイトと動的サイトの目的が明確になれば、自分でサイトを開発する時にどちらが適しているのか考えやすいと思いました。

（CSS、jsは静的ファイルと記載しましたが、サーバーで動的に生成できるのもあるらしいです。私の知識レベルでは混乱しそうなので一旦範囲外にしました、、）

勉強頑張ろう。