静的vs動的ウェブサイト：包括的な比較 – techsyncer

多くの人がウェブサイトを考える際、静的なウェブサイトと動的なウェブサイトという概念は頭に浮かばないでしょう。結局、ウェブサイトはただ表示されるだけですよね？技術的にはそうですが、裏側ではたくさんのことが行われています。

ウェブサイトを作成または移行する予定の方にとって、これら2つのウェブサイトのタイプを知ることは重要です。選択するサイトの種類によって、開発者がサイトの管理と更新、および運用および保守コストをどのように管理するかが影響を与えます。

この記事では、静的なウェブサイトと動的なウェブサイトの違いについて学びます。開発者が静的なサイトと動的なサイトを作成する方法、ブラウザがそれらをどのようにレンダリングするか、その他多くの有用な比較を見ることができます。

静的なウェブサイトと動的なウェブサイトとは何ですか？

その名前からもわかるように、静的なウェブサイトの要素は固定されています。静的なウェブサイトのコンテンツは、使用しているブラウザに関係なく常に変わりません。

A static website only serves HTML, CSS, and Javascript client-side code. It doesn’t have to process any kind of computations once a reader accesses the page. The browser handles any code for dynamic content such as buttons or input.

ほとんどの静的なウェブサイトは情報提供を目的としています。たとえば、個人のブログでは、読者に情報を表示することが意図されています。個人のブログでは、ユーザーは通常、サイトのコンテンツを閲覧するだけです。

逆に、ダイナミックなウェブサイトはクライアントサイドのコードを超えます。最終的に、ダイナミックなウェブサイトは、静的なウェブサイトと同様に、HTMLとCSSに基づいています。しかし、ダイナミックなウェブサイトが機能するためには、PHP、ASP.net、またはJavaScriptなどのサーバーサイドの言語が必要です。これらの言語は、HTMLコードを動的に生成するために使用されます。

ダイナミックなウェブサイトでは、CRUDという用語が使われます。これは、作成、読み取り、更新、削除の操作を表します。CRUDはデータベースに対して行われる操作を表しています。そして、ダイナミックなウェブサイトがデータベースを使用すると推測したなら、正解です！

ウェブサイトの表示の違い

ウェブサーバーは、静的なウェブサイトとダイナミックなウェブサイトをどのようにユーザーのブラウザに配信するのでしょうか？

静的なウェブサイトは、ウェブサーバー上のコードをまったくそのまま配信します。

静的なウェブサイトには、ハードコードされたHTMLドキュメントとオプションのCSSおよびJSファイルが含まれます。 ウェブサーバーにアップロードしたコードが、ユーザーがウェブサイトを閲覧する際に提供されるコードになります。

たとえば、以下は3つのファイルを含むVisual Studio Codeのサンプル静的ウェブサイトプロジェクトです。この静的ウェブサイトのホームページでは、ヘッダーとボタンのみが表示されます。

このシンプルなウェブページでボタンをクリックすると、単語が表示されます。

Static Website Project in Visual Studio Code

以下はindex.htmlファイルのコードです。これは静的ウェブサイトのホームページとして機能します。

<!-- index.html -->
<html>
    <head>
        <title>Static Site Test</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>Static Web Test</h1>
        <div>
            <button>Click to see what happens</button>
        </div>
        <p style="display: none;">Surpise!!!</p>
        <script src="button.js"></script>
    </body>
</html>

次のコードは、style.cssのためのコードです。このCSSファイルは、ホームページの要素がブラウザでどのように表示されるかのスタイルを定義します。

/* style.css */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
button {
    background: lightgrey;
    color: black;
    border: 1px solid darkgray;
    font: inherit
}

最後に、button.jsのコードがあります。これは、ボタンをクリックしたときにブラウザがトリガーするJavaScriptのコードです。

// button.js
var btn = document.querySelector('button')
btn.addEventListener('click', function() {
    document.querySelector('p').style.display = 'block'
})

静的ウェブサイトが稼働していると仮定すると、以下のデモはその見た目です。そして、ページのソースコードを開くと、ページのコードがindex.htmlファイルのソースコードとまったく同じであることがわかります。

