Shogo SENSUI (shogosensui.com)

SIer での受託開発を経て、2012 年に株式会社サイバーエージェントに入社。プロダクト開発の傍ら、エンジニア組織のマネジメントに従事。2018 年に株式会社メルカリに入社後は、株式会社メルペイの Frontend チームの立ち上げや Web 版の「メルカリ」の刷新、メルカリアプリのコードベース刷新を牽引した後に、執行役員 VP of Engineering としてメルペイのエンジニアリング部門を管掌。2023 年 4 月にデジタル庁入庁。2023 年 7 月に株式会社ハウテレビジョン入社、執行役員プロダクト本部長に就任。mond 認定回答者、TechFeed 公認エキスパート (Web 標準技術 • JavaScript)。

• 変化し続けてきた Frontend 領域の、背景と現在地を整理する
• Web 標準技術とブラウザ事情? 進化を支えるエコシステム? 設計のパラダイム?
• Web ページに向き合う開発者として、これからのスキルマップを思考する

IE11 サポート終了後のブラウザシェアの推移

IE11 の終了から早 1 年…ブラウザエンジンが Chromium 寡占になる懸念はありつつも、日本におけるモダンブラウザは定着したと言って良い (StatCounter Global Stats)。

Interop による持続的な相互運用性の改善

Web Standards Interop 2022 でも触れた通り、Interop により Web 標準技術の相互運用性が持続的に改善されている。Interop 2023 の焦点は Container Queries や Custom Properties の @property など。

Open UI グループによる "Web の" UI 拡張

HTML 標準で提供されている UI は Web 黎明期にデザインされたもので、そのプラットフォームニュートラルな性質も相まって、長らく Web 開発者は UI の実装に苦労してきた。

<dialog> 要素などの実用的な UI も追加されたが、より現代のユースケースに即した UI インキュベーションを行う W3C の Open UI によって、<selectlist> 要素のような試験的な UI 要素が提案されている。

Web 標準技術のボトムアップと漸進

モダンブラウザの一般化と Interop が意味するところ

ブラウザエンジンが複数種類存在する限りブラウザ間の差はなくならないが、IE11 を中心とした後方互換性の考慮は大きく削減された。Interop によるモダンブラウザ間の相互運用性の向上も、Web アプリケーション実装のベースラインを大幅に前進させている。

各プロダクトによる試験的な Web 標準技術への貢献

Figma の性能や Squoosh のコーデックは WASM で実現していたり、Astro v3 の View Transition API サポートなど、プロダクトによって優れた技術の導入も進んでいる。

JavaScript Runtime の群雄割拠

Node.js のエコシステムは、今や Web 開発に無くてはならない存在になった。Deno や Bun といった実行環境や Cloudflare Workers のようなサービスも新たに登場し、JavaScript Runtime の相互運用性の改善を目指す WinterCG が組成された。

開発におけるビルドの一般化

JavaScript の実装は Babel や TypeScript によるトランスパイルが一般化した。実行環境は Node.js に留まらず、実行速度の向上を目指して Go/Rust で実装された esbuild や swc、Biome などのツールチェインが登場した。

Node.js や React が Web 開発に与えた影響

TypeScript および型付テンプレートとしての TSX

Facebook ですら JSX が市民権を得ると思わなかったが、TypeScript の JSX サポートや VS Code といったエディタの TypeScript サポートなど、Language Server Protocol 実装がある型付きテンプレートエンジン として、品質と生産性の向上に寄与している。

開発者体験へフォーカスするプラットフォーム

Next.js on Vercel や Remix on Cloudflare といった、アーキテクチャだけでなくデプロイ環境といった開発者体験を統合的にサポートするフレームワークとプラットフォームの組み合わせが登場している。

Virtual DOM がもたらしたパラダイムシフト

差分描画と単一方向のデータフロー

Virtual DOM が実現する HTML の差分描画はアプリケーションの状態に応じたページの高速な再描画を実現し、昨今の UI ライブラリの多くはこの概念を踏襲している。これは単一方向のデータフロー設計である Flux を一般化させた。

CSR or SSR? SPA or MPA?

アプリケーションの要件に応じたアーキテクチャの試行錯誤が繰り返され、概念が成熟していく。Universal JavaScript や Jamstack などのパラダイムが発明された。MPA への揺り戻しをブラウザ実装の最適化である bfcache が後押しする。

広がり続ける Frontend の責務

サーバーサイドエンジニアが Backend を実装してマークアップエンジニアが HTML/CSS を実装する時代から、Node.js が成すエコシステムの普及と成熟によって Software Engineer (Frontend) が Web アプリケーション全域をカバーしつつある。

.@1000ch さんの「フロントエンドの責務が広がってバックエンドを飲み込んでいる」という話があって、これは結構象徴的だなと思いました。たとえばフロントエンドエンジニア向けのミートアップでCDNが話の中心になるというのは隔世の感があります。 #高速化_findy

— FUJI Goro (@__gfx__) March 22, 2023

堅牢な UI の実装技術

セマンティックで HTML を使いつつ、@layer/@container クエリ, :has(), CSS Nesting など CSS の新機能を抑えていく。Sass や Autoprefixer は役目を終えつつある。

プログラミング言語

JavaScript は ES2015 をベースにしつつ、実利と投資を含めて ES2016+ を前提にして差し支えない。TypeScript も積極的に導入し、target も同様に ES2015+ で問題ない。

実行環境やアーキテクチャ

Node.js とそのエコシステムは Web 開発にとって今や欠かせない。要件に応じて UI ライブラリとビルドツールを選びながら、ベストプラクティスを模索していく。

拡がる Frontend のスキルマップ

Frontend Developer Roadmap を参考に、Software Engineer (Frontend) としての分化する専門性を磨いていく。