動的サイトと静的サイトの違いとは？【メリットデメリット比較】

こんにちは、Masaki Nishi@Twitterです。

つい先ほど、このポートフォリオ件ブログである「masakinishi.com」をWordPress（動的サイト）からGatsby.js（静的サイト）に移行したので、動的サイトと静的サイトの違いとメリット・デメリットを経験則から説明していきます。

動的サイトと静的サイトの違い

ウェブサイトには、基本的に動的と静的の2つの主なタイプがあります。違いをかんたんに説明すると以下のようになります。

静的ウェブサイト

動的ウェブサイト

図解すると以下のようになります。

動的サイトでは、ユーザーがアクセスするたびに、ウェブサーバーへリクエストを送り、必要なデータからウェブページを毎度生成します。一方で、静的サイトは、データベースを持たないため、ウェブサーバにリクエストする必要がなく、すでにあるウェブページをブラウザに送ります。

よくわからなくても大丈夫です。上記を詳しく説明していきます。

動的サイトとは？

名前が示すように、動的ウェブサイトには「動きがあるページ」が含まれています。動きがあるページとは、ユーザーがテキストをただ表示して読むだけでなく、操作できたりするため、コンテンツを変化させることができます。

代表的な例では、ウェブ掲示板であったり、ワードプレスで作られたブログです。それらは、ユーザーによるコメントが実際に反映されて、テキストが表示される機能があるため、ページが動いていると言えます。

このような、サーバーサイドの処理が必要な機能を有していて、PHPやPython、Perl、Rubyなどサーバーサイドプログラミング言語を使用して記述されているものが動的となります。

より詳しく言うと、サーバーサイドとクライアントサイドの両方のスクリプトの組み合わせて、動的コンテンツを生成します。代表的な例では、掲示板やワードプレス以外にも、通販サイトやソーシャルメディアサイトがあります。

動的サイトのメリット

動的サイトは、主に複雑な構成、様々な機能を有したサイトを作れることがメリットです。

Amazonなどの通販サイトのように、ログイン機能や、購買機能、ユーザーによる商品登録機能、決済機能など、多くの機能を有したサイトを作ることができます。

また、ワードプレスなどのブログ管理システムでは、画像のアップロードや記事の投稿など、管理画面にログインして簡単に行うことができます。

動的サイトのデメリット

動的サイトは、複雑な機能を実装できる反面、データベースが必要になるため、サーバーを用意する必要があります。

サーバーを用意して維持するということは、

• お金
• セキュリティ対策
• サーバーダウン対策（アクセス対策）

などにコストがかかることになります。

また、動的サイトは静的サイトに比べて、ウェブページの表示速度が遅くなってしまいます。図解で説明したように、ユーザーがページにアクセスするたびに、ページのプログラムがウェブサーバー上で実行され、パソコンのCPUに負荷がかかってしまうためです。

静的サイトとは？

静的サイトも文字通り、静かなサイトということで、動きがないページで構成されたサイトのことを指します。

HTMLやCSS、JavaScript等のみでコーディングされた最も基本的な種類のウェブサイトです。代表的な例では、阿部寛のホームページがあります。このように、数枚のページだけで構成された小規模な会社・人物のサイトは、余計なものがなく、静的です。

阿部寛のホームページは、ある理由でエンジニアに有名なのですが、説明していきます。

静的サイトのメリット

静的サイトは、機能が複雑でないため開発が動的サイトと比べてかんたんです。そのため、データベースを必要としないため、動的サイトと比べて、

• お金が掛からない
• セキュリティ対策が容易
• サーバーダウン対策（アクセス対策）が容易

と、低コストで作成することができます。

また、動的サイトと比べて、静的ページは要求されたデータをウェブサーバーがブラウザに送信するだけなため、非常に高速で表示することができます。

阿部寛のホームページが有名なのは、上記のメリットのように非常に高速であるためです。というのも、ひと昔前のサイトはほとんどHTML、CSSのみで生成されたページのため、爆速で表示することができます。

静的サイトのデメリット

かんたんに複雑でないシンプルなウェブサイトを開発できるということは、裏を返せば複雑な機能を実装するのは動的サイトよりも難しいといえます。

しかし、コメント機能など、動的な機能を静的サイトに実装するのは不可能ではありません。このサイトも静的サイトですが、一番下までスクロールしてもらうと、コメント機能があるかと思います。「Disqus」というサードパーティ製のコメントツールを使用しています。

このように、サードパーティ製のAPIなどを使えば実装することはできます。

しかし、サードパーティ製のツールを使用しなければならないということは、動的サイトよりも拡張性が少なく、サードパーティ製のツールが存在しないオリジナル機能の実装等のハードルが高くなってしまいます。

動的サイトと静的サイトの比較表

以上をまとめると、以下のような特徴があります。

静的サイト

動的サイト

動的サイトのWordPressから静的サイトのGatsby.jsに移行してみて

今回、ポートフォリオ件ブログを動的なワードプレスからGatsby.jsという静的サイトジェネレーターで生成した静的サイトに変更しましたので、各々のメリット・デメリットをまとめます。

WordPressのメリット・デメリット

メリット

デメリット

Gatsby.jsのメリット・デメリット

メリット

デメリット

運用してみた感想

上記のメリットとデメリットを考慮して、簡易的なポートフォリオ・ブログ機能であれば、わざわざワードプレスで作成する必要もないということで、静的サイトに移行することにしました。

また、Gatsby.jsはReactで書くため、勉強になるという理由が一番大きかったです。

そのため、開発には工数が掛かりましたが、運用は非常に楽です。ただ、Gatsby.js自体のアップデートや、npmパッケージのアップデート等を考えると、ワードプレスのほうが管理が楽だったかも…と思い始めています。

ということで、上記のように動的サイトと静的サイトは各々メリットとデメリットがあるので、技術選定の際には参考にしてください。