注意：この静的ウェブサイトの例は、Visual Studio CodeのHTTP Server / HTML Preview拡張機能を使用してテストされています。

上記のデモからわかるように、ユーザーがボタンをクリックしても、基礎となるコードは変わりません。これが静的ウェブサイトの動作です。ブラウザがすべてを処理します。

動的ウェブサイトはデータベースを最初に読み込みます

静的ウェブサイトとは異なり、動的ウェブサイトはサーバーサイドの処理を使用してコードを生成します。これは、デザインに応じて基礎となるコードがいつでも変更される可能性があることを意味します。

たとえば、以下はNode.jsの動的ウェブサイトプロジェクトで、JavaScriptファイルが1つだけ含まれています。

Dynamic Website Project in Visual Studio Code

dynamicsite.jsのコードは、サーバーサイドのスクリプトであり、ページが読み込まれるたびに現在のコンピュータの時間を表示します。

// dynamicsite.js
var web = require('http');

web.createServer(function (req, res) {
    let xTime = new Date().toISOString().match(/(\d{2}:){2}\d{2}/)[0]
    res.end(
        '<h1 style="font-family:verdana">Dynamic Site Test</h1>' +
        '<p style="font-family:verdana">The time now is: <b>' + xTime + '</b></p>'
    );
}).listen(8080);

以下のデモでは、動的ウェブサイトがどのように表示されるかを示しています。ページをリフレッシュするたびに、基礎となるHTMLコードが変わります。

注意：この動的ウェブサイトの例はNode.jsを使用してテストされています。

これが、動的ウェブサイトの基本的な動作例です。

静的ウェブサイトと動的ウェブサイト：コンテンツの管理方法は？

さて、静的ウェブサイトと動的ウェブサイトがどのように表示され、提供されるかをご理解いただけました。では、コンテンツの追加、更新、削除はどのように行いますか？静的な個人ブログウェブサイトに新しい投稿を追加するにはどうすればよいでしょうか？動的なeコマースサイトにカタログに新しい商品を追加するにはどうすればよいでしょうか？

ウェブサイトのタイプによって、ウェブサイトのコンテンツを管理する方法が異なります。以下は、コンテンツ管理の典型的なオプションです。

静的ページのハードコーディング

ウェブサイトまたはそのコンテンツを更新する場合、ほとんどの場合、コードの変更が必要です。基本的でおそらく最も古い方法は、ハードコーディングです。この方法では、テキストエディタを使用してサイトのソースコードを編集します。

この方法は、ウェブサイトのあらゆる要素を手動でコーディングする必要があるため、最も手間がかかります。しかし、これにより、静的ウェブサイトはデザインの柔軟性があります。なぜなら、すべてのページを異なるものにすることができるからです。

デザインと機能がシンプルなウェブサイトでは、コンテンツをMarkdownで書き、それらのMarkdownドキュメントをHTMLに変換して、ウェブページを生成し、ウェブサーバーにアップロードすることができます。

たとえば、以下の静的ウェブサイトは、index.html、page1.html、およびpage2.htmlの3つのページで構成されています。これらのファイルは、1つの静的ウェブサイトの一部ですが、異なるデザインやテーマになるように書かれました。

Example of a static website with different page themes

静的ウェブサイトジェネレータ

コードを手動で書く代わりに、静的ウェブサイトジェネレータは、ゼロからまたはボイラープレートテンプレートから完全な静的ウェブサイトを作成することができます。新しい投稿やページは通常、Markdownで書かれ、ウェブサイトのビルドプロセス中にHTMLファイルが生成されます。

生成されたファイルは、ウェブサーバーにアップロードされ、ウェブサイトを公開することができます。一部の静的ウェブサイトジェネレータでは、HTMLやJSONなどの他の形式でコンテンツを書くことも可能です。

以下は、探索できるいくつかの人気のある静的ウェブサイトジェネレータのリストです。

以下のサンプルウェブサイトは、Jekyllを使用してコードを一行も入力せずに生成されました。

コンテンツ管理システム（CMS）

