2023 年の Web 開発のベースライン

2023 年の Web 開発のベースライン at TechFeed Experts Night #26 by @1000ch 2023 年の Web 開発のベースライン by @1000ch 1

• https://techfeed.io/events/techfeed-experts-night-26
• http://twitter.com/1000ch
• https://bento.me/1000ch

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

• https://shogosensui.com/
• https://engineering.mercari.com/blog/entry/20201222-merpay-frontend/
• https://engineering.mercari.com/blog/entry/20210810-the-new-mercari-web/
• https://engineering.mercari.com/blog/entry/20221213-ground-up-app/
• https://techfeed.io/people/@1000ch
• https://mond.how/1000ch
• https://bento.me/1000ch

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

• https://bento.me/1000ch

Web 標準技術とブラウザ 2023 年の Web 開発のベースライン by @1000ch 4

• https://bento.me/1000ch

IE11 サポート終了後のブラウザシェアの推移 StatCounter Global Stats Top 5 Desktop Browsers in Japan from June 2022 - May 2023 70% 56% Chrome Edge 42% Safari Firefox IE 28% Other (dotted) 14% Ma y2 02 3 Ap r2 02 3 Ma r2 02 3 Fe b2 02 3 Ja n2 02 3 De c2 02 2 No v2 02 2 Oc t2 02 2 Se pt 20 22 Au g2 02 2 Ju ly 20 22 0% IE11 の終了から早 1 年…ブラウザエンジンが Chromium 寡占になる懸念はありつつも、日本 におけるモダンブラウザは定着したと言って良い (StatCounter Global Stats)。 2023 年の Web 開発のベースライン by @1000ch 5

• https://blogs.windows.com/japan/2022/06/15/internet-explorer-11-is-no-longer-supported/
• https://gs.statcounter.com/browser-market-share/desktop/japan/#monthly-202206-202305
• https://bento.me/1000ch

Interop による持続的な相互運用性の改善 Web Standards Interop 2022 でも触れた通り、Interop により Web 標準技術の相互運用性が 持続的に改善されている。Interop 2023 の焦点は Container Queries や Custom Properties の @property など。 2023 年の Web 開発のベースライン by @1000ch 6

• https://techfeed.io/entries/6298e525ed640020f3f19a58
• https://web.dev/interop-2023/
• https://web.dev/cq-stable/
• https://web.dev/at-property/
• https://bento.me/1000ch

Open UI グループによる "Web の" UI 拡張 HTML 標準で提供されている UI は Web 黎明期にデザインされたもので、そのプラットフォ ームニュートラルな性質も相まって、長らく Web 開発者は UI の実装に苦労してきた。 <dialog> 要素などの実用的な UI も追加されたが、より現代のユースケースに即した UI イ ンキュベーションを行う W3C の Open UI によって、 <selectlist> 要素のような試験的な UI 要素が提案されている。 2023 年の Web 開発のベースライン by @1000ch 7

• https://caniuse.com/dialog
• https://open-ui.org/
• https://open-ui.org/components/selectlist/
• https://bento.me/1000ch

Web 標準技術のボトムアップと漸進 モダンブラウザの一般化と Interop が意味するところ ブラウザエンジンが複数種類存在する限りブラウザ間の差はなくならないが、IE11 を中心と した後方互換性の考慮は大きく削減された。Interop によるモダンブラウザ間の相互運用性の 向上も、Web アプリケーション実装のベースラインを大幅に前進させている。 各プロダクトによる試験的な Web 標準技術への貢献 Figma の性能や Squoosh のコーデックは WASM で実現していたり、Astro v3 の View Transition API サポートなど、プロダクトによって優れた技術の導入も進んでいる。 2023 年の Web 開発のベースライン by @1000ch 8

• https://www.figma.com/blog/webassembly-cut-figmas-load-time-by-3x/
• https://github.com/GoogleChromeLabs/squoosh/tree/dev/codecs
• https://astro.build/blog/astro-3/
• https://bento.me/1000ch

エコシステムと開発者体験 2023 年の Web 開発のベースライン by @1000ch 9

• https://bento.me/1000ch

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

• https://nodejs.org/
• https://deno.com/
• https://bun.sh/
• https://developers.cloudflare.com/workers/
• https://wintercg.org/
• https://bento.me/1000ch

開発におけるビルドの一般化 JavaScript の実装は Babel や TypeScript によるトランスパ イルが一般化した。実行環境は Node.js に留まらず、実行速 度の向上を目指して Go/Rust で実装された esbuild や swc、 Biome などのツールチェインが登場した。 2023 年の Web 開発のベースライン by @1000ch esbuild An extremely fast bundler for the web 11

• https://babeljs.io/
• https://www.typescriptlang.org/
• https://esbuild.github.io/
• https://github.com/swc-project/swc
• https://biomejs.dev/
• https://bento.me/1000ch

Node.js や React が Web 開発に与えた影響 TypeScript および型付テンプレートとしての TSX Facebook ですら JSX が市民権を得ると思わなかったが、TypeScript の JSX サポートや VS Code といったエディタの TypeScript サポートなど、Language Server Protocol 実装があ る型付きテンプレートエンジン として、品質と生産性の向上に寄与している。 開発者体験へフォーカスするプラットフォーム Next.js on Vercel や Remix on Cloudflare といった、アーキテクチャだけでなくデプロイ環境 といった開発者体験を統合的にサポートするフレームワークとプラットフォームの組み合わ せが登場している。 2023 年の Web 開発のベースライン by @1000ch 12

• https://www.youtube.com/watch?v=8pDqJVdNa44
• https://www.typescriptlang.org/docs/handbook/release-notes/typescript-1-6.html#jsx-support
• https://code.visualstudio.com/docs/languages/typescript
• https://microsoft.github.io/language-server-protocol/
• https://vercel.com/solutions/nextjs
• https://developers.cloudflare.com/pages/framework-guides/deploy-a-remix-site/
• https://bento.me/1000ch

アプリケーションアーキテクチャ 2023 年の Web 開発のベースライン by @1000ch 13

• https://bento.me/1000ch

Virtual DOM がもたらしたパラダイムシフト 差分描画と単一方向のデータフロー Virtual DOM が実現する HTML の差分描画はアプリケーションの状態に応じたページの高速 な再描画を実現し、昨今の UI ライブラリの多くはこの概念を踏襲している。これは単一方向 のデータフロー設計である Flux を一般化させた。 CSR or SSR? SPA or MPA? アプリケーションの要件に応じたアーキテクチャの試行錯誤が繰り返され、概念が成熟して いく。Universal JavaScript や Jamstack などのパラダイムが発明された。MPA への揺り戻 しをブラウザ実装の最適化である bfcache が後押しする。 2023 年の Web 開発のベースライン by @1000ch 14

• https://www.youtube.com/watch?v=nYkdrAPrdcw
• https://en.wikipedia.org/wiki/Isomorphic_JavaScript
• https://jamstack.org/
• https://web.dev/bfcache/
• https://bento.me/1000ch

広がり続ける Frontend の責務 サーバーサイドエンジニアが Backend を実装してマークアップエンジニアが HTML/CSS を 実装する時代から、Node.js が成すエコシステムの普及と成熟によって Software Engineer (Frontend) が Web アプリケーション全域をカバーしつつある。 FUJI Goro @__gfx__ · フォローする .@1000ch さんの「フロントエンドの責務が広がってバック エンドを飲み込んでいる」という話があって、これは結構象 徴的だなと思いました。たとえばフロントエンドエンジニア 向けのミートアップでCDNが話の中心になるというのは隔世 の感があります。 #高速化_findy 午後8:07 · 2023年3月22日 55 返信 リンクをコピー 1件の返信を読む 2023 年の Web 開発のベースライン by @1000ch 15

• https://twitter.com/__gfx__?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1638497684708552705|twgr^|twcon^s1_&amp;ref_url=file:///var/folders/tk/ll7h93gx7pv7h9yflgft8czh0000gp/T/tmp-16630-xYLK0kA1rSWY-.html
• https://twitter.com/intent/follow?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1638497684708552705|twgr^|twcon^s1_&amp;ref_url=file:///var/folders/tk/ll7h93gx7pv7h9yflgft8czh0000gp/T/tmp-16630-xYLK0kA1rSWY-.html&amp;screen_name=__gfx__
• https://twitter.com/1000ch?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1638497684708552705|twgr^|twcon^s1_&amp;ref_url=file:///var/folders/tk/ll7h93gx7pv7h9yflgft8czh0000gp/T/tmp-16630-xYLK0kA1rSWY-.html
• https://twitter.com/hashtag/高速化_findy?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1638497684708552705|twgr^|twcon^s1_&amp;ref_url=file:///var/folders/tk/ll7h93gx7pv7h9yflgft8czh0000gp/T/tmp-16630-xYLK0kA1rSWY-.html&amp;src=hashtag_click
• https://twitter.com/__gfx__/status/1638497684708552705?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1638497684708552705|twgr^|twcon^s1_&amp;ref_url=file:///var/folders/tk/ll7h93gx7pv7h9yflgft8czh0000gp/T/tmp-16630-xYLK0kA1rSWY-.html
• https://twitter.com/intent/like?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1638497684708552705|twgr^|twcon^s1_&amp;ref_url=file:///var/folders/tk/ll7h93gx7pv7h9yflgft8czh0000gp/T/tmp-16630-xYLK0kA1rSWY-.html&amp;tweet_id=1638497684708552705
• https://twitter.com/intent/tweet?ref_src=twsrc^tfw|twcamp^tweetembed|twterm^1638497684708552705|twgr^|twcon^s1_&amp;ref_url=file:///var/folders/tk/ll7h93gx7pv7h9yflgft8czh0000gp/T/tmp-16630-xYLK0kA1rSWY-.html&amp;in_reply_to=1638497684708552705
• https://bento.me/1000ch

ベースラインをどこに置くべきか 2023 年の Web 開発のベースライン by @1000ch 16

• https://bento.me/1000ch

堅牢な UI の実装技術 セマンティックで HTML を使いつつ、@layer/@container クエリ, :has() , CSS Nesting な ど CSS の新機能を抑えていく。Sass や Autoprefixer は役目を終えつつある。 プログラミング言語 JavaScript は ES2015 をベースにしつつ、実利と投資を含めて ES2016+ を前提にして差し 支えない。TypeScript も積極的に導入し、target も同様に ES2015+ で問題ない。 2023 年の Web 開発のベースライン by @1000ch 17

• https://developer.mozilla.org/ja/docs/Web/CSS/@layer
• https://developer.mozilla.org/en-US/docs/Web/CSS/@container
• https://developer.mozilla.org/ja/docs/Web/CSS/:has
• https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_nesting/Using_CSS_nesting
• https://sass-lang.com/
• https://github.com/postcss/autoprefixer
• https://kangax.github.io/compat-table/es6/
• https://kangax.github.io/compat-table/es2016plus/
• https://bento.me/1000ch

実行環境やアーキテクチャ Node.js とそのエコシステムは Web 開発にとって今や欠かせない。要件に応じて UI ライブラ リとビルドツールを選びながら、ベストプラクティスを模索していく。 拡がる Frontend のスキルマップ Frontend Developer Roadmap を参考に、Software Engineer (Frontend) としての分化する 専門性を磨いていく。 2023 年の Web 開発のベースライン by @1000ch 18

• https://roadmap.sh/frontend
• https://bento.me/1000ch