Cybozu Frontend Monthly #63

イベント概要

サイボウズフロントエンドマンスリー は、サイボウズ社内で行っているフロントエンド情報共有会「フロントエンドウィークリー」の公開版です。

その月に気になったフロントエンドの情報を、サイボウズのフロントエンドエンジニアのメンバーが共有していきます。

このイベントのハッシュタグは #サイボウズフロントエンドマンスリー です。

開催日

2025年10月28日

イベントページ

https://cybozu.connpass.com/event/373211/

配信URL

https://www.youtube.com/watch?v=ksg_3KVxYLY

メンバー

---

コンテンツ

👀 Notable Articles

Browserslist での Baseline サポートなど

• 共有者: @mugi_uno

機能に対するブラウザサポート状況の指標である Baseline ですが、 Browserslist のクエリ構文でのサポートが追加されました。 例として、 “baseline widely available” とすれば Widely Avaiable が対象となります。
https://web.dev/blog/browserslist-supports-baseline?hl=en

これを利用する形で、最近では Next.js でのサポートブラウザの指定も Baseline Widely Available が対象となりました。
https://github.com/vercel/next.js/pull/84401

世の中的に Baseline を採用したという事例を聞くようになってきました。

サイボウズでも、kintone のフロントエンドの機能選定基準として 最近 Baseline Widely Avaiable を採用し、以下のブログで紹介しています。
https://blog.cybozu.io/entry/practical-baseline

Framer が Rolldown を採用

• 共有者: @nus3

How Framer reduced LCP using Rolldown
https://voidzero.dev/posts/case-study-framer-rolldown

• Framer というノーコードで Web サイトを作るプロダクト
• バンドルには esbuild を使っていたが、プロダクトに合わせたチャンク分割の最適化ができていなかった
• 結果として LCP に悪影響が出ていた
• チャンク分割を調整できる Rollup や Parcel を検討したが、ビルド速度が esbuild に匹敵するものがなかった
• VoidZero と連携し Rolldown を採用、VoidZero と連携
  • Framer で必要な機能をリクエスト、VoidZero 側は優先的にそのリクエストに対応
• Rolldown に minShareCount オプションを追加
• Rolldown を採用することで大規模なウェブサイトでは LCP が 41%も削減
• Framer のビルドサイト全てに Rolldown が採用

What’s coming in ESLint v10.0.0

• 共有者: sajikix

https://eslint.org/blog/2025/10/whats-coming-in-eslint-10.0.0/

eslint の v10 に盛り込まれる機能とそのリリースプランが発表されました。

exlint v10 における破壊的な変更として大きいのは以下の 2 つでしょう。

• Node のサポートバージョンが v20 からになる
• eslintrc(旧式の設定ファイル)が完全に使えなくなる

特に eslintrc(旧式の設定ファイル)が完全に使えなくるのは注意が必要そうです。現在の v9 間はESLINT_USE_FLAT_CONFIGオプションをfalseにすることで旧式の設定ファイルを利用できていましが、v10 からは完全に利用できなくなります。

最近はメジャーな eslint の Plugin なども FlatConfig に対応しているので、対応ができていない方はこれを機に移行を検討できると良さそうです。

それ以外にも以下のようなアップデートが見込まれています。

• recommendedのセットが更新される
• eslint rule を作成するときに利用する context オブジェクトの機能で非推奨なものがなくなる
• SourceCode メソッドの削除
• etc…

リリースとしては 2025 年 11 月にアルファ版が公開される予定で、最終リリースは 2026 年 1 月を予定しています。

🗓 Monthly Articles

※AI によって整理・要約されています。

📖 Framework, Library

• Behind The Scenes of Bun Install
  • Bun のパッケージインストールが高速な理由を解説。システムコールの最小化やキャッシュフレンドリーなデータレイアウトなど、システムプログラミング的なアプローチで最大 25 倍の高速化を実現。
• React 19.2
  • React 19.2 がリリース。<Activity /> コンポーネント、useEffectEvent の stable 化、Partial Pre-rendering などの新機能を搭載。
• Middleware in React Router
  • React Router v7.9.0 で追加された middleware 機能を紹介。ネストされたルート間でのコンテキスト共有や認証チェックの実装が可能に。
• pnpm v10.17.0
  • minimumReleaseAgeExclude で @eslint/* のようなワイルドカード指定がサポート。
• Yarn: add minimumReleaseAge
  • Yarn に minimumReleaseAge 機能が追加予定。新しく公開されたパッケージのインストールを遅延させることでセキュリティを向上。
• 共同編集アプリが作れる新しい JS ライブラリ「Loro」を紹介
  • Google Docs のような共同編集機能を実装するための JavaScript ライブラリ Loro を紹介。リストの並び替えやツリー構造の編集もサポート。
• Web Codegen Scorer
  • LLM が生成したフロントエンドコードの品質を評価するツール。ビルド成功有無、a11y、セキュリティ、ベストプラクティスをチェックし、自動修復も試みる。
• React Router RSC Framework Mode Preview
  • React Router v7.9.2 で React Server Components (RSC) のプレビューサポートが追加。Vite プラグインを通じて RSC 機能を利用可能に。
• Quiet UI: My Creative Outlet
  • Web Components ベースの UI ライブラリ Quiet UI について作者が解説。ElementInternals や Popover API など最新機能を実験的に採用。
• Storybook is going ESM-only
  • Storybook v10 で ESM-only に移行。パッケージサイズが 15%削減され、モジュール関連のバグも減少。
• Zenn 記事をより直感的に書ける！〜 WYSIWYG エディタのすゝめ 〜
  • Zenn CLI で使えるリッチエディタ（WYSIWYG）を作成した話。リアルタイムの Markdown 変換やドラッグ&ドロップでの画像アップロードなどに対応。
• 小手先に見えるテクニックでも、実は React 的に考えられる
  • React の key prop を使ったテクニックを解説。コンポーネントの状態リセットなどを宣言的 UI の観点から考察。
• Playwright Test Agents
  • AI を活用した Playwright のテストツール群が登場。Planner、Generator、Healer の 3 つのエージェントが自動的にテストプランの作成、テストコード生成、テスト修復を実行。
• Next.js 16 (beta)
  • Next.js 16 Beta がリリース。Turbopack の安定化、ファイルシステムキャッシング、React Compiler サポート、React 19.2 機能などを搭載。
• Announcing Vite+
  • Vite を拡張した統合開発ツールチェーン Vite+ を発表。vite test、vite lint、vite format などのコマンドで統一的な開発体験を提供。2026 年初頭に public preview 予定。
• Remix 3 発表まとめ - React を捨て、Web 標準で新しい世界へ
  • Remix Jam 2025 で発表された Remix 3 の概要。Web 標準にフォーカスした新しいアプローチを採用。
• How Framer reduced LCP using Rolldown
  • Framer が esbuild から Rolldown に移行することで LCP を最大 41%改善した事例。高度なチャンク分割機能により大幅なパフォーマンス向上を実現。
• Introducing the React Foundation
  • React と React Native を Meta から独立させ、React Foundation を設立する計画を発表。Amazon、Meta、Microsoft、Vercel などが理事会メンバーとして参加。

⚡️ Services

• Our plan for a more secure npm supply chain
  • GitHub が npm のセキュリティ強化計画を発表。granular access tokens の有効期限を 90 日に変更、classic token の廃止、TOTP を廃止してフィッシング耐性のある MFA のみをサポート。
• Strengthening npm security: Important changes to authentication and token management
  • npm のセキュリティ改善として、書き込み可能なアクセストークンの有効期限短縮、classic token の失効、TOTP 二要素認証の段階的廃止を実施。
• npm-security-best-practices
  • npm 運用のセキュリティベストプラクティスをまとめたリポジトリ。依存関係の固定、権限モデル、trusted publishing などを解説。
• Chrome DevTools (MCP) for your AI agent
  • AI コーディングアシスタント向けに Chrome DevTools の MCP サーバーがプレビュー公開。AI エージェントがブラウザを直接デバッグ可能に。
• Chrome DevTools MCP で AI エージェントのフロントエンド開発をサポートする
  • Chrome DevTools MCP を使用して AI エージェントがブラウザを自動操作し、コンソールログやネットワークログを取得する方法を解説。
• GitHub Copilot CLI is now in public preview
  • GitHub Copilot CLI が公開プレビューとしてリリース。ターミナルから AI を活用したコーディング支援が可能に。
• Pull request “Files changed” public preview now supports commenting on unchanged lines
  • GitHub の PR レビューで変更されていない行にもコメントできる機能が追加。レビュー時の柔軟性が向上。
• Codex vs Claude Code: which is the better AI coding agent?
  • Codex と Claude Code の比較記事。エージェント、モデル、価格、ユーザー体験、機能などを詳細に比較。

🖥 Browsers

• A deep dive into Cloudflare’s September 12, 2025 dashboard and API outage
  • Cloudflare のダッシュボードと API の障害についてのポストモーテム。useEffect の第二引数に object を渡してしまい、過剰な API 呼び出しが発生したことが原因。
• WebKit Features in Safari 26.0
  • Safari 26.0 の新機能を紹介。Anchor Positioning、Scroll-driven animations、HDR images、<model> 要素、Digital Credentials API など 75 の新機能を追加。
• Chrome 142 beta
  • Chrome 142 Beta がリリース。新しい CSS 擬似クラス、View Transitions の改善、Interest Invokers などを搭載。
• Browserslist now supports Baseline
  • Browserslist で Baseline がサポート。baseline widely available のような書き方で特定のブラウザ機能セットをターゲットにできるように。
• Interop Feature Ranking
  • Firefox チームが公開した Interop の proposal をランキング付けできるページ。結果は Interop チームに共有される。

💬 Languages

• CSS to speech: alternative text for CSS-generated content
  • CSS の content プロパティに代替テキストを付与する新しいスラッシュ記法について解説。HTML でのテキスト記述を優先すべき理由も説明。
• Temporal API の現在地（2025 年 9 月時点）
  • Temporal API の実装状況や polyfill、課題などを総合的にまとめた記事。2025 年 9 月時点での最新情報を提供。

🤖 Runtimes

• Help Us Raise $200k to Free JavaScript from Oracle
  • Deno が Oracle に JavaScript の商標取消請求を提出。$200,000 のクラウドファンディングを募集中。

📝 Specifications

• Mitigating supply chain attacks
  • pnpm のサプライチェーンセキュリティ機能について解説。postinstall スクリプトの自動実行を無効化する方法など。
• WebDriver BiDi for Interop 2026
  • Interop 2026 の提案として WebDriver BiDi が提出。クロスブラウザテストの課題を解決する新しい双方向ブラウザ自動化プロトコル。
• Standardizing User Intent with Interest Invokers
  • Interest Invokers API について解説。ユーザーの「関心」を異なる入力デバイス間で標準化する提案。Chrome 142 から利用可能。
• Masonry Spec Update and Open Issues
  • CSS Grid Layout Level 3 の masonry layout に関する仕様アップデート。grid-* の命名や row/column の解釈について議論中。
• ISO/IEC 40500:2025 - Web Content Accessibility Guidelines (WCAG) 2.2
  • ISO/IEC 40500 が WCAG 2.2 を採用。WCAG 2.0 を採用していたものから 13 年ぶりの改訂。
• Intent to Ship: Temporal in ECMA262
  • Chrome で Temporal の実装が Ship される予定。日時処理の新しい API が利用可能に。
• Gecko: Intent to prototype: Trusted Types
  • Firefox が Trusted Types のプロトタイプ実装を開始。これで全主要ブラウザが対応することに。
• Next.js 16 以降、デフォルトサポートが Baseline Widely Available に
  • Next.js 16 のデフォルトの browserslist 設定が Baseline Widely Available に変更される予定。
• Online Identity Verification with the Digital Credentials API
  • Digital Credentials API による新しいオンライン本人確認方法を解説。モバイル ID を使って Web ブラウザから安全に本人情報を共有。
• What’s coming in ESLint v10.0.0
  • ESLint v10 の破壊的変更を解説。eslintrc のサポート終了、flat config への完全移行など。2026 年 1 月リリース予定。
• Intent to Prototype: Base Appearance Form Controls
  • Chrome で Base Appearance Form Controls のプロトタイプ実装が開始。フォームコントロールのスタイリングの新時代へ。
• Cap’n Web: a new RPC system for browsers and web servers
  • Cloudflare が開発した新しい RPC プロトコル Cap’n Web を紹介。TypeScript 製でブラウザと Web サーバー間の通信に特化し、双方向呼び出しや関数の参照渡しなどをサポート。

🦆 Others

• React Server Components 備忘録
  • React Server Components (RSC) の詳細な技術解説。図解を含むわかりやすいメモ。
• Release Activity in Canary
  • React の <Activity /> コンポーネントが Canary リリースに追加。状態を保持しつつ表示・非表示を切り替え可能。
• ポケモンカードのキラキラを CSS で再現
  • ポケモンカードのホログラフィック効果を CSS で再現したデモサイト。
• Update on the Next MCP Protocol Release
  • Model Context Protocol (MCP) の次期バージョンについてのアップデート。11 月 25 日リリース予定で、非同期操作やサーバー ID などの新機能を搭載。
• State of JavaScript 2025
  • State of JavaScript 2025 のサーベイが開始。10 月 1 日から回答可能。