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

BuriKaigi 2025
https://fortee.jp/burikaigi-2025

X
https://twitter.com/__sakito__

Transcript

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

 2025年02月01日
2. Sakito † X: @__sakito_y † BlueSky: @sakito.bsky.sociac † 所属：サイボウズ株式会Q † プロダクトデザインデザインマネージャ2 † Webフロントエンドエンジニアマネージャ2 † PodCastで毎月フロントエンド周りの情報発信してまÉ † mozaic.fm (ゲスト参加)
3. ‡ 話すこ€ ‡ 2024年にあったWebフロントエンドの変化や個人的に注目しているトピックを紹Y ‡ 2025年のWebフロントエンド動向に関する考@ ‡ 今後深掘りするためのきっかけの提 ‡ 話さないこ€ ‡ 個々の技術的な詳 ‡ React, Vue, Angularなどライブラリやフレームワークの詳細 はじめに
4. I 01 Baselineの整備が進んだ20240 I 02 UIコンポーネントを取り巻く変化と発 I 03 ブラウザは今後どうなっていくÃ I 04 そのほ8 I 05 まとめ もくじ
5. Baselineの整備が進んだ2024年
6. Baselineの整備が進んだ2024年 Baselineのおさらい  Baselineとは“  Safari,Chrome,Edge,Firefoxのブラウザの互換性のレベルを表したもh  MDNやCan I Useにラベルとして表示されていx  W3Cも WebDXコミュニティが管理し、データはweb-platform-dx/web-featuresでOSSとして管理されていx  Baselineの3つの意…  Limited availabl‘  対象ブラウザの一部で利用可能な機i  Newly availabl‘  対象ブラウザの最新安定版で利用可能になった機i  Widely availabl‘  Newly availableから2.5年(30ヶ月)以上経過した機能
7. Baselineの整備が進んだ2024年 Baselineのおさらい
8. Baselineの整備が進んだ2024年 Baselineの整備が整ってきた ° Baselineの取り組みがはじまったのは2023年末かÞ ° 2024年はBaselineの基盤整備により、実用的かつHTML,CSS,JSやAPIの追加が把握しやすくなっ6 ° Baseline 2024: more tools to help web developer§ ° https://web.dev/blog/baseline-project-202p ° Baseline周りで2024年に増えたも‘ ° web-featuresにBaselineに必要なデータが81%揃っ6 ° Baselineの公式サイ2 ° https://web-platform-dx.github.io/web-featuresP ° YouTube 「This is Baseline} ° https://www.youtube.com/playlist?list=PLNYkxOF6rcIAXHmpG8YdH1p8pQwgoLSC" ° Baselineに追加された機能をわかりやすく動画で紹È ° Web Platform Status dashboar€ ° https://webstatus.devP ° ダッシュボードで機能とBaselineの一覧が見れる
9. Baselineの整備が進んだ2024年 Web Platform Status dashboard i 2024年は53個の機能が新しく、
 Baselineに増えたことがわかT i scrollbar-widtP i font-size-adjus’ i light-dark(t i text-wrap: balancs i Set methoda i Array groupinx i AVI8 i Declarative shadow DO5 i ...
10. Baselineの整備が進んだ2024年 Web Platform Status dashboard R 実装状況などのデータの可視化も追える
11. Baselineの整備が進んだ2024年 Web Platform Status dashboardで情報を得ていく “ HTML,CSS,JS,Web APIの追加は追うことが難しs “ 2024年にBaselineが整備され、Web Platform Status dashboardができ‡ “ Web Platform Status dashboardで機能を網羅敵に把握し、Baselineで使用の可否を判断していけるだろう
12. UIコンポーネントを
 取り巻く変化と発展
13. UIコンポーネントを取り巻く変化と発展 Headless UIが1周した „ Headless UIとはŽ „ UIの見た目を持たず、機能だけを提供するコンポーネントライブラ† „ OSSとしてUIに必要な機能が増えていくので、開発速度があがf „ 見た目はユーザーがカスタマイズしやすいことからも人気を得} „ 代表的なのはReact Aria,Radix UIだったが、Headless UIのライブラリの数も増え} „ コンポーネントライブラリをコピペやCLI経由で手元に持ってくるライブラリも増え} „ 必要なコンポーネントを必要なものだけ使う思‘ „ shadcn/ui,Catalyst..t „ 2023年ごろから増えはじめ、2024年は利用事例が増えた 
 良いところが多いから利用が増えたが、2024年後半からエコシステムに変化とデメリットが見えてくるように
