コラム

Webは90年代後半くらいから利用されており、年々トレンドが変化してきました。ここ数年のトレンド変化は特に大きく、新しい技術が日夜登場しています。

本記事では、00年くらいからを目安にフロントエンド技術がどう変化してきたのかを振り返ります。

CGIの時代

00年以前では、サーバーサイドで何かプログラムを動かす場合にはCGIが使われてきました。言語としてはPerlまたはCが多かったでしょう。まだ当時はPHP3くらいで、データベースも企業が提供するサービスくらいでしか使われていませんでした。CGIの用途としては掲示板、アクセスカウンター、Webチャットなどが多かったかと思います。

この時期にはHTMLをサーバーサイドで生成して出力するのが当たり前でした。JavaScriptは実行速度やセキュリティ上の問題で、オフにしている方も多かったでしょう。ウィンドウを無限に開く悪質なスクリプトやマルウェアダウンロードがあったり、IEとFirefox間のJavaScript動作の違いで、あまり普及していませんでした。JavaアプレットやActiveXもありましたが、主な利用用途はアニメーションなどでした。

Ajaxの時代

JavaScriptの転機になったのがAjaxの登場（認知？）です。GmailやGoogleマップでJavaScriptがインタラクティブに活用され、画面を書き換えずにWebサイトを使い続けられる仕組みに注目が集まりました。

この時期はWeb2.0と呼ばれて数多くのWeb APIが登場し、Webアプリケーションの可能性が一気に広まったように思います。また、jQueryの登場（2006年）によってAjaxやJSONPが容易に使えるようになったのも大きかったでしょう。Ruby on Railsはサーバーサイドで生成したHTMLを返却して画面を書き換える仕組みを提供し、JavaScriptをほぼ書かずにAjaxを実現できる点も画期的でした。

Firebugの登場

JavaScriptがWebアプリケーション開発の中で活用される中で問題になったのがデバッグ方法です。そんな中、Firefox向けにリリースされたFirefoxアドオンがFirebugです。コンソールでJavaScriptを実行できたり、アプリケーション実行中に発生したエラーを表示でき、開発が大幅に効率化したのではないでしょうか。

現在ではすべてのWebブラウザにおいて開発者ツールを提供するのが当たり前になっていますが、その先駆者はFirebugだったと記憶しています。Firebugの登場によって、Firefoxのシェアは一気に拡大したと思いますが、企業内ではIEのシェアがまだまだ高く、Firefoxで開発した後でIE向けにデバッグするという作業が行われていました。

モバイルの時代

日本ではガラケーが長く隆盛だったこともあり、PC向けとガラケーで画面の出し分けが求められていました。ガラケー向けのHTMLは独特だったため、サーバーサイドでユーザーエージェント判定をして出力を分けたり、URLパラメータによって判別していました。

iPhoneの登場（2007年）により、PCからスマートフォンに一気にトレンドがシフトしました。HTML5が登場し（2008年）、スマートフォン向けの機能（Media Queryなど）も一気に追加されたり、位置情報APIなども追加されました。これらの登場によって、JavaScriptがより重要になったり、HTML APIが一気に拡充された感があります。

一番不遇だったのはFlashでしょう。元々HTMLで足りない機能をFlashで補完したり、アニメーションなどを実現していましたが、iPhoneがFlashをサポートしなかったことで、一気に廃れてしまいました。

SPA

SPAはSingle Page Applicationの略で、初期レンダリングを行ったHTML/JavaScript/CSSに対して、ユーザーのアクション後はJavaScriptでサーバーと通信して画面の差分情報だけを受け取る手法です。画面を再レンダリングする必要がないので、ユーザー体験は非常に良くなります。

SPAでは検索エンジンにインデックスされづらいといった課題やOGPが変更できないと言った課題もあります。こうした問題はここ数年のフロントエンドフレームワークによって解決されています。

Google Chromeの登場

Google Chromeの初版は2008年です。それまでIEとFirefoxによるブラウザシェア争いが行われている中で、一気にシェアを伸ばしました。元々Safariと同じWebKitベースでしたが、フォークしたBlinkへと変わっています。先進的なAPIを取り込み、かつ表示が高速であるというのが売りでした。

Google Chromeはエンジン部分をChromiumとしてオープンソース化し、現在ではOperaやEdgeなどのWebブラウザでも利用されています。その結果、HTML APIの互換性は非常に高くなっており、Webブラウザごとの挙動誤差やCSSのベンダープレフィックスもずいぶん減ってきたのではないでしょうか。

Node.jsのリリース

Google Chromeが登場した後、そのJavaScript実行エンジンを使ったNode.jsがリリースされました。元々Webブラウザでしか使われなかったJavaScriptが、サーバーサイドやクライアントサイドでも使われるようになるきっかけを作りました。WindowsではJScriptという仕組みもありましたが、Windows依存であるためあまり広く普及していたようには感じません。

