ウェブ制作技術の歴史を振り返る
ウェブサイトを作るとなると、必ずと言っていいほど話題に上がるのが「wordpress」です。
ですが私はwordpressをほとんど使うことはありません。
現在はJamstackでの構築をメインとしており、フロントエンドにAstro、ホスティングにはVercelかVloudflareを採用しています。
WordpressとJAMstackの違いや、どう優れているかの説明って結構難しいんですよね。
頑張って良さが伝わるように説明するんですけど、めちゃ専門的な話なので。
しかしまぁ考えてみると新しい技術の方が優れてるに決まってるよなぁと思いまして、今一度ウェブ制作の技術に関する歴史を振り返ろうと思った次第でございます。
技術が発展する過程で、その時の課題をより良く改善しようとして新しい技術が開発される。
だから新しい技術は古い技術の課題が克服された、よりベターなもののはずです(実際はケースバイケースですが）
どういう経緯でどんな技術が発展したのか、chatGPT先生に聞きながら振り返ってみましょう。
「 ウェブ制作に関する技術がどうやって発展してきたかの歴史を教えて。」
HTMLの誕生（1990年代初頭）
World Wide Webの発明者であるティム・バーナーズ＝リーによって、HTML（HyperText Markup Language）が提案されました。HTMLは、ウェブページの構造や要素をマークアップするための基本的な言語であり、ウェブ制作の基盤となりました。
ティム・バーナーズ＝リーはイギリス出身で、様々な企業を転々としていますが、1989年にWorld Wide Webの元となる、CERN（欧州原子核研究機構）内の情報にアクセスするためのグローバルハイパーテキストプロジェクトの提案を公式に行います。
その後1990年にNEXTSTEP上で世界初のWebサーバであるhttpdと世界初のウェブブラウザ・HTMLエディタであるWorldWideWebを構築します。そして1990年12月20日、世界最初のウェブサイト http://info.cern.ch/ を公開します。
CERNといえばあれですよね、シュタインズゲートですよね（古い？）
CSSの登場（1996年）
CSS（Cascading Style Sheets）は、ウェブページのデザインやスタイルを制御するための言語です。CSSの登場により、ウェブページの外観を独立して管理することができるようになり、デザインの柔軟性が向上しました。
SassやSCSSといったCSSをより便利に書くための言語も出現しましたが、個人的には最近のCSSは頑張っているなと思います。
というか新しいCSSに追いつくのが大変です。
ブラウザの違いによる挙動の違いはこの時代よりマシなんでしょうけど、IEがお亡くなりになった今、safariがどうにかなりませんかねぇ…。
動的なウェブページ（1990年代後半〜2000年代初頭）
サーバーサイドスクリプト言語（例：PHP、ASP）やデータベース（例：MySQL）の登場により、ウェブページの動的な生成やデータベースとの連携が可能となりました。これにより、ユーザーの要求やデータの変更に応じて動的なコンテンツを提供することができるようになりました。
いわゆるLAMPstackでしょうか。
この流れを受けて2003年に誕生したのがWordpressです。
Wordpressってもう誕生して20年になるんですね。
テーマとプラグインというWordpressエコシステムの発展、WordPress.comによりユーザーはWordPressのインストールやサーバーの管理に悩まずに、簡単にウェブサイトやブログを作成できるようになりました。
偉大なるWordpress、万歳。
JavaScriptの台頭（2000年代中盤〜後半）
JavaScriptの進化により、クライアントサイドでの動的なウェブページの作成やインタラクティブな要素の追加が容易になりました。Ajax（Asynchronous JavaScript and XML）の登場により、非同期通信を利用してウェブページの一部を更新することが可能となり、ユーザーエクスペリエンスが向上しました。
AjaxによりGmailやgoogle mapといった、ページ遷移をせずとも情報を更新できるサービスが誕生しました。
当時のエンジニアがビビりまくったという記事をどこかでみたような…。
google mapが存在しない時代にはもう戻れないですよね。
確実に迷子になります。
個人的には行きたい秘湯マップをgoogle mapで登録してるので消えたら死にたくなると思います。
モダンなフロントエンド開発（2010年代後半〜現在）
フロントエンド開発において、JavaScriptフレームワークやライブラリ（例：React、Vue、Angular）の登場により、クライアントサイドでのアプリケーションの構築が大幅に向上しました。これにより、SPA（Single-Page Application）やPWA（Progressive Web App）などの対話型で高機能なウェブアプリケーションの開発が可能となりました。
先ほどのAjaxは非同期通信のための技術なのですが、それを利用して1枚のページで非同期に通信をしながらページの内容を書き換えるアーキテクチャがSPAです。
それこそgoogle mapを想像していただければ分かりやすいと思います。
chatGPT先生は触れませんでしたが、jsフレームワークが誕生するきっかけとなる偉大なる存在がNode.jsです。
Node.jsのおかげでjs戦国時代に突入したのが現代と言っても過言ではないでしょう（多分）。
JAMstackの台頭（2010年代後半〜現在）
JAMstackのアプローチは、ウェブサイトのパフォーマンス、セキュリティ、開発効率の向上を提供するとして注目を集めています。JAMstackでは、静的サイトジェネレータやAPIを活用し、ウェブサイトのコンテンツを事前に生成して配信する手法が採用されています。
VueやReactといったjsフレームワークが発展した結果、静的なウェブサイトが作りたい派の人たちから「js重いやん」となりました
動的な部分が必要なアプリなら仕方ないんですけど、静的なサイトだとここまで必要ないよねと。
そこで生まれたのが、いわゆる静的サイトジェネレーター(Static Site Generator)です。
VueやReactといったフレームワークはHTMLとは別で結構重めなjsをダウンロード、レンダリングという流れでWebページを表示します。
ですがそれだと初期ロードが重いし、事前にレンダリングしてHTMLにしとけばいいじゃん、ってなったのがSSG達です。
SSGはセキュリティ面も優れており、Wordpressなどと違い直接バックエンドやDBにアクセスすることがありません。
必要な情報は別のマイクロサービスを使い、API経由で事前に取得、ビルドします。
そのため構造的にWordpress（というかSSR）よりセキュリティに強いと言われています。
また、SSGが出てきたおかげで発展してきたのが静的ホスティングサービスです。
VercelやCloudflareはウェブサイトの公開や高速化などを勝手に、しかも安価でやってくれます。
まとめ
個人的にはほんと選択肢増えてきたなと思っておりまして、今メインで使っているAstroは部分的にVueやReactを使えますし、SSRモードにすればVercelやCloudflareでSSRさせることもできます（どのくらいのスペックなのかは不明ですが）。
逆にコードが書けない人もノーコード系が発展してきたことによって、様々な選択肢が増えています。
ウェブアプリもノーコードで作れる時代ですしね。
いったい今後どうなっていくのか、楽しみ半分、不安半分です。
この記事が気に入ったらサポートをしてみませんか？