【IT用語】 静的サイトと動的サイトとは？違いやできることを解説！
静的サイトは「内容の変化しないWebサイト」である一方で、動的サイトは「アクセスした端末や時間によって内容が変化するWebサイト」です。両者の違いは、HTML生成のタイミングにあります。
東京大学のホームページとAmazon、二つのWebサイトの間にある大きな違い、それはなんでしょう？
...Amazonは、人によって表示される商品が違いますよね？
一方で東大のホームページは誰がみても同じ内容です。
このように、Webサイトには種類が二つあることに気付いていたでしょうか。
実はこの2つのWebサイトは「静的サイト」と「動的サイト」として区別され、技術的にも違いがあります。
本記事では、静的サイトと動的サイトの特徴と違い、そして動的サイトによって何ができるようになったかを解説します。
静的サイトと動的サイトとは？
そもそも、静的サイトと動的サイトとはどんなものなのでしょう？
本章では、二つの概要と違いについて解説します。
静的サイトの特徴
静的サイトは、内容の変化しないWebサイトです。
WebページのHTMLファイルをサーバーにアップロードした後に、HTMLの内容が変わることはありません。
アクセスした際は、サーバーにあるHTMLをとってくるだけなので誰が見ても同じ内容になるのが特徴です。
静的サイトは、主に企業ホームページやLP(ランディングページ: 商品やサービスの特設ページ)で採用されています。
これらは人に合わせて内容を変える必要がありませんよね。
動的サイトより前から使われている、シンプルな仕組みのWebサイトです。
動的サイトの特徴
動的サイトは、ページにアクセスした時にHTMLの内容が作られます。
つまり、アクセスごとに内容が変化するWebサイトなのです。
アクセスした端末や時間、場所などを元にHTMLが作られるため、同じURLでも見る人によって内容が異なります。
動的サイトは、主にECサイトや検索サイト、SNSで採用されています。
ログインするアカウントは人によって変わるため、表示するべき情報も人それぞれですよね。
静的サイトより高度な仕組みを持つ動的サイトの登場で、今までできなかった多くのことが実現できるようになりました。
動的サイトはアクセスごとにHTMLが新しく生成されると書きましたが、それではCSSとJavaScriptはどうでしょう？ 答えは、「CSSは変わらない」です。 デザインは人によって変える必要がありませんよね。 JavaScriptに関しては、静的・動的どちらの場合もありえます。
静的サイトと動的サイトの違い
静的サイトと動的サイトの最大の違いは、「HTMLが作られるタイミング」です。
静的サイトは「アクセスの前」、動的サイトは「アクセスの後」に、HTMLの内容が確定します。
動的サイトの「アクセスした際にHTMLの内容が作られる」という点がポイントで、これによりアクセス元に合わせたWebサイトの設計が可能になります。
次章以降で、具体的にどんなことができるようになったのか解説していきます。
なぜ動的サイトが選択されるのか？
動的サイトが、アクセス元に合わせたWebサイトの設計ができるようになったことで、何ができるようになったのか解説します。
一人一人に合わせた内容を表示できる
AmazonやTwitterなどは、ユーザーによって適した内容、ほしい情報が異なりますよね。
動的サイトであれば、ユーザー個別にページを作ることなくそれぞれに合わせた内容を提供できるようになります。
例えば、Amazonの「あなたへのおすすめ」。
今まで見たり買ったりした商品に関連した商品が出てきますよね。
それはアクセスのたびに、過去のデータから「そのユーザーに適した商品の入ったHTML」を生成しているからなのです。
Webサービスを制作できる
世の中にある、ブラウザ上で動作するWebサービスは全て動的サイトです。
現在、Webサービスは波に乗っている状態で、毎日のように新しいサービスが作られています。
そのWebサービスを作る上で、動的サイトの技術は欠かせません。
例えば、Twitterのタイムライン、Youtubeのおすすめ動画やコメント、これらは動的サイトでなければ実現不可能な機能なのです。
動的サイトを使うとできること
次に、動的サイトで実際にどういったものが作れるのか、解説します。
ログイン機能
誰もが当たり前のようにアカウントを作って利用していますよね。
この「アカウント」という概念、実は動的サイトでないと成り立たないのです。
以下の画像はPikawakaのマイページです。
アカウント名や画像、「わかった」(お気に入り)した記事などは、ログインしているアカウント情報に基づいて表示させる必要があります。
これはHTMLの内容が変えられない静的サイトでは絶対にできない機能であることがわかるかと思います。
後述しますが、サーバーには「データベース」と呼ばれるデータの保管庫が存在します。
アクセス端末のアカウント情報からデータベース内のユーザー情報を参照し、それをもとにHTMLを生成しています。
SNS
TwitterなどのSNSも、アカウントによってタイムラインの内容が異なりますよね。
また、他の人のツイートによってもタイムラインはリアルタイムで更新されていきます。
この「タイムラインの更新」は、タイムラインをリロードするたびに新しいHTMLを生成しているからこそ可能な機能です。
SNSのように、「データがリアルタイムに更新されていく」といった仕組みは動的サイトでないと作れないものなのです。
ECショップ
AmazonのようなECサイトも、動的サイトでなければ実現できません。
注文する際の流れを考えてみましょう。
カートの中身や決済方法、送り先の住所などが全員一緒だったら困りますよね。
これもログイン機能と同じように、注文者の情報がデータベースに保存されているからこそ、個別にやりとりできるのです。
上で挙げた例は、皆さんにとっても非常に身近なものばかりだったでしょう。
「動的サイト」という言葉はあまり知られていませんが、実は最近のWebサービスには欠かせない技術なのです。
動的サイトを作るには
最後に、もう少し踏み込んで、動的サイトに関する技術的なことについて解説します。
動的サイトの仕組み
実際に、HTMLが生成されるときサーバーはどう動いているのでしょう？
アクセスしてからWebサイトが表示させるまでの流れは、以下のようになっています。
- ユーザーがアクセスすると、サーバーは「Webアプリケーション」と呼ばれるプログラムにHTMLの生成を依頼する
- Webアプリケーションはアクセスしたユーザーにあったデータを「データベース」から取り出す
- そのデータを使って生成されたHTMLは、サーバーを経由してユーザーの元へ送られる
静的サイトは、ただHTMLを送り返すだけです。
対して動的サイトでは、サーバーの中に「Webアプリケーション」と「データベース」が存在し、それらがHTMLを作る処理をおこなっているのです。
動的サイトに使われる技術
ここで、動的サイトを開発するのに必要な技術について簡単に解説します。
データベース
データベースは、HTML生成に必要なデータを保管しておくためのストレージです。
今まで述べてきた「ユーザーにあったデータ」はここに保存されています。
Twitterのツイートや、Amazonの商品情報などが、HTMLの「部品」の状態として保存されていると考えるとわかりやすいでしょう。
以下のタイムラインでは、データベースに保存されたツイートが必要に応じて取り出され、HTMLの部品として取り扱われています。
Webアプリケーション
Webアプリケーションは、実際にHTMLを生成するためのプログラムです。
サーバーからのリクエストをもとに、データベースから必要なデータを取り出してHTMLを作成します。
「部品を選び、組み立てる」のがWebアプリケーションの仕事です。
サーバーサイド言語
Webアプリケーションを作ったり、サーバーを動かしたりするのに使われるプログラミング言語は、「サーバーサイド言語」と呼ばれています。
サーバーサイド言語には「Python」や「Ruby」、「PHP」などが含まれます。
実際に「価格ドットコム」や「食べログ」といったWebサービスは、Rubyの「Ruby on Rails」というフレームワークを使って作られています。
「フレームワーク」とは、アプリケーションを作る土台や骨組みのようなもので、これを使ってプログラミングすることで、誰でも簡単かつ高速にWebサービスを作ることが可能になります。
Ruby on Railsを活用すれば、あなたでも食べログのようなWebサイトを作ることができるかもしれません。
動的サイトが作れると...
サーバーサイド言語を身につければ、ECサイト(Amazon)やSNS(Twitter)のような動的サイトを作れるようになります。
このようなWebサービスにおける、サーバー側の処理をおこなうエンジニアは「サーバーサイドエンジニア」と呼ばれ、現在エンジニアの中でも注目を集めています。
ただ、独学でのプログラミング学習は90%が挫折すると言われています。
あなたがプログラミング未経験者であれば、一からスキルを身に付けるのは相当難易度が高いと言えるでしょう。
挫折せずにプログラミングスキルを身につけたい方は、プログラミングスクールを検討するのをおすすめします。
これまで動的サイトのメリットを述べてきましたが、動的サイトが静的サイトの上位互換...というわけではありません。 静的サイトには、「生成の処理がない分高速」、「HTMLを生成する処理がないためパワーのあるサーバーが必要ない」、「サーバーにデータベースを作る必要がない」といったメリットがあります。 静的サイトをより現代に沿った使い方ができる「静的サイトジェネレーター」というものが開発されており、こちらの書籍で詳しく解説されています。
この記事のまとめ
- 静的サイトとは、内容の変化しないWebサイト
- 動的サイトとは、アクセスした端末や時間によって内容が変化するWebサイト
- 動的サイトによって、ログイン機能やSNS、ECサイトなどが作れるようになった
