静的ウェブページ

静的ウェブページ（せいてきウェブページ、英語: static web page、flat page、stationary page）とは、ユーザーのブラウザにサーバー上に保存されたデータをそのまま変更せずに配信するタイプのウェブページのことである^[1]。ウェブアプリケーションにより配信時に生成される動的ウェブページと対比される^[2]。

その結果、静的ウェブページでは、Webサーバーで設定されていた場合にはcontent-typeや言語のコンテンツ・ネゴシエーション（英語版）する機能を利用した上で、すべてのユーザーに対してすべてのコンテキストで同じ情報を表示する^[3]。

概要

.htmlで終わるURLは必ずしも静的ファイルとは限らないが、静的ウェブページでは、ほとんどの場合ファイルシステム上にファイルとして保存されたHTMLドキュメントである^[4]。しかし、広義の解釈では、データベースに保存されたウェブページや、テンプレートでフォーマットされアプリケーション・サーバーから配信されるページも静的ウェブページに含まれる。ただし、そのページが変更されずに、本質的には保存されたままのデータで配信される場合に限られる。

静的ウェブページは、コンテンツが変更されないか、変更されるとしてもまれな場合に適しているが、モダンなウェブテンプレートシステムはこの状況を変化させつつある。多数の静的ページを静的サイトジェネレーターのような自動化ツールなしで管理するのは現実的ではない。静的ページを管理するその他の方法としては、GatsbyJS（英語版）などのオンライン実行環境や、WordPressサイトを静的ウェブページに取り込むためにGitHubを利用できる可能性がある^[5]。個人設定やインタラクティブな機能はすべてクライアントサイドで実行しなければならないため、制限が存在する^[6]。

静的ウェブサイトの利点

動的ウェブサイトより高いセキュリティを提供する（動的ウェブサイトは、セキュリティホールが存在した場合にweb shell（英語版）攻撃のリスクが存在する）^[7]
動的ウェブサイトに比べてエンドユーザーに対するパフォーマンスが向上する^[8]
データベース管理システムやアプリケーションサーバなどのシステム上の依存関係が少なくなったり0になる^[9]
ホスト環境の代わりにクラウドストレージを使用することでコストが削減できる^[10]

静的ウェブサイトの欠点

動的な機能はクライアントサイドで実行する必要がある^[6]

脚注