Node.jsはnpmというパッケージ管理を使うことで、コミュニティベースで一気にエコシステムが構築されました。元々Webブラウザ向けにはBowerというパッケージ管理が開発されていましたが、今はnpmのものを使う方が増えています。その際にも、以前はBrowserifyが使われていました。現在はWebpackや、それ以前のBabelなどのビルドシステムの中に組み込まれています。

Reactの登場

Reactは2013年に登場しました。この時に最も画期的だったのは仮想DOMという考え方でした。Webアプリケーションは世の中に増えていたものの、DOMの中に状態を出力しておいて、それを再取得して管理するのが一般的に行われていました。そのため状態管理が煩雑化して、Webアプリケーションが複雑になるという問題が起こっていました。

それを解決する仮想DOMの登場によって、Webアプリケーション開発手法が一気に変わってきました。大人数による大規模開発でも行えるようになり、テストも行いやすくなったのではないでしょうか。

この仮想DOMの流れはVueやPreactなどにも実装されており、逆にSvelteのように仮想DOMを使わないフレームワークも登場しています。

TypeScriptの登場

TypeScriptはMicrosoft社により開発されているJavaScriptスーパーセット言語です。JavaScriptはスクリプト言語ということもあり、型付けが行えません。そのため多人数での開発には向かない、長期的なメンテナンスが難しい言語と言われ続けてきました。TypeScriptはJavaScriptに静的型付けやオブジェクト指向を取り入れることで、より品質高い開発を実現します。

TypeScriptではNode.js向けのライブラリにはもちろん、ReactやVueなどでも取り入れられています。また、このTypeScriptを基本としたJavaScript実行環境としてDenoやBunなども開発されています。

サーバーサイドとのコード一本化

ReactやVueが普及するのに合わせて、サーバーサイドもクライアントサイドもJavaScript/Node.jsで開発したいというニーズが出始めました。それに応えるフレームワークとしてNext.jsやNuxt.jsがリリースされています。同じコードベースでクライアントサイド、サーバーサイドが書けることで、実行環境に依らない開発体験が実現できます。

サーバーサイドまでJavaScriptで行うようになると、生成したHTMLをサーバーサイドに保存して2回目以降のアクセスを高速化したい（SSR）などの需要も出てきます。他にもCSR（Client Side Rendering）やISR（Incremental Static Regeneration）といったワード（手法）も生まれています。

静的ホスティングサイト

Webアプリケーションが普及することで、静的なHTML/CSS/JavaScriptだけをホスティングするサイトが増えてきました。有名なところではNetlifyやVercelになるでしょう。こうしたサービスは旧来のサービスとは異なり、Gitリポジトリと連携することでDevOpsを実現し、修正からデプロイまでの流れを自動化できる点にメリットがあります。

NetlifyはJamstackと呼ばれる技術ワードを生み出し、VercelはNext.jsというReactベースのフレームワークを開発しています。他にも、Cloudflare PagesではVercelのようにNext.jsのSSRができるようになっています。そうした技術トレンドの変化に合わせて、各社が新しいチャレンジを日々行っています。

FaaS

静的ホスティングサイトは元々静的なファイルを公開するだけでしたが、サーバーサイドで動作するコードが求められるようになりました。その中で使われているのがFaaS（Function as a Service）になります。Netlify functions、Vercel Serverless Functions、Cloud Functions for Firebase、Cloudflare Pages Functionsなどがあります。いずれも各静的ホスティングサイトでしか使えないサーバーサイドスクリプトになります。

この手のスクリプトはごく短時間の実行を想定しています。その代わり、スケーリングを気にせずに実行できます。問い合わせフォームでメールを送信したり、認証キーが必要な外部APIを実行したりするのに使われています。このFaaSによって、静的ホスティングサイトが動的な機能を持ち、その可能性が飛躍的に向上したと言えるでしょう。

まとめ

フロントエンドに関係する技術はここ数年で一気に増えており、挙げればきりがないくらいです。また、それらの技術もトレンド変化があり、来年には廃れてしまっているものもあるでしょう。常にトレンドを追い続けるのは大変です。

しかし、大きな流れの中でサーバサイドとフロントエンドが大きく揺れ動いているのは間違いありません。数年前まであったフロントエンドとバックエンドを完全に分離する動きが、最近では融合し始めています。それらはフロントエンドエンジニアが対応する技術領域になるので、覚えるべき技術が増えていると言えるでしょう。

Hexabaseではフロントエンドの開発だけに集中できるBaaS（Backend as a Service）を提供することで、皆さんの開発工数軽減に貢献します。こうしたバックエンドサービスの利用も現在のトレンドです、ぜひお試しください。