--- title: 2025年のWebフロントエンドのふりかえりと2026年 tags: author: [sakito](https://www.docswell.com/user/sakito) site: [Docswell](https://www.docswell.com/) thumbnail: https://bcdn.docswell.com/page/4JQVQN967P.jpg?width=480 description: BuriKaigi 2026 https://fortee.jp/burikaigi-2026 X https://twitter.com/__sakito__ published: January 09, 26 canonical: https://www.docswell.com/s/sakito/ZEY2P7-burikaigi2026 --- # Page. 1 ![Page Image](https://bcdn.docswell.com/page/4JQVQN967P.jpg) BuriKaigi 2026 2025年の
 Webフロントエンドの
 ふりかえりと2026年 @__sakito__ #burikaigi # Page. 2 ![Page Image](https://bcdn.docswell.com/page/K74MNGXMJ1.jpg) 自己紹介 sakito(@__sakito__) サイボウズ株式会社 プロダクトデザイン部 マネージャー プロダクトエンジニア(フロントエンド) マネージャー みんなのデザイン室リーダー フロントエンド技術を追ったり、話すのが好き mozaic.fmのMonthly Ecosystem会に月1でゲスト出演 ep194 Yearly Ecosystem 2025で1年まとめたの話もしています！ # Page. 3 ![Page Image](https://bcdn.docswell.com/page/LJ185DNYEG.jpg) はじめに 話すこと 2025年にあったWebフロントエンドの変化や個人的に注目しているトピックを紹介 2026年のWebフロントエンド動向に関する考察 今後深掘りするためのきっかけの提供 話さないこと 個々の技術的な詳細は話さない React, Vue, Angularなどライブラリやフレームワークの詳細は話さない AIツール周りは他でもいっぱい話されているので、あえて個人的な厳選をしている サプライチェーン攻撃周りはフロントエンド界隈でも多くあったが、載せきれないので割愛 # Page. 4 ![Page Image](https://bcdn.docswell.com/page/GJWZ5Y41J2.jpg) 2025年の年初に予測していたこと 去年はBurikaigi 2025で「2024年のWebフロントエンドのふりかえりと2025年」を話した https://www.docswell.com/s/sakito/Z82RGP-burikaigi2025 2025年の年初に話していたこと Baselineで使用の可否を判断をしていくだろう より便利になった！ Global Design SystemとWeb Componentsの進化に期待 Global Design Systemどこいった... 2025年はWeb Componentsの開発者体験が向上していくか注目したい Web Componentsは引き続きまだ議論が多そう 2025年はブラウザを取り巻くエコシステムの変化として大きなチェックポイントとなりそう 大きな変化があったわけではないが、引き続き注目 今後デザインシステムがあることが学習データとしての優位性が生まれるかもしれない これはそうなった..? かも...? # Page. 5 ![Page Image](https://bcdn.docswell.com/page/4EZ1NX2X73.jpg) アジェンダ Baselineがフロントエンドツールに組み込まれた2025年 ブラウザの多様性は広がるか？ デザインツールと開発ツール そのほか Void ZeroとVercelのフロントエンドツール周りの2025年 Next.js以外の選択肢はどうなる？ まとめ # Page. 6 ![Page Image](https://bcdn.docswell.com/page/Y76L84VPJV.jpg) Baselineがフロントエンドツールに 組み込まれた2025年 # Page. 7 ![Page Image](https://bcdn.docswell.com/page/G7519QDPE4.jpg) Baselineがフロントエンドツールに組み込まれた Baselineのおさらい Baselineとは？ Safari,Chrome,Edge,Firefoxのブラウザの互換性のレベルを表したもの MDNやCan I Useにラベルとして表示されている W3Cも WebDXコミュニティが管理し、データはweb-platform-dx/web-featuresでOSSとして管理されている Baselineの3つの意味 Limited available 対象ブラウザの一部で利用可能な機能 Newly available 対象ブラウザの最新安定版で利用可能になった機能 Widely available Newly availableから2.5年(30ヶ月)以上経過した機能 # Page. 8 ![Page Image](https://bcdn.docswell.com/page/9J212P8Z7R.jpg) Baselineがフロントエンドツールに組み込まれた ツールBaselineが組み込まれた 2025年からBrowserslistがBaselineの形式をサポート Browserslistとは？ どのブラウザをサポートするか宣言するためのツール 従来は ”last 2 versions”, “> 1%” など... “baseline Widely available” や "baseline 2024" と記述可能に これでBaselineを判断軸にブラウザターゲットを設定できる BabelやwebpackなどBrowserslistを基準にしているツールが参照可能に
 さまざまなツールがBaseline基準で判断できるように Vite 7 https://vite.dev/blog/announcing-vite7 ビルドターゲットが ”baseline-widely-available” に変更 ESLint @eslint/css,html-eslint 'use-baseline' ルールでBaselineに対応 StyleLint stylelint-plugin-use-baseline VS Code プロパティにhoverするとBaselineのサジェストがでるように 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 // browserslistの従来の書き方 { "browserslist": [ "> 0.5%", "last 2 versions", "Firefox ESR", "not dead", "not op_mini all" ] } // Baselineでの記述 { "browserslist": [ "baseline Widely available", "baseline 2024" ] } # Page. 9 ![Page Image](https://bcdn.docswell.com/page/DEYZY56N7M.jpg) Baselineがフロントエンドツールに組み込まれた Baselineを信じ過ぎには注意... Baselineのステータスはあくまで判断材料の一つ。関連APIの対応状況は個別に見る必要がある View Transitionsの事例 View TransitionがNewly Availableになっている(SPAのView Transitionは全ブラウザが対応) @view-transitionはLimited Availabilityになっている(MPAのView TransitionはFireFoxが未対応) View TransitionsのすべてがNewly Availableとなっている状態ではない ステータスが変わる可能性もありうる 昨今のCSSやHTMLは複数の機能群を表したものが増えている <dialog>, HTML popover, CSS anchor positioning どれかのステータスだけ見て、すべてのAPIが対応したと判断はしづらい状況 Web platform features explorerやMDNで詳細を見にいくことも考えよう # Page. 10 ![Page Image](https://bcdn.docswell.com/page/VJN3PNZVJ8.jpg) Baselineがフロントエンドツールに組み込まれた Web platform features explorer https://web-platform-dx.github.io/web-features-explorer/ 各BaselineのステータスやBaseline Widely Availableなどにステータス変更になった時期を知れる RSSもある # Page. 11 ![Page Image](https://bcdn.docswell.com/page/YE993RZVE3.jpg) Baselineがフロントエンドツールに組み込まれた Baselineの時系列と2026年 2023年 Baselineの取り組みがはじまった 2024年 Baselineに必要なデータを揃えたり、基盤を作っていた Web Platform Status dashboardなどで可視化ができるようになった https://webstatus.dev/ 2025年 ESLintやビルドツールなどのフロントエンドツールにBaselineを基準とした仕組みが導入された ツールによる自動確認が可能になってきた 2026年のこれから ブラウザのバージョンで基準だけではなく、Baselineを基準に技術判断していくだろう Baselineのスタート Baselineの基盤作り Baselineをツールで活用 Baselineを軸に技術判断していくだろう 2013年 2014年 2025年 2026年 # Page. 12 ![Page Image](https://bcdn.docswell.com/page/GE89MW147D.jpg) Baselineがフロントエンドツールに組み込まれた Baselineを判断に至る経緯も含めたサイボウズの事例 サイボウズが実践するBaselineを用いた持続可能なブラウザサポートのご紹介 https://web.dev/case-studies/cybozu-baseline?hl=ja # Page. 13 ![Page Image](https://bcdn.docswell.com/page/LELW3NQVJR.jpg) ブラウザの多様性は広がるか？ # Page. 14 ![Page Image](https://bcdn.docswell.com/page/4JM9DX1NEW.jpg) ブラウザの多様性は広がるか？ Chromeの売却の棄却とスマホ新法 2025年9月にGoogleがChromeやAndroidを保持することは認 められる判決が出た Google will not be forced to sell off Chrome or Android, judge rules in landmark antitrust ruling https://www.cnn.com/2025/09/02/tech/googleantitrust-ruling-chrome-android これにより2026年にChromeがどこかに買収される可能性は低 くなった 検索データや検索エンジン周りで裁判はまだ続くらしい 2025年 12月に日本でもスマホ新法がスタート EUではすでに行われているもの これによりブラウザエンジンの固定も禁止された 2026年にiOSでもwebkit以外のブラウザエンジンが増える かもしれない？ しかし、下記の記事によると、なかなか難しいらしい... Appleの主要な戦術が、日本のスマホ法によるブラウザ競 争の改善を阻む可能性について https://open-web-advocacy.org/ja/blog/ how_apples_key_tactic_could_prevent_japans_smartp hone_act_from_improving_browser_competition/ # Page. 15 ![Page Image](https://bcdn.docswell.com/page/PJRG4NL4E9.jpg) ブラウザの多様性は広がるか？ 新しいブラウザエンジン周りも動きがでてきそう Lady bird https://ladybird.org/ Blink、WebKit、Geckoのコードを使用しないで再実装している新しいブラウザエンジン 2025年にWeb標準技術が使えるか測るテストであるweb-platform-tests(WPT)の準拠率が90%前後に 参照：https://x.com/awesomekling/status/1974781722953953601?s=20 2026年にアルファ版をリリース予定 Servo https://servo.org/ Rustで再実装しているブラウザエンジン 2012年からMozilaか発でPJはあったが、止まっていたのを、2023年から再開している 2025年は0.0.1がリリースされ、GmailやGoogle Chatのようなサイトも一部動くようになってきている 参照：https://servo.org/blog/2025/05/09/this-month-in-servo/ Nova https://trynova.dev/ 新しくRustでJavaScript エンジン 2025年にJavaScriptが動くか測るテストのTest262の準拠率は77%を超えているらしい 参照：https://trynova.dev/blog/worked-for-the-internet # Page. 16 ![Page Image](https://bcdn.docswell.com/page/PEXX2NWZEX.jpg) ブラウザの多様性は広がるか？ AI2025年はAIにまつわるブラウザがリリースされた × ブラウザの新しい体験 Dia Browser https://www.diabrowser.com/ Arcを作っていた会社が出したブラウザ Atlassianが買収をしたことでも2025年は話題に ChatGPT Atlas https://chatgpt.com/ja-JP/atlas/ ChatGPTが出したブラウザ Comet Browser https://www.perplexity.ai/comet Perplexityが出したブラウザ Disco https://labs.google/disco Google Labsが出したブラウザ まだUSでしか試すことができない 現状はChromiumベース(違ってたらすいません) 2026年は利用者が増えて、ここにまつわるWeb技術の発展もおきる？ # Page. 17 ![Page Image](https://bcdn.docswell.com/page/3EKWMNVVED.jpg) デザインツールと開発ツール # Page. 18 ![Page Image](https://bcdn.docswell.com/page/L731YZQQJ5.jpg) デザインツールと開発ツール Figma Makeの発表 Config 2025でFigma Make(Make)が発表された Lovable,v0などは2024年からすでにあった Makeにより裾野がかなり広がった デザインと開発フローについても変化が起きている Makeで作成し、デザインファイルに変換し編集 Makeで作成したものを開発で流用し編集 Makeにnpmを読み込ませる機能もbetaで出ている コンポーネントライブラリをソース毎渡せる (まだ弊社は降りてきてなくて試せていない) Figma MCPも2025年に増えた デザインと開発の分業も徐々に変わってきている 0→1やディスカバリーフェーズでは有用 デザインを実装してレビューをもらうまでの速度UP しかし、まだUI周りは上手くいかない部分も多い 特に運用フェーズ Figma Makeを探る https://help.figma.com/hc/ja/articles/31304412302231-Figma-Make%E3%82%92%E6%8E%A2%E3%82%8B # Page. 19 ![Page Image](https://bcdn.docswell.com/page/87DX5R9WEG.jpg) デザインツールと開発ツール デザインと開発を合わせたエディタの登場 Fusion https://www.builder.io/fusion builder.ioが作っているもの Pencil https://www.pencil.dev/ Cursor + Designのようなもの onlook https://www.onlook.com/ Cursor + Designのようなもの CursorのVisual Editor for the Cursor Browser https://cursor.com/ja/blog/browser-visual-editor Cursor内でブラウザを使ってデザインを編集できる 2026年はエディタ上での開発体験そのものが変わるかも？ デザインもコンポーネントライブラリやドキュメントなどの
 基本となる整備があってこそ活用できるものが増えるき傾向 重要性はさらに増すだろう # Page. 20 ![Page Image](https://bcdn.docswell.com/page/VJPPGWZXJ8.jpg) そのほか # Page. 21 ![Page Image](https://bcdn.docswell.com/page/2EV268W3EQ.jpg) Void ZeroとVercelのフロントエンドツール周りの2025年 Void Zero 2025年はVoid Zeroが出す高速なツールチェインが揃ってきた Vite内部がRustベースのRolldownに置き換わった OxcがRustでLintやFormatツールを出している Oxlint https://oxc.rs/docs/guide/usage/linter.html Oxfmt https://oxc.rs/blog/2025-12-01-oxfmt-alpha.html OxlintとOxfmtはまだ正式なv1ではないが、2026年には活用できそう 有料版のVite+が2025年は発表された https://viteplus.dev/ まだ全貌は不明だが、Devtoolsなども含んでいるそう Vercel TurbopackがStable版に NuxtLabsがjoin https://vercel.com/blog/nuxtlabs-joins-vercel そのほかにAI周りの取り組みが多くされている https://voidzero.dev/ https://viteplus.dev/ # Page. 22 ![Page Image](https://bcdn.docswell.com/page/57GRN5DYEL.jpg) Next.js以外の選択肢はどうなる？ Next.js疲れが話題に何度か出た2025年 cache周りは 'use cache' などが使えるようになり落ち着いてきたが... どこからがNext.js、どこからがReactか分かりづらいとの声も増えてきた 'use cache' , 'use server', 'use client'などのディレクティブが増えてきた 標準化されていない独自のネームスペース RSCやApp Routerなどの複雑性 Tanstack Start Tanstack QueryやRouterをもっているTanstackがフレームワークのv1 Viteがベースとなっている いまはRC版だが、近々メジャーリリース予定なので、2026年には利用ケースが増えるかもしれない Remix Shopifyのフレームワーク 従来のRemixはReact Router v7に機能が入った Remix v3として新しいアーキテクチャを模索中 2026年はどうなるだろう...わからない。React Router v7としては使えるので利用ケースも増えてきた 2026年はNext.js以外のフレームワークの利用ケースが増えていくのだろうか？？ React + Viteの形式のようなフレームワークではない構成も増えてきた HonoやAstroのようなReactを使わない手段もある # Page. 23 ![Page Image](https://bcdn.docswell.com/page/4EQVQZ16JP.jpg) まとめ # Page. 24 ![Page Image](https://bcdn.docswell.com/page/KJ4MN3RME1.jpg) まとめ 2025年はBaselineがフロントエンドエコシステムのツール経由で活用できるように Baselineとフロントエンドツールで技術判断を自動化できるように 技術判断はブラウザバーションベースからBaselineの年数やステータスベースへ ブラウザの多様性は増えるのか？AIブラウザによる発展は起きるのか デザインと開発の体験は変わっていくのか Figmaは今度どういう発展をしていくのか VS CodeやCursorなどのエディタの体験は変わるのか UIを作るなかにあるコミュニケーション部分がどのように変化するだろうか Void Zeroが出すツール群を使った高速な開発体験が実現的に LintやFormatも含めて移行がありそう Vite+もたのしみ Next.jsはどうなるだろうか？Remixは落ち着くのか？Tanstack Startが大本命になるか？ # Page. 25 ![Page Image](https://bcdn.docswell.com/page/LE1851QY7G.jpg) おわり