---
title: 2024年のWebフロントエンドのふりかえりと2025年
tags: 
author: [sakito](https://convert.docswell.com/user/sakito)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PJXVN93VEX.jpg?width=480
description: BuriKaigi 2025 https://fortee.jp/burikaigi-2025  X https://twitter.com/__sakito__
published: February 01, 25
canonical: https://convert.docswell.com/s/sakito/Z82RGP-burikaigi2025
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PJXVN93VEX.jpg)

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


# Page. 2

![Page Image](https://bcdn.docswell.com/page/3JKQNPY5JD.jpg)

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


# Page. 3

![Page Image](https://bcdn.docswell.com/page/LE3PVX91J5.jpg)

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


# Page. 4

![Page Image](https://bcdn.docswell.com/page/8EDL82GKJG.jpg)

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


# Page. 5

![Page Image](https://bcdn.docswell.com/page/V7P2813378.jpg)

Baselineの整備が進んだ2024年


# Page. 6

![Page Image](https://bcdn.docswell.com/page/2JVDNY4NJQ.jpg)

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ヶ月)以上経過した機能


# Page. 7

![Page Image](https://bcdn.docswell.com/page/5EGYK915EL.jpg)

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


# Page. 8

![Page Image](https://bcdn.docswell.com/page/4JQMNWDL7P.jpg)

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の一覧が見れる


# Page. 9

![Page Image](https://bcdn.docswell.com/page/K74VGKZ5J1.jpg)

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
...


# Page. 10

![Page Image](https://bcdn.docswell.com/page/LJ13DXR27G.jpg)

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


# Page. 11

![Page Image](https://bcdn.docswell.com/page/GJWPYN1272.jpg)

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


# Page. 12

![Page Image](https://bcdn.docswell.com/page/4EZKX3P4E3.jpg)

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


# Page. 13

![Page Image](https://bcdn.docswell.com/page/Y76Q4XMG7V.jpg)

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


# Page. 14

![Page Image](https://bcdn.docswell.com/page/G75RQXZXE4.jpg)

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コンポーネント」とする


# Page. 15

![Page Image](https://bcdn.docswell.com/page/9J2DPXRQJR.jpg)

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の仕様にし、ブラウザで実装されるまで幅広く協力
してい
関わっているものの
&lt;dialog
popover属性,popover=hin
checkboxのaccent-color,switch属
Customizable Select Elemen
まだExperimentalなものが多いが、これらが進み出したことに大きな貢献をしている
 
このOpen UIがGlobal Design System PJを2024年に立ち上げ、議論をはじめている


# Page. 16

![Page Image](https://bcdn.docswell.com/page/DEY258DYEM.jpg)

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


# Page. 17

![Page Image](https://bcdn.docswell.com/page/VJN8NQ6R78.jpg)

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


# Page. 18

![Page Image](https://bcdn.docswell.com/page/YE9KRDLZE3.jpg)

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


# Page. 19

![Page Image](https://bcdn.docswell.com/page/GE8RW3WYJD.jpg)

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の進化


# Page. 20

![Page Image](https://bcdn.docswell.com/page/LELKNVN9JR.jpg)

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の開発者体験が向上していくか注目したい


# Page. 21

![Page Image](https://bcdn.docswell.com/page/4JM2XGXVJW.jpg)

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


# Page. 22

![Page Image](https://bcdn.docswell.com/page/PJRMNZNWE9.jpg)

ブラウザは今後どうなっていく？
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移植も進みそう


# Page. 23

![Page Image](https://bcdn.docswell.com/page/PEXVN9NV7X.jpg)

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


# Page. 24

![Page Image](https://bcdn.docswell.com/page/3EKQNPN5ED.jpg)

ブラウザは今後どうなっていく？
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へ影響を与えるニュースが続いた


# Page. 25

![Page Image](https://bcdn.docswell.com/page/L73PVXV1E5.jpg)

ブラウザは今後どうなっていく？
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年はブラウザを取り巻くエコシステムの変化として大きなチェックポイントとなりそう


# Page. 26

![Page Image](https://bcdn.docswell.com/page/87DL828KEG.jpg)

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


# Page. 27

![Page Image](https://bcdn.docswell.com/page/VJP28183J8.jpg)

そのほか
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に加
これからエンジンとツールで標準化された機能が分離していくかもしれない


# Page. 28

![Page Image](https://bcdn.docswell.com/page/2EVDNYNNEQ.jpg)

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


# Page. 29

![Page Image](https://bcdn.docswell.com/page/57GYK9K57L.jpg)

そのほか
生成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つになる可能性も


# Page. 30

![Page Image](https://bcdn.docswell.com/page/4EQMNWNLJP.jpg)

まとめ


# Page. 31

![Page Image](https://bcdn.docswell.com/page/KJ4VGKG5E1.jpg)

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


# Page. 32

![Page Image](https://bcdn.docswell.com/page/LE13DXD2JG.jpg)

おわり