14. 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を剥がすコスu ¡ 自分たちがOSSにコントリビュートしていp ¡ リリース権限がないので反映できるとは限らなÆ ¡ コンポーネントライブラリを自作するのとどっちはいいのだろうか？ 
 *以降はブラウザのUIコンポーネントを「Web UIコンポーネント」とする ブラウザのUIコンポーネントが豊富でカスタマイズ可能なら...
15. 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...)の改善目指していe “ UIコンポーネントについて研究・議論し、WHATWG、CSSWG、W3C、TC39などの標準化団体と協力し、
 UIコンポーネントに必要なHTML、CSS、JS、ARIA、Web APIの仕様にし、ブラウザで実装されるまで幅広く協力 していe “ 関わっているもののt “ <dialogD “ popover属性,popover=hinq “ checkboxのaccent-color,switch属9 “ Customizable Select Elemenq “ まだExperimentalなものが多いが、これらが進み出したことに大きな貢献をしている 
 このOpen UIがGlobal Design System PJを2024年に立ち上げ、議論をはじめている
16. UIコンポーネントを取り巻く変化と発展 Open UIとブラウザのUIコンポーネント
17. 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/101e ¥ 共通のUIコンポーネントを一元化し、世の中のOSSやローカルのコンポーネントライブラリ重複を大幅に削減し、
 Webベースの技術スタックを目指 ¥ まさにHeadless UIのようなも» ¥ ¥ 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 GDSは特定のライブラリやフレームワークに依存しないWeb Componentsをベースにす1 È FigmaやSketchのデザインも用意する予Q
