本記事は、TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。

本セッションの登壇者

セッション動画

「2023年の Web 開発のベースライン」というタイトルで発表させていただきます。Web のエンジニアリングに関わって10年ほど経ちますが、フロントエンドが領域として成立して、多くの変遷を遂げる様を見てきました。それらを振り返りながら「今の Web 開発の現在地がどこなのか」みたいな話をできればと思います。

改めまして泉水と申します。株式会社ハウテレビジョンでプロダクト部門を担当しております。事業計画を引いたり、いろんなことをやっております。

今日のトークの目的としては、フロントエンド領域の変遷を整理して現在地を理解することと、Web 標準技術とブラウザ事情がどうなのかとか、トピックごとに切ってそれぞれの状況を確認すること、それらを踏まえて Web ページに向きあう我々開発者がどういうスキルマップを思考していければいいのか、みたいなお話をできればと思っております。

モダンブラウザの利用が定着、Interop や Open UI の取り組み

まず、Web 標準技術とブラウザというところですが、IE11 のサポートが終了したのがここ1年の一番大きなニュースだったと思っています。Chromium 一強という懸念はありますが、これによって IE11 のシェアは私が確認する限り 0.6% ほどに落ちていて、順調にモダンブラウザの利用が定着したと言っていいでしょう。

また、Interop というブラウザ間の Web 標準技術の相互運用性を改善する取り組みがあります。Interop 2023 の焦点は、Container Queries や Custom Properties の @property などですが、こうした便利な機能を Web 開発者が使えるように、ブラウザそのものの改善が進んでいます。

あとは、より現代のユースケースに即した UI インキュベーションを行う W3C の Open UI というグループによって、Web そのものの UI の拡張が始まっています。Web の黎明期に定義された Web そのもののコントロールというのが、あまり気の利いたものがないというか、現代のユースケースには即していないものが多くて、開発者としては UI の実装に苦労してきた部分がありました。HTML5.2 に含まれる <dialog> 要素などの実用的な UI も追加されてきましたが、Open UI によって更に試験的な UI が提案されつつあります。

たとえば、 要素はカスタマイズが難しい類のものですが、<selectmenu> というネイティブの HTML 要素によって、より柔軟に実装できるようになります。この仕様はまだ試験的です（注: <selectlist> にリネームされる見込み）。

これらが何を意味するかというと、Web 標準技術のボトムアップとトップラインの伸びです。IE11 のドロップも非常に大きかったですが、Interop によるモダンブラウザ間の相互運用性の改善も Web アプリケーション実装のベースラインを大きく前進させていますし、さっきの <selectmenu> 要素だけではなく、様々な先進的機能がプロダクトに導入されることで、トップラインも大きく伸びています。

Node.js が開発におけるビルドの一般化をもたらした

次に、エコシステムと開発者体験というところだと、非常に大きい存在が Node.js で、今やWeb 開発になくてはならない存在です。Deno や Bun といった JavaScript 実行環境、互換性のあるサービスやランタイムが登場してきて、それらの相互運用性を改善する WinterCG のような取り組みも組成されています。

Node.js がもたらしたのが、開発におけるビルドの一般化です。今や Babel や TypeScript だけではなく、さまざまなトランスパイルが一般化していますし、それに飽き足らずにより開発体験というところにフォーカスして、Node.js で実行するのではなく、Go や Rust で実装された esbuild や swc、 Biome などのツールチェインが登場しています。

これらが Web 開発に与えた影響として、登場当初は Facebook ですら JSX が市民権を得るとは思っていなかったらしいんですけども、TypeScript が JSX をサポートしたり、VS Code が TypeScript をサポートしたり、Language Server Protocol 実装がある型付きテンプレートエンジンとして、大きく我々の開発生産性を向上させています。React と Node.js 技術スタックの枠を超えて、Next.js が Vercel、Remix が Cloudflare といったプラットフォームネイティブで動くようになってきたり、ライブラリやアーキテクチャだけではなくデプロイ環境もセットで開発者体験をデザインする動きも出てきています。

アプリケーションアーキテクチャの試行錯誤

React が出てきたので、アプリケーションアーキテクチャにも触れてみます。React の出発点とも言える差分描画は革命的で、それによって単一のデータフローを実現しました。副次的に、クライアントサイドレンダリングなのかサーバーサイドレンダリングなのか、あるいは SPA なのか MPA なのかといった議論が出てきました。こういったアーキテクチャの試行錯誤は幾度となく繰り返されて、概念を成熟させてきました。たとえば、Universal JavaScript や Jamstack なども副産物の発明です。最近だと MPA への揺り戻しとして、ブラウザ実装の最適化である bfcache が登場しています。

大きく捉えると、フロントエンドの責務というのが広がり続けています。昔はサーバーサイドのエンジニアがバックエンドを実装して、マークアップエンジニアが HTML/CSS を実装するという時代があったんですけれども、今は Node.js のエコシステムの普及と成熟によって、フロントエンドのエンジニアが Web アプリケーション全域、つまり HTML/CSS の UI 実装だけじゃなくて、Next.js や React でサーバーサイドレンダリングするという、そのサーバーサイドの領域までを含んでいて、HTML 生成という意味では昔から変わっていないけれども、そのサーバーサイドを含む領域をフロントエンドが担うようになってきています。

ベースラインは ES2015+

こうした時代背景を踏まえて、我々はベースラインをどこに置くべきかというのを少し考えてみました。一つは、これまでと同様に堅牢な UI の実装技術というのは、基礎としておくべきです。それは今まで通りではありますが、よりセマンティックな HTML を使いつつ、CSS のより便利な機能として、@layer/@container クエリや、より柔軟なセレクター、CSS Nesting などの新機能を抑えながら、良いフロントエンド実装に挑戦していくべきです。古き良き CSS で足りなかった機能性は、仕様の拡充と Interop の取り組みで改善されつつあり、Sass や Autoprefixer は役目を終えつつあります。同じことが JavaScript にも言えて、もう IE11 がドロップされた以上、JavaScript は投資とこれからの実利として、ES2016 以上を前提としておそらく差し支えないでしょう。TypeScript の導入も生産性向上の文脈だけではなく、コンパイルターゲットも ES2015+ で問題ないと思います。

実行環境ですが、やはり Node.js はこれからの Web 開発にとって欠かせなくて、抑えざるを得ません。なので、要件に応じて UI ライブラリやビルドツールを選んで、これらを使ったベストプラクティスをこれからも模索していく必要があります。ここからがフロントエンドとしてどこを探っていけばいいのかという話になってきますが、Frontend Developer Roadmap に複雑に多岐化したフロントエンドの専門性が示されています。さっきのベースラインを抑えながら、自分がどこに専門性をプロットしていくのかというのをロードマップを参考に思考していけると良さそうです。

ご清聴ありがとうございました。

本記事は、TechFeed Experts Night#26 〜 Web標準技術最前線 ー HTML/CSS/JSの「いま」のセッション書き起こし記事になります。 イベントページのタイムテーブルから、その他のセッションに関する記事もお読み頂けますので、一度アクセスしてみてください。