2024年のWebフロントエンドのふりかえりと2025年

2024年の
 Webフロントエンドの
 ふりかえりと2025年 BuriKaig 2025
 #Burikaigi

 2025年02月01日

Sakito X: @__sakito_ BlueSky: @sakito.bsky.socia 所属：サイボウズ株式会 プロダクトデザインデザインマネージャ Webフロントエンドエンジニアマネージャ PodCastで毎月フロントエンド周りの情報発信してま mozaic.fm (ゲスト参加)

はじめに 話すこ 2024年にあったWebフロントエンドの変化や個人的に注目しているトピックを紹 2025年のWebフロントエンド動向に関する考 今後深掘りするためのきっかけの提 話さないこ 個々の技術的な詳 React, Vue, Angularなどライブラリやフレームワークの詳細

もくじ 01 Baselineの整備が進んだ2024 02 UIコンポーネントを取り巻く変化と発 03 ブラウザは今後どうなっていく 04 そのほ 05 まとめ

Baselineの整備が進んだ2024年

Baselineの整備が進んだ2024年 Baselineのおさらい Baselineとは Safari,Chrome,Edge,Firefoxのブラウザの互換性のレベルを表したも MDNやCan I Useにラベルとして表示されてい W3Cも WebDXコミュニティが管理し、データはweb-platform-dx/web-featuresでOSSとして管理されてい Baselineの3つの意 Limited availabl 対象ブラウザの一部で利用可能な機 Newly availabl 対象ブラウザの最新安定版で利用可能になった機 Widely availabl Newly availableから2.5年(30ヶ月)以上経過した機能

Baselineの整備が進んだ2024年 Baselineのおさらい

Baselineの整備が進んだ2024年 Baselineの整備が整ってきた Baselineの取り組みがはじまったのは2023年末か 2024年はBaselineの基盤整備により、実用的かつHTML,CSS,JSやAPIの追加が把握しやすくなっ Baseline 2024: more tools to help web developer https://web.dev/blog/baseline-project-202 Baseline周りで2024年に増えたも web-featuresにBaselineに必要なデータが81%揃っ Baselineの公式サイ https://web-platform-dx.github.io/web-features YouTube 「This is Baseline https://www.youtube.com/playlist?list=PLNYkxOF6rcIAXHmpG8YdH1p8pQwgoLSC Baselineに追加された機能をわかりやすく動画で紹 Web Platform Status dashboar https://webstatus.dev ダッシュボードで機能とBaselineの一覧が見れる

• https://web.dev/blog/baseline-project-2024
• https://web-platform-dx.github.io/web-features/
• https://www.youtube.com/playlist?list=PLNYkxOF6rcIAXHmpG8YdH1p8pQwgoLSCy
• https://webstatus.dev/

