対象読者
- これまでのWebシステムの進化や成長についてを知りたい方
- 今のWebシステムと昔のWebシステムの違いを知りたい方
- 人材や背景に応じたシステム設計を行いたいと思っている方
HTML5の前後の特徴
「Webシステムの開発」と言ってもあまりにも漠然としています。Webシステムの開発の形態は、下図のように2010年頃のHTML5の誕生とともに大きく変わったと筆者は考えています。

HTML5以前のWebシステムはサーバに機能が集まる形が中心でした。そして、HTMLおよびJavaScript・CSSというWebコンテンツとして配信することが、サーバ側の中心的な役割です。
つまり、サーバサイドの開発者にとっては、HTMLのWebコンテンツを作成することがWebシステムの開発ゴールだったわけです。
一方、HTML5以降ではブラウザを動作環境として機能し、ブラウザもしくは利用者の端末側に機能が搭載される流れができました。スマートフォンではWebView上で動作するアプリなども広まり、HTML5は単に配信するコンテンツではなく、動作環境や開発プラットフォームといった位置付けになりました。
こうした流れは、専門性を持った「フロントエンドエンジニア」が生まれるきっかけにもなりました。Webシステムはサーバサイド中心からフロントエンドへと移行していきます。
実際には、図1のようにHTML5を境界線にきれいに分離されるわけではありません。今でもサーバサイドでしかできないことはたくさんあります。ただし、本稿では説明をわかりやすくするため、便宜上「HTML5を生成することを主な目的とするサーバサイド技術」と「HTML5もしくはそれに準拠した動作環境上での開発するクライアント技術」といった分け方で説明していきます。HTML5が生まれる前と生まれた後という時間軸の意味ではないことに注意してください。
業務Webシステムは10年前にゴールを迎えた!?
前回、あくまで著者の感覚として「同じ機能をもつWebシステムを作った場合に、昔に比べて逆に工数が増えているように感じることがある」と述べました。
同様の意見は、業務系システムやBtoB向けサービスなど、システムの決裁権を持つ経営者や事業部長の方からも聞くことがあります。システムの細かい違いやトレンドなどに詳しくない方からすれば、同じようなシステムを発注しても、納期が遅くなった、もしくは価格が上がったと感じているのでしょう。
筆者はその原因を、HTML5以前のサーバサイドを中心とした作り方に比べ、HTML5以降の作り方では「効率」が落ちたからだと考えています。もちろん、10年前のWebシステムと、現在のWebシステムでは求められる機能や役割も変わってきているので、単純には比較できません。「効率が落ちた」と言われれば反論もあると思いますが、ここで言いたいことはサーバサイド技術は「効率」を求めて進化し、フロントエンド技術は「多様化」を求めて進化しているということです。特にこの影響は効率を求める「業務WEBシステム」ではより顕著に生じていると感じています。
そこで、ここではあえて「サーバサイド技術で実現できるWebシステムを、フロントエンド技術を中心に作った場合」の課題について考えたいと思います。
先ほどの図1で示したようにサーバサイド技術から見たHTML5は出力フォーマットの標準化です。つまり、IEやChrome、Windows、Mac、Androidなど、多様な出力調整が必要だった時代と比べ、明らかに簡略化されています。同時に、関連する技術も標準化していき、開発技術も多機能、多様性よりも最適化や効率化に向かった成長をしました。
そして、10年ほど前には効率化が十分なレベルに達しました。つまり、10年前に実現可能な開発するのであれば、現在においてもその当時の技術を使った方が効率がよいはずです。
こうした理由から「業務Webシステムは10年前にゴールを迎えた」という表現にも納得する部分があると思います。こういった「効率化」がなぜ、フロントエンド技術には継承されていないのかと疑問に思う方もいるはずです。そこで、続いてはサーバサイド技術の強みやその理由について紹介します。