^ Melendez, Steven (2018年8月10日). “The Difference Between Dynamic & Static Web Pages” (html). Chron. 2018年3月20日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “Static by definition means something that does not change. The first pages on the World Wide Web were largely static and unchanged, delivering the same information about a particular topic to anyone who visited. In some cases, sites may evolve slightly over time but are still largely static, meaning that they only change when manually changed by their creators, not on a regular and automated basis.”
^ “Definition of: dynamic Web page” (html). PC Magazine. 2017年1月17日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “A Web page that provides custom content for the user based on the results of a search or some other request.”
^ “Site statique ou dynamique” (html) [Static or dynamic site] (フランス語). morphenZero. 11 September 2016時点のオリジナルよりアーカイブ。27 July 2019閲覧。 “Ces pages peuvent présenter toute forme de contenu, animations flash, images, musique, vidéo etc... mais elles sont toujours présentées de la même façon.”
^ “What is a Static Web Page? - Definition from Techopedia” (英語). Techopedia.com 2018年11月4日閲覧。
^ Rascia, Tania (2019年3月14日). “The End of an Era: Migrating from WordPress to Gatsby” (html). 2019年3月21日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “However, I realized that an SSG like Gatsby utilizes the power of code/data splitting, pre-loading, pre-caching, image optimization, and all sorts of performance enhancements that would be difficult or impossible to do with straight HTML.”
^ ^a ^b Bouças, Eduardo (2015年5月20日). “An Introduction to Static Site Generators” (html). 2019年6月26日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “A dangerous solution: There’s an easy exit for whenever you’re faced with the challenge of dynamically updating content on a static site: “I can do it with JavaScript”. Doing processing on the client-side and appending the results to the page after it’s been served can be the right approach for some cases, but must not be seen as the magic solution that turns your static site into a full dynamic one.”
^ “Why use a static site generator? - Jekyll Tips” (英語). Jekyll Tips (2017年2月6日). 2017年2月17日閲覧。
^ “Why Static Website Generators Are The Next Big Thing – Smashing Magazine” (英語). Smashing Magazine. (2015年11月2日) 2017年2月17日閲覧。
^ Bouças, Eduardo (2015年5月20日). “An Introduction to Static Site Generators” (html). 2015年7月21日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “Less hassle with the server: Installing and maintaining the infrastructure required to run a dynamic site can be quite challenging, especially when multiple servers are involved or when something needs to be migrated. There’s packages, libraries, modules and frameworks with different versions and dependencies, there’s different web servers and database engines in different operating systems.”
^ Vincet, William (9 October 2018). “[https://wsvincen t.com/static-vs-dynamic-websites-pros-and-cons/ Static vs Dynamic Websites: Pros and Cons]”. 2019年12月11日閲覧。

外部リンク

The definitive listing of Static Site Generators, a community-curated list of static site generators.
Static Site Generators, Brian Rinaldi, (O'Reilly Media, 2018).

[Melendez,_SmallBussiness,_2018-1] Melendez, Steven (2018年8月10日). “The Difference Between Dynamic & Static Web Pages” (html). Chron. 2018年3月20日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “Static by definition means something that does not change. The first pages on the World Wide Web were largely static and unchanged, delivering the same information about a particular topic to anyone who visited. In some cases, sites may evolve slightly over time but are still largely static, meaning that they only change when manually changed by their creators, not on a regular and automated basis.”

[Encyclopedia,_PCMag,_2017-2] “Definition of: dynamic Web page” (html). PC Magazine. 2017年1月17日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “A Web page that provides custom content for the user based on the results of a search or some other request.”

[morphenZero,_2016-3] “Site statique ou dynamique” (html) [Static or dynamic site] (フランス語). morphenZero. 11 September 2016時点のオリジナルよりアーカイブ。27 July 2019閲覧。 “Ces pages peuvent présenter toute forme de contenu, animations flash, images, musique, vidéo etc... mais elles sont toujours présentées de la même façon.”

[Techopedia,_2018-4] “What is a Static Web Page? - Definition from Techopedia” (英語). Techopedia.com 2018年11月4日閲覧。

[Rascia,_2019-5] Rascia, Tania (2019年3月14日). “The End of an Era: Migrating from WordPress to Gatsby” (html). 2019年3月21日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “However, I realized that an SSG like Gatsby utilizes the power of code/data splitting, pre-loading, pre-caching, image optimization, and all sorts of performance enhancements that would be difficult or impossible to do with straight HTML.”

[javascript-6] Bouças, Eduardo (2015年5月20日). “An Introduction to Static Site Generators” (html). 2019年6月26日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “A dangerous solution: There’s an easy exit for whenever you’re faced with the challenge of dynamically updating content on a static site: “I can do it with JavaScript”. Doing processing on the client-side and appending the results to the page after it’s been served can be the right approach for some cases, but must not be seen as the magic solution that turns your static site into a full dynamic one.”

[CloudCannon,_2017-7] “Why use a static site generator? - Jekyll Tips” (英語). Jekyll Tips (2017年2月6日). 2017年2月17日閲覧。

[:0-8] “Why Static Website Generators Are The Next Big Thing – Smashing Magazine” (英語). Smashing Magazine. (2015年11月2日) 2017年2月17日閲覧。

[Bouças,_2019-9] Bouças, Eduardo (2015年5月20日). “An Introduction to Static Site Generators” (html). 2015年7月21日時点のオリジナルよりアーカイブ。2019年3月20日閲覧。 “Less hassle with the server: Installing and maintaining the infrastructure required to run a dynamic site can be quite challenging, especially when multiple servers are involved or when something needs to be migrated. There’s packages, libraries, modules and frameworks with different versions and dependencies, there’s different web servers and database engines in different operating systems.”

[Vince,_2018-10] Vincet, William (9 October 2018). “[https://wsvincen t.com/static-vs-dynamic-websites-pros-and-cons/ Static vs Dynamic Websites: Pros and Cons]”. 2019年12月11日閲覧。

[1]

[2]

[3]

[4]

[5]

[6]

[7]

[8]

[9]

[10]