18. UIコンポーネントを取り巻く変化と発展 Global Design System(GDS) A Global Design System | Brad Frost https://bradfrost.com/blog/post/a-global-design-system/
19. UIコンポーネントを取り巻く変化と発展 GDSは今後Headless UIのようになれるのか？ … GDSまだまだ議論を始めたばかりでRFCプロセスなどを整えている途} … 2025年はbadgeコンポーネントを作ることがきまっk … https://github.com/openui/design-system/blob/main/telecon/2025-01-21.my … Headless UIのようなコンポーネントライブラリの代わりになれるのは数年先だろうが、大きな関係性がある2つの動き は2025年に注目していきたˆ … Open UIはGDS起点で標準化団体へのフィードバックもかねているので、ポジティブな変化は生まれていきそう 関連して2025年に注目したいのがWeb Componentsの進化
20. UIコンポーネントを取り巻く変化と発展 Web Components 元年はくるか？ ’ 2024年末のReact v19のリリースによりReact,Vue,Angularなどのフレームワーク互換性が100%Š ’ https://custom-elements-everywhere.comt ’ Declarative shadow DOMが最新ブラウザに実装されc ’ 世の中のDesign SystemにあるUIライブラリWeb ComponentsŠ ’ Microsoft EdgeのUIもReactからWeb Componentso ’ https://thenewstack.io/how-microsoft-edge-is-replacing-react-with-web-componentst ’ Fluent UI frameworkもWeb Components化を推I ’ 2025年はGDSも含めてWeb Componentsへのフィードバックが増えていくだろう 2025年はWeb Componentsの開発者体験が向上していくか注目したい
21. ブラウザは今後どうなっていく？
22. ブラウザは今後どうなっていく？ EUでWebKit以外のブラウザエンジンが選択可能に q Apple announces changes to iOS, Safari, and the App Store in the European Unio› q https://www.apple.com/newsroom/2024/01/apple-announces-changes-to-ios-safari-and-the-app-store- in-the-european-unionk q 2024年からEUでiOSやiPadOSにおいてWebKit以外のブラウザエンジンが選択可能ƒ q この規制緩和により、ChromeはBlink、FirefoxはGeckoといった、各ブラウザが独自のエンジンをiOS上で利用 できるようƒ q Chrome iOS Browser on Blin¡ q https://blogs.igalia.com/gyuyoung/2024/08/08/chrome-ios-browser-on-blinkk q IgaliaによりChrome iOSのBlink移植も進みそう
23. ブラウザは今後どうなっていく？ 現在のWebkitとChrome iOSの関係図 Chrome iOS Browser on BlinD F https://blogs.igalia.com/gyuyoung/2024/08/08/chrome-ios-browser-on-blink/
24. ブラウザは今後どうなっていく？ Googleが反トラスト法の訴訟で敗訴 ‘ 司法省及び州によるグーグルの総合検索サービスなどにおける独占に関する訴訟の判š ‘ https://www.jftc.go.jp/kokusai/kaigaiugoki/usa/2024usa/202410us.htmq ‘ グーグルの市場独占を是正する措置を米国司法省が提‚ ‘ 2020年に米国司法省がグーグルを相手取って提起したものの一報が出i ‘ どんな提案があるのかWebに関わるものをピックアッe ‘ Googleは上訴し争っていく予定になっていµ ‘ MozilaからはWebの未来にとって良くない影響を与えると声明がでi ‘ 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のような独立したブラウザの収益の根本的な見直しが発生し、ブラウザとブラウザエンジンの競争を損なう 可能性にある ‘ AppleやMozilaにデフォルト検索エンジンに設定する費用の支払いの停u ‘ Chrome,Androidの所有・管理する権利を放棄、もしくは売 2024年は政治がブラウザベンダー、そしてWebへ影響を与えるニュースが続いた
25. ブラウザは今後どうなっていく？ 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.htmq ‰ Linux Foundation Announces the Launch of Supporters of Chromium-Based Browser† ‰ https://www.linuxfoundation.org/press/linux-foundation-announces-the-launch-of-supporters-of- chromium-based-browser† ‰ Chromiumエコシステム内のオープン開発に資金を提供し、プロジェクトを強化することを目Á ‰ Supporters of Chromium-Based Browsersの設立も同時に発“ ‰ Google、Meta、Microsoft、Operaなどが支援 2025年はブラウザを取り巻くエコシステムの変化として大きなチェックポイントとなりそう
26. そのほか(入りきらなかった)
27. そのほか Frontend Toolsの変化と発展 t Frontend Toolsの全部入り化が進み、人気を得た2024~ t Lint,Bundle,Format,Parseが1つのツール‚ t Vite(rolldown),Biome,Deno, y t Storyboo t Test,UI表示,Figma連‡ t JS0/JSSugar構想の立ち上¿ t https://docs.google.com/presentation/d/1ylROTu3N6MyHzNzWJXQAc7Bo1O0FHO3lNKfQMfPOA4o/edit? pli=1#slide=id.g30432c5cd9c_2_€ t JS エンジンへの機能追加が増え、実装負荷が上がっていs t Frontend Toolをみんな使うので全部ネイティブで実装しなくてもいいのかもしれな8 t JS0: エンジンが実装する標Ä t JSSugar: ツールが実装する標Ä t webpackやOXCのメンテナーがTC39に加 t これからエンジンとツールで標準化された機能が分離していくかもしれない
28. そのほか Frontend Toolsの変化と発展 Language Evolution P.5より https://docs.google.com/presentation/d/1ylROTu3N6MyHzNzWJXQAc7Bo1O0FHO3lNKfQMfPOA4o/ edit?pli=1#slide=id.p
29. そのほか 生成AIでデザインとコーディングの連携が進んだ s 生成AIでデザインとコーディングの連携が進んd s Figma A s v0にFigma連携が入り、デザインとコードの生‘ s Working with Figma and custom design systems in vˆ s https://vercel.com/blog/working-with-figma-and- custom-design-systems-in-vˆ s Figmaとエディタが組み合わさったようなツールの登F s Onlook – Cursor for Designerw s https://onlook.com/jac s 任意のデザインシステムやコンポーネントライブラリの読み込 み機能の追加も近いらし& s 今後デザインシステムがあることが学習データとしての優位性が生 まれるかもしれな& s デザインシステムを作る大きな理由の1つになる可能性も
30. まとめ
31. まとめ ƒ 2024年にBaselineの整備が進ん5 ƒ Web Platform Status dashboardで機能を網羅敵に把握し、Baselineで使用の可否を判断できるよう‹ ƒ 課題もでてきたHeadless UIとどのように向き合っていくのw ƒ 2025年にOpen UIのGlobal Design Systemは進むのw ƒ Web Componentsは発展はどのように変わるのだろうw ƒ ブラウザベンダーと政治の関係はどうなるのだろうw ƒ 2025年はブラウザを取り巻くエコシステムの変化として大きなチェックポイントになる可能性t ƒ Frontend ToolsはJS0/JSSugarによりどんな発展を遂げるのw ƒ 生成AIの発展はデザインとコーディングの連携分野でまだまだ発展しそう
32. おわり