ご存知の通り、WordPressについては聞いたことがあるはずです。では、Drupal、Joomla、Netlifyはどうでしょうか？これらは最も人気のあるコンテンツ管理システムまたはCMSの名前です。

A CMS is a tool used for creating content on a website without having to write a single line of code. Think of it as the GUI editor where you can create your content without understaning the underlying code.

動的ウェブサイトは通常、CMSに接続します。実際、ウェブホスティングパッケージを購入すると、ウェブサイトビルダーやCMSが含まれており、マウスのクリック（または数回のクリック）で展開できます。CMSが動的ウェブサイトが人気の選択肢である理由かもしれません。

静的ウェブサイトは、CMSを使用するように設定することもできます。例えば、NetlifyはJekyll、Hugo、NextJSなどの静的サイトジェネレーターとの統合サポートを提供しています。ただし、これらのプラットフォームとのCMS統合を設定するには、通常、動的ウェブサイトと比較してさらに作業が必要です。

静的ウェブサイトと動的ウェブサイトの利用時期

「どちらがより優れているのか？」という古くからの質問がいつ解答されるのかを知りたい場合、待ち続けるしかありません。明確な勝者はおそらく存在しません。動的ウェブサイトと静的ウェブサイトのどちらが優れているかは、要件によって異なります。

ウェブサイトのタイプを選ぶ際に考慮すべき要素はたくさんあります。以下は考慮すべき要素の一部です。

Factor	Static Website	Dynamic Website
Cost	Static sites are typically cheaper to host. They can even be hosted for free using GitHub Pages.	Because of the expected extra processing requirement, dynamic websites may need a more capable hosts. Higher host specs usually means higher cost.
Content Management	To update content, coding skills will be required to write HTML or Markdown (and other languages). There are established and emerging headless CMS options that support static websites.	Established and popular content management systems already exists such as WordPress, Drupal, and Joomla. Updating content may never need a developer’s involvement. Users would be able to manage content on their own. This could translate to development or maintenance cost savings in the long run.
Extensibility	Add-ins may not be available to static websites. But, third party services may be integrated into a static website. Some examples are Disqus and MailChimp.	There are tools and add-ins that can extend the functionality and optimization of dynamic websites.
Security	Securing a static website can be more complex due to JavaScript running on the browser and can be exploited. This is not to say that static websites cannot be secured. It’s just that developers need to be more creative for security.	Dynamic website security may be easier to achieve as there are already best practices, libraries and tools that are included in server-side languages.
Complexity	Knowing HTML, CSS and JavaScript are the basic coding skills for static website development. Other languages may be needed only if you use static site generators.	Typically requires more web development skills and knowledge of more programming languages.
Backup/Recovery	Only files are being backed up. If the website crashes, files can be restored to recover a static website.	There may be a need for more complex backup. In addition to backing up the website, there may be databases that need to be backed up as well.
	Static vs Dynamic Website

結論

すでにウェブサイトを所有している場合、静的ウェブサイトか動的ウェブサイトかは既にわかっているはずです。そうでない場合は、この記事でこれらの2つのタイプを区別する方法を学ぶことができます。

A static website does not mean that what you see on the page does not change at all. It only means that the content or underlying code is pre-built and never changes. Each time a reader views a page from a static website, the same code is served over and code.

A dynamic website does not mean that no homepage or HTML code is being served. Instead, the server generates the HTML page dynamically. Each request to the dynamic website may yield different content, and the HTML code behind the page typically changes.

新しいウェブサイトを作成する予定の場合、その目的によって選択肢が大きく異なります。例えば、電子商取引や採用のウェブサイトは動的な方が向いています。一方、ブログやポートフォリオのウェブサイトは静的なウェブサイトで十分です。

静的ウェブサイトはすべての始まりであり、おそらく永遠に存在し続けるでしょう。特に最近では静的サイトジェネレーターの人気が高まっています。動的ウェブサイトは、さらなる開発が継続的に行われることでさらに向上するでしょう。

さらなる読み物

静的ウェブサイトと動的ウェブサイトについてもっと学びたい場合は、他のATAの投稿もチェックしてみてください。

Azure Static Website を Cloudflare がバックアップするようにホストする方法