今更な話ですが、主にバックエンドの仕事をしてきたエンジニアとしては(特に、Springが全てを占拠してしまったJavaがメインな立場からは)、昨今のフロントエンドの世界を見ていると、一瞬よそ見しただけでもすぐに時代遅れな人間になってしまうような気になります。それだけさまざまなライブラリ、フレームワーク、設計思想、プラットフォームが現れ消えていくので、これからどれを学んでおくべきかわからなくなります。
例えばアプリの設計思想だと、SPA1がトレンドになっているものの、WASMの登場でPWA2も登場し始めています。JavaScriptのフレームワークでは、「Virtual DOMを使用するので早い」という、Angular・React・Vue.jsが今の通称「3強」となっていますが、「DOMを直接更新するから早い」というSvelteもあります。Node.jsは失敗したというDenoが登場しているし、今のTypeScriptの位置を目指したが失敗したと思われたDartは、FlutterやFuchsiaで再起できているようにも見えますね。
このように、フロントエンド系は新しい概念と技術の氾濫で混乱な状況ですが、面白くも、トレンドと逆行するような形のWebアプリ、いや、Webサイトの構築に関する概念もそれなりの割合を示しているように見えます。本日のポストのテーマである、「静的ウェブページ」です。
静的ウェブページ(Static Web Page)とは
「静的」であるということは、「動的」と区分される特徴があるということでしょう。ここでいう動的か静的かというのは、入力によって何かの処理が行われるか、もしくは常にサーバに保存されたデータをそのまま返すかががもっとも重要な基準となっているようです。例えばWikipediaでは以下のように定義しています。
A static web page (sometimes called a flat page or a stationary page) is a web page that is delivered to the user’s web browser exactly as stored, in contrast to dynamic web pages which are generated by a web application.
言い方を変えると、サイトが「アプリケーション」として作られたものならば動的、もしくはただの固定されたデータを表示するための「ページ」であるなら静的といえますね。
なぜ今更？
サーバに保存されたデータをそのまま返すという概念は、 Webアプリケーションが登場する前から存在していました。当時のウェブサイトはhtmlとcss、イメージなどのリソースをFTPなどでサーバにアップロードしてホスティングを行っていたのですが、これは今の静的ウェブページにとっても同じ方式です。
つまり、概念だけを見ると静的ウェブページは昔に流行っていた「ホームページ」や「ブログ」などに近いものです。時代に逆行するような、静的ウェブページが今更注目されるのは、なぜか。
当たり前ながら、当時とは違って、JavaScriptの発展によりサーバに依存しなくても簡単な処理はブラウザでできるようにもなり、適切なAPIがあればバックエンドを実装する必要がなくなるのもあり、AWS LambdaやAzure Functionsのようなサービスによりサーバレスができる環境ができるなど、バックエンドよりはフロントエンドの目的によって選択できる方法が多くなったという点があるでしょう。
そして、もっとも根本的な、サイトの目的がありますね。ブログ、ポートフォリオ、イベント案内などそもそも「大した処理が必要ない」サイトに関しては、静的にしたほうがリソース使用、費用、パフォーマンス、セキュリティという面で動的ウェブページより有利です。例えば今このブログみたいにですね。
最近はMarkdownなどで文書を書くと、それを元に静的ウェブページを作成してくれるツールもたくさんあり、そのようなツールで生成したデータを載せるだけでホスティングする方法も多いです。自分でソースを管理できて、簡単にホスティングできるのである意味ではもっとも静的ウェブページを作り安い時代となったとも言えますね。
静的ウェブページを作られるツール
多くの場合、静的ウェブサイトの生成ツールの使用は難しくありません。ベースになっている言語の実行環境を構築して、テンプレートをダウンロードして適用するか、作っていくかなのですが、ツールを実行するための環境の構築はツールのホームページの手順通りでよく、テンプレートも人の作っておいたものを持ってきて少し修正するくらいです。簡単な修正なら、HTML、CSS、JSON、YAMLくらいのファイルをいじるだけなので(プロパティファイルで色々なオプションを選択できる例もあります)、難しくありません。あとはMarkdownなどで記事を書いていくだけですね。
ただ、自分の経験からだと、既製のテンプレートを大きく変えるか、最初から作り直す場合は自分が触ることのできる言語をベースにしておいた方が良いということですね。例えばこのブログはJekyllで作られていて、テンプレートも一部修正していますが、そもそも私はRubyに慣れてないので根本的な部分を修正してはいないところです。
Jekyll以外には、Nodejs基盤のツールが多いようです。例えばMetalsmithや、Hexoのような物があって、React基盤のGatsby、Vue.js基盤のVuePressもあります。JavaScriptとそのフレームワークの使用に慣れているなら、こちらがいいかもしれませんね。他には、Go言語基盤のHugoもありますので、Goに慣れている方ならこちらを選択することもありですね。
静的ウェブページを載せられるプラットフォーム
ツールを使って、静的サイトを作ったら、次はホスティングが必要となりますね。静的ウェブページのホスティングの場合、このブログでも使用しているGitHub Pagesやnetlifyのようなサービスがあり、データをGitなどでアップロードすると自動でビルドとデプロイが完了される便利さがあります。
他にはクラウドを利用する方法があります。AWSやAzure、Google Cloud Platformのようなクラウドサービスには、S3やBlobのようにウェブからアクセスできるストレージサービスが必ずありますが、このストレージにツールで作成した静的サイトをアップロードしてホスティングする方法もあります。特にGoogleのサービスの場合、Google Firebaseというアプリ開発に特化したプラットフォームもあるのでAPIとの連携が必要な場合は考慮できる候補ではないかと思います。
最後に
ここでは単にツールとプラットフォームを紹介(というより、言及)しただけですが、静的ウェブページでできることや活用できるものは、他にも多いようです。同じ静的ウェブページだとしても、どのような技術の組み合わせでどのような物が作り上げられるかがかなり変わってくるのですが、実際にどんな物ができるかはJAMstackのExamplesタブから色々発見できますので、参考にしてみてください。
個人的にはGatsbyに興味があって、Reactの勉強のついでに、いつかポートフォリオのためのサイトをそれで作り上げてみようかなと思っています。Oracleクラウドだと無料のVMやDBも提供されるので、簡単なAPIを作成しておくのも可能になるかもしれませんね。いや、いい時代になったものです。皆さんもぜひ、静的ウェブページで自分だけのサイトを築き上げてみてください。