Baselineの整備が進んだ2024年 Web Platform Status dashboard 2024年は53個の機能が新しく、
 Baselineに増えたことがわか scrollbar-widt font-size-adjus light-dark( text-wrap: balanc Set method Array groupin AVI Declarative shadow DO ...

Baselineの整備が進んだ2024年 Web Platform Status dashboard 実装状況などのデータの可視化も追える

Baselineの整備が進んだ2024年 Web Platform Status dashboardで情報を得ていく HTML,CSS,JS,Web APIの追加は追うことが難し 2024年にBaselineが整備され、Web Platform Status dashboardができ Web Platform Status dashboardで機能を網羅敵に把握し、Baselineで使用の可否を判断していけるだろう

UIコンポーネントを
 取り巻く変化と発展

UIコンポーネントを取り巻く変化と発展 Headless UIが1周した Headless UIとは UIの見た目を持たず、機能だけを提供するコンポーネントライブラ OSSとしてUIに必要な機能が増えていくので、開発速度があが 見た目はユーザーがカスタマイズしやすいことからも人気を得 代表的なのはReact Aria,Radix UIだったが、Headless UIのライブラリの数も増え コンポーネントライブラリをコピペやCLI経由で手元に持ってくるライブラリも増え 必要なコンポーネントを必要なものだけ使う思 shadcn/ui,Catalyst.. 2023年ごろから増えはじめ、2024年は利用事例が増えた 
 良いところが多いから利用が増えたが、2024年後半からエコシステムに変化とデメリットが見えてくるように

UIコンポーネントを取り巻く変化と発展 Headless UIの寿命とメンテナンスはどうする？ MUIが2024年末にBase UIをリリー https://base-ui.com 開発者はRadix,Floating UI,Material UIのCreatorだった人た 同時にRadixのメンテナンスや機能追加のリリースが不安定になってき shodden/uiも依存してい Headless UIそのものに流行り廃りがみえてき 本来なら機能追加やメンテナンスはOSSとしてのアップデートで更新していくはずだっ Headless UIそのもののメンテナンスが滞ると、結果的には自分たちで開発する必要がでてく Headless UIを剥がすコス 自分たちがOSSにコントリビュートしてい リリース権限がないので反映できるとは限らな コンポーネントライブラリを自作するのとどっちはいいのだろうか？ 
 ブラウザのUIコンポーネントが豊富でカスタマイズ可能なら... *以降はブラウザのUIコンポーネントを「Web UIコンポーネント」とする

• https://base-ui.com/

UIコンポーネントを取り巻く変化と発展 Open UIとWeb UIコンポーネント Open UIとは https://open-ui.org W3C Community Groupの一つ(正式にはOpen UI Community Group Web UIコンポーネントとForm Controls(dropdown,checkboxe,radio,button,etc...)の改善目指してい UIコンポーネントについて研究・議論し、WHATWG、CSSWG、W3C、TC39などの標準化団体と協力し、
 UIコンポーネントに必要なHTML、CSS、JS、ARIA、Web APIの仕様にし、ブラウザで実装されるまで幅広く協力 してい 関わっているものの <dialog popover属性,popover=hin checkboxのaccent-color,switch属 Customizable Select Elemen まだExperimentalなものが多いが、これらが進み出したことに大きな貢献をしている 
 このOpen UIがGlobal Design System PJを2024年に立ち上げ、議論をはじめている

• https://open-ui.org/

UIコンポーネントを取り巻く変化と発展 Open UIとブラウザのUIコンポーネント

UIコンポーネントを取り巻く変化と発展 Global Design System(GDS) Atomic Designの提唱者であるBrad Frost氏が投げかけたのがきっか What’s Next for a Global Design System | Brad Fros https://bradfrost.com/blog/post/whats-next-for-a-global-design-system 個人の提案だけではなく、Open UIのプロジェクトになってい A design system, component library for the web? ·Issue #1017 ·openui/open-u https://github.com/openui/open-ui/issues/101 共通のUIコンポーネントを一元化し、世の中のOSSやローカルのコンポーネントライブラリ重複を大幅に削減し、
 Webベースの技術スタックを目指 まさにHeadless UIのようなも GDSは特定のライブラリやフレームワークに依存しないWeb Componentsをベースにす FigmaやSketchのデザインも用意する予 GDSの一次情報源は下記にな Discordコミュニティ #openui-design-system コミュニテ The OpenUI Design Syste https://github.com/openui/design-syste teleco https://github.com/openui/design-system/tree/main/telecon

• https://bradfrost.com/blog/post/whats-next-for-a-global-design-system/
• https://github.com/openui/open-ui/issues/1017
• https://github.com/openui/design-system
• https://github.com/openui/design-system/tree/main/telecon

UIコンポーネントを取り巻く変化と発展 Global Design System(GDS) A Global Design System | Brad Frost https://bradfrost.com/blog/post/a-global-design-system/

• https://bradfrost.com/blog/post/a-global-design-system/

UIコンポーネントを取り巻く変化と発展 GDSは今後Headless UIのようになれるのか？ GDSまだまだ議論を始めたばかりでRFCプロセスなどを整えている途 2025年はbadgeコンポーネントを作ることがきまっ https://github.com/openui/design-system/blob/main/telecon/2025-01-21.m Headless UIのようなコンポーネントライブラリの代わりになれるのは数年先だろうが、大きな関係性がある2つの動き は2025年に注目していきた Open UIはGDS起点で標準化団体へのフィードバックもかねているので、ポジティブな変化は生まれていきそう 関連して2025年に注目したいのがWeb Componentsの進化

• https://github.com/openui/design-system/blob/main/telecon/2025-01-21.md

UIコンポーネントを取り巻く変化と発展 Web Components 元年はくるか？ 2024年末のReact v19のリリースによりReact,Vue,Angularなどのフレームワーク互換性が100% https://custom-elements-everywhere.com Declarative shadow DOMが最新ブラウザに実装され 世の中のDesign SystemにあるUIライブラリWeb Components Microsoft EdgeのUIもReactからWeb Components https://thenewstack.io/how-microsoft-edge-is-replacing-react-with-web-components Fluent UI frameworkもWeb Components化を推 2025年はGDSも含めてWeb Componentsへのフィードバックが増えていくだろう 2025年はWeb Componentsの開発者体験が向上していくか注目したい

• https://custom-elements-everywhere.com/
• https://thenewstack.io/how-microsoft-edge-is-replacing-react-with-web-components

ブラウザは今後どうなっていく？

ブラウザは今後どうなっていく？ EUでWebKit以外のブラウザエンジンが選択可能に Apple announces changes to iOS, Safari, and the App Store in the European Unio https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-storein-the-european-union 2024年からEUでiOSやiPadOSにおいてWebKit以外のブラウザエンジンが選択可能 この規制緩和により、ChromeはBlink、FirefoxはGeckoといった、各ブラウザが独自のエンジンをiOS上で利用 できるよう Chrome iOS Browser on Blin https://blogs.igalia.com/gyuyoung/2024/08/08/chrome-ios-browser-on-blink IgaliaによりChrome iOSのBlink移植も進みそう

• https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store-in-the-european-union/
• https://blogs.igalia.com/gyuyoung/2024/08/08/chrome-ios-browser-on-blink/

ブラウザは今後どうなっていく？ 現在のWebkitとChrome iOSの関係図 Chrome iOS Browser on Blin https://blogs.igalia.com/gyuyoung/2024/08/08/chrome-ios-browser-on-blink/

• https://blogs.igalia.com/gyuyoung/2024/08/08/chrome-ios-browser-on-blink/

ブラウザは今後どうなっていく？ Googleが反トラスト法の訴訟で敗訴 司法省及び州によるグーグルの総合検索サービスなどにおける独占に関する訴訟の判 https://www.jftc.go.jp/kokusai/kaigaiugoki/usa/2024usa/202410us.htm グーグルの市場独占を是正する措置を米国司法省が提 2020年に米国司法省がグーグルを相手取って提起したものの一報が出 どんな提案があるのかWebに関わるものをピックアッ AppleやMozilaにデフォルト検索エンジンに設定する費用の支払いの停 Chrome,Androidの所有・管理する権利を放棄、もしくは売 Googleは上訴し争っていく予定になってい MozilaからはWebの未来にとって良くない影響を与えると声明がで Proposed contractual remedies in United States v. Google threaten vital role of independent browser https://blog.mozilla.org/en/mozilla/internet-policy/google-remedies-browsers Firefoxのような独立したブラウザの収益の根本的な見直しが発生し、ブラウザとブラウザエンジンの競争を損なう 可能性にある 2024年は政治がブラウザベンダー、そしてWebへ影響を与えるニュースが続いた

• https://www.jftc.go.jp/kokusai/kaigaiugoki/usa/2024usa/202410us.htm
• https://blog.mozilla.org/en/mozilla/internet-policy/google-remedies-browsers/

ブラウザは今後どうなっていく？ ChromiumがLinux Foundationとパートナーシップを発表 2025年1月にChromiumがLinux Foundation(非営利団体)とパートナーシップを発 Announcing Supporters of Chromium-based Browser https://blog.chromium.org/2025/01/announcing-supporters-of-chromium-based.htm Linux Foundation Announces the Launch of Supporters of Chromium-Based Browser https://www.linuxfoundation.org/press/linux-foundation-announces-the-launch-of-supporters-ofchromium-based-browser Chromiumエコシステム内のオープン開発に資金を提供し、プロジェクトを強化することを目 Supporters of Chromium-Based Browsersの設立も同時に発 Google、Meta、Microsoft、Operaなどが支援 2025年はブラウザを取り巻くエコシステムの変化として大きなチェックポイントとなりそう

• https://blog.chromium.org/2025/01/announcing-supporters-of-chromium-based.html
• https://www.linuxfoundation.org/press/linux-foundation-announces-the-launch-of-supporters-of-chromium-based-browsers

そのほか(入りきらなかった)

そのほか Frontend Toolsの変化と発展 Frontend Toolsの全部入り化が進み、人気を得た2024 Lint,Bundle,Format,Parseが1つのツール Vite(rolldown),Biome,Deno, Storyboo Test,UI表示,Figma連 JS0/JSSugar構想の立ち上 https://docs.google.com/presentation/d/1ylROTu3N6MyHzNzWJXQAc7Bo1O0FHO3lNKfQMfPOA4o/edit? pli=1#slide=id.g30432c5cd9c_2_ JS エンジンへの機能追加が増え、実装負荷が上がってい Frontend Toolをみんな使うので全部ネイティブで実装しなくてもいいのかもしれな JS0: エンジンが実装する標 JSSugar: ツールが実装する標 webpackやOXCのメンテナーがTC39に加 これからエンジンとツールで標準化された機能が分離していくかもしれない

• https://docs.google.com/presentation/d/1ylROTu3N6MyHzNzWJXQAc7Bo1O0FHO3lNKfQMfPOA4o/edit?pli=1#slide=id.g30432c5cd9c_2_0

そのほか Frontend Toolsの変化と発展 Language Evolution P.5より https://docs.google.com/presentation/d/1ylROTu3N6MyHzNzWJXQAc7Bo1O0FHO3lNKfQMfPOA4o/ edit?pli=1#slide=id.p

• https://docs.google.com/presentation/d/1ylROTu3N6MyHzNzWJXQAc7Bo1O0FHO3lNKfQMfPOA4o/edit?pli=1#slide=id.p

そのほか 生成AIでデザインとコーディングの連携が進んだ 生成AIでデザインとコーディングの連携が進ん Figma A v0にFigma連携が入り、デザインとコードの生 Working with Figma and custom design systems in v https://vercel.com/blog/working-with-figma-andcustom-design-systems-in-v Figmaとエディタが組み合わさったようなツールの登 Onlook – Cursor for Designer https://onlook.com/ja 任意のデザインシステムやコンポーネントライブラリの読み込 み機能の追加も近いらし 今後デザインシステムがあることが学習データとしての優位性が生 まれるかもしれな デザインシステムを作る大きな理由の1つになる可能性も

• https://vercel.com/blog/working-with-figma-and-
• https://onlook.com/ja/

まとめ

まとめ 2024年にBaselineの整備が進ん Web Platform Status dashboardで機能を網羅敵に把握し、Baselineで使用の可否を判断できるよう 課題もでてきたHeadless UIとどのように向き合っていくの 2025年にOpen UIのGlobal Design Systemは進むの Web Componentsは発展はどのように変わるのだろう ブラウザベンダーと政治の関係はどうなるのだろう 2025年はブラウザを取り巻くエコシステムの変化として大きなチェックポイントになる可能性 Frontend ToolsはJS0/JSSugarによりどんな発展を遂げるの 生成AIの発展はデザインとコーディングの連携分野でまだまだ発展しそう

おわり