動的サイトと静的サイトの違いとは？【メリットデメリット比較】
動的サイトから静的サイトへ移行したので経験則から比較します
こんにちは、Masaki Nishi@Twitterです。
つい先ほど、このポートフォリオ件ブログである「masakinishi.com」をWordPress（動的サイト）からGatsby.js（静的サイト）に移行したので、動的サイトと静的サイトの違いとメリット・デメリットを経験則から説明していきます。
動的サイトと静的サイトの違い
ウェブサイトには、基本的に動的と静的の2つの主なタイプがあります。違いをかんたんに説明すると以下のようになります。
静的ウェブサイト
- データベースがなく、作成が最も簡単で、基本的なウェブサイト。
動的ウェブサイト
- 同じソースコードから異なるコンテンツを表示することができるため、より動的なウェブサイト。
図解すると以下のようになります。
動的サイトでは、ユーザーがアクセスするたびに、ウェブサーバーへリクエストを送り、必要なデータからウェブページを毎度生成します。一方で、静的サイトは、データベースを持たないため、ウェブサーバにリクエストする必要がなく、すでにあるウェブページをブラウザに送ります。
よくわからなくても大丈夫です。上記を詳しく説明していきます。
動的サイトとは？
名前が示すように、動的ウェブサイトには「動きがあるページ」が含まれています。動きがあるページとは、ユーザーがテキストをただ表示して読むだけでなく、操作できたりするため、コンテンツを変化させることができます。
代表的な例では、ウェブ掲示板であったり、ワードプレスで作られたブログです。それらは、ユーザーによるコメントが実際に反映されて、テキストが表示される機能があるため、ページが動いていると言えます。
このような、サーバーサイドの処理が必要な機能を有していて、PHPやPython、Perl、Rubyなどサーバーサイドプログラミング言語を使用して記述されているものが動的となります。
より詳しく言うと、サーバーサイドとクライアントサイドの両方のスクリプトの組み合わせて、動的コンテンツを生成します。代表的な例では、掲示板やワードプレス以外にも、通販サイトやソーシャルメディアサイトがあります。
動的サイトのメリット
動的サイトは、主に複雑な構成、様々な機能を有したサイトを作れることがメリットです。
Amazonなどの通販サイトのように、ログイン機能や、購買機能、ユーザーによる商品登録機能、決済機能など、多くの機能を有したサイトを作ることができます。
また、ワードプレスなどのブログ管理システムでは、画像のアップロードや記事の投稿など、管理画面にログインして簡単に行うことができます。
動的サイトのデメリット
動的サイトは、複雑な機能を実装できる反面、データベースが必要になるため、サーバーを用意する必要があります。
サーバーを用意して維持するということは、
- お金
- セキュリティ対策
- サーバーダウン対策（アクセス対策）
などにコストがかかることになります。
また、動的サイトは静的サイトに比べて、ウェブページの表示速度が遅くなってしまいます。図解で説明したように、ユーザーがページにアクセスするたびに、ページのプログラムがウェブサーバー上で実行され、パソコンのCPUに負荷がかかってしまうためです。
静的サイトとは？
静的サイトも文字通り、静かなサイトということで、動きがないページで構成されたサイトのことを指します。
HTMLやCSS、JavaScript等のみでコーディングされた最も基本的な種類のウェブサイトです。代表的な例では、阿部寛のホームページがあります。このように、数枚のページだけで構成された小規模な会社・人物のサイトは、余計なものがなく、静的です。
阿部寛のホームページは、ある理由でエンジニアに有名なのですが、説明していきます。
静的サイトのメリット
静的サイトは、機能が複雑でないため開発が動的サイトと比べてかんたんです。そのため、データベースを必要としないため、動的サイトと比べて、
- お金が掛からない
- セキュリティ対策が容易
- サーバーダウン対策（アクセス対策）が容易
と、低コストで作成することができます。
また、動的サイトと比べて、静的ページは要求されたデータをウェブサーバーがブラウザに送信するだけなため、非常に高速で表示することができます。
阿部寛のホームページが有名なのは、上記のメリットのように非常に高速であるためです。というのも、ひと昔前のサイトはほとんどHTML、CSSのみで生成されたページのため、爆速で表示することができます。
静的サイトのデメリット
かんたんに複雑でないシンプルなウェブサイトを開発できるということは、裏を返せば複雑な機能を実装するのは動的サイトよりも難しいといえます。
しかし、コメント機能など、動的な機能を静的サイトに実装するのは不可能ではありません。このサイトも静的サイトですが、一番下までスクロールしてもらうと、コメント機能があるかと思います。「Disqus」というサードパーティ製のコメントツールを使用しています。
このように、サードパーティ製のAPIなどを使えば実装することはできます。
しかし、サードパーティ製のツールを使用しなければならないということは、動的サイトよりも拡張性が少なく、サードパーティ製のツールが存在しないオリジナル機能の実装等のハードルが高くなってしまいます。
動的サイトと静的サイトの比較表
以上をまとめると、以下のような特徴があります。
静的サイト
- コンテンツは固定、各ページはプレーンなHTML、CSSのコーディングによるもの
- すべてのユーザーに対して同一のデザインを表示する
- 更新が面倒でエラーが発生しやすい
- 各ページのデザインが一意なため、より制御しやすい
- 静的ページを生成するためにプレーンHTMLが必要
動的サイト
- コンテンツはユーザーのプレファレンスによって変化する
- 動的コンテンツやマルチメディア、双方向機能などを提供できる
- デザイン変更アップデートがかんたん
- ユーザーがコンテンツやデザインのアップデートを行える
- PHPやPython、Perl、Rubyなどサーバーサイドプログラミング言語によって動的ページが生成される
動的サイトのWordPressから静的サイトのGatsby.jsに移行してみて
今回、ポートフォリオ件ブログを動的なワードプレスからGatsby.jsという静的サイトジェネレーターで生成した静的サイトに変更しましたので、各々のメリット・デメリットをまとめます。
WordPressのメリット・デメリット
メリット
- 記事のリアルタイム更新が便利
- プラグイン等で機能実装が楽
- 既存テーマ等でデザイン変更が楽
デメリット
- サーバー管理だるい
- プラグインアップデートだるい
- 管理画面が重くなっていく
- ページスピード遅い
Gatsby.jsのメリット・デメリット
メリット
- ページスピードが速い
- シングルページアプリケーションでロードがない
- フロントエンドの開発に集中できる
- サーバー管理がいらない
デメリット
- 開発コストが高い（日本語のソースはもちろん英語でも未解決エラーが多い）
- 記事投稿毎にビルド時間が数分掛かる（記事が多くなるにつれ時間が増えていく）
運用してみた感想
上記のメリットとデメリットを考慮して、簡易的なポートフォリオ・ブログ機能であれば、わざわざワードプレスで作成する必要もないということで、静的サイトに移行することにしました。
また、Gatsby.jsはReactで書くため、勉強になるという理由が一番大きかったです。
そのため、開発には工数が掛かりましたが、運用は非常に楽です。ただ、Gatsby.js自体のアップデートや、npmパッケージのアップデート等を考えると、ワードプレスのほうが管理が楽だったかも…と思い始めています。
ということで、上記のように動的サイトと静的サイトは各々メリットとデメリットがあるので、技術選定の際には参考にしてください。
シェアする
