こんにちは！サイボウズ株式会社フロントエンドエンジニアのsaku (@sakupi01)です。
はじめに
サイボウズ社内では毎週火曜日にFrontend Weeklyと題し「一週間の間にあったフロントエンドニュースを共有する会」を開催しています。
今回は、2025/03/25のFrontend Weeklyで取り上げた記事や話題を紹介します。
取り上げた記事・話題
CSS Form Control Styling Level 1 First Public Working Draft
CSS Form Control Styling Level 1 の First Public Working Draft が公開されました。
長年OSやブラウザ間で一貫したフォームコントロールのスタイリングや拡張を行うことは難しいとされてきましたが、近年それを Web 標準側で解決しようという動きが出てきており、それを反映する1stステップとなるモジュールです。
Intent to Experiment: Speculation rules target_hint field
Speculation Rules APIにtarget_hintフィールドを追加するIntent to Experimentです。
この機能は、プリレンダリングされたページが最終的にどのターゲットで表示されるかを指定できるようにするものです。現時点では_selfサポートされており、_blankが指定されたリンクの場合はプリレンダリングが無駄になっていました。
target_hintフィールドに_blankを指定することで、ターゲットが_blankに指定されている場合のプリレンダリングにも対応できるようになる予定です。
Lynx: Unlock Native for More - Lynx
ByteDanceが開発したクロスプラットフォームフレームワーク「Lynx」がオープンソース化されました。
技術的には、HTML/CSSでネイティブUIを構築できることが特徴としてあげられます。
LynxはByteDance社内で広く活用されており、今回のオープンソース化によって、より多くの開発者がクロスプラットフォームアプリ開発に取り組めるようになることが期待されています。
Introducing command and commandfor
今週リリースされたChrome 135 Stableからサポートされる、commandとcommandfor属性に関する概要記事です。
command/commandfor属性は、現時点では<button />に対して付与可能で、ボタンをクリックした際に関連する要素に対してCommandEventを発火できます。
Model Context Protocol の現在地
Anthropicが2024年11月に発表したクライアント-サーバー間通信のプロトコルであるModel Context Protocol(MCP)について解説した記事です。
MCPはLLMアプリケーションにおいて外部データの参照やツール呼び出しなどのインテグレーションを標準化することを目的としています。プロトコルの仕様策定やエコシステムはオープンコミュニティで開発されており、各言語のSDKもオープンソースで提供されています。
Let's call these little crabs "Rstack", which is short for Rspack stack.
Rspack, Rsbuild, Rspress, RslibなどのRspack stackのことをRstackと呼ぶそうです。
🚀 Playwright 1.51 is here!
Playwright 1.51がリリースされました。
エラーが出た際に、エラーメッセージとその修正に役立つコンテキストを含むプロンプトをコピーできる機能などが追加されました。
The Clean ArchitectureがWebフロントエンドでしっくりこないのは何故か / Why The Clean Architecture does not fit with Web Frontend
クリーンアーキテクチャがWebフロントエンド開発において、その原則が必ずしも適合しない理由についての考察をした@t_wada 氏の発表です。
フロントエンドとバックエンドのアーキテクチャの違いや、それぞれの設計における考慮事項についても触れられています。
Enable moveBefore in experimental releases
ReactのExperimentalリリースにおいて、 DOM APIであるmoveBefore() のサポートを有効化するフラグが追加されました。
ESLint v9.22.0 released - ESLint - Pluggable JavaScript Linter
ESLint v9.22.0がリリースされました。主な変更点として、defineConfig()とglobalIgnores()が追加されました。
特に、defineConfig()の利用で、Flat Config設定ファイルにおいてextendsを指定できるようになります。
CSS Modules を便利に使うためのツールキット作った
CSS Modulesのコードジャンプを可能にするなどのための補助ツール「happy-css-modules」の上位互換となるツールとして、CSS Modules Kitが公開されました。
TypeScript 5.8
TypeScript 5.8が公開されました。一部機能を抜粋します：
- Granular Checks for Branches in Return Expressions
- Support for require() of ECMAScript Modules in
--modulenodenext
--modulenode18 - The -
-erasableSyntaxOnlyOption
そのほか、パフォーマンスの向上のアップデートなども含まれています。
VSCodeに新機能「Copilot Vision」プレビュー版が登場。モックアップ画像を読み込ませてHTML/CSSを作成、エラーのスクリーンショットから分析を依頼など
GitHub Copilotに画像認識機能「Copilot Vision」のプレビュー版が搭載されたことを紹介する記事です。
これにより、画像からのHTML/CSS生成や、エラー画面のスクリーンショットによる分析依頼が可能となり、開発の効率化が期待されます。
A 10x Faster TypeScript
TypeScript Compiler を TypeScript から Go に書き換えてネイティブポートすることで10倍早くする記事です。
以下のDiscussions になぜGoを選定したのかなどの詳細な理由が書かれています。
社内では、ts-eslintではすでに Go 版を使ってみようといったIssueが立ってることも取り上げられました。
Deep Dive into deno lint plugin
Deno 2.2 の目玉機能として追加された deno lintのプラグイン対応の背景に関する深掘りです。
Multiple tags in this action are compromised · Issue #2463 · tj-actions/changed-files
tj-actions/changed-filesというGitHub Actionsでファイルの差分を得るためのアクションツールのすべてのバージョンにおいて、マルウェアが混入していた問題です。
社内では、tj-actions/changed-filesはSHA指定で利用していたので特段の被害は出ませんでしたが、全てのタグが書き換えられているとのことなので注意が必要です。
hygen.io domain is expired / documentation not available
scafford ツールであるhygenのドキュメントサイトであったhygen.ioのドメインが切れており、メンテナンスも2年近くされていなかったようです。
Release Notes for Safari Technology Preview 215 | WebKit
Safari 18.5 のリリースノートです。Interop 2025 の Focus Areas の一つである Anchor Positioning のサポートや、Trusted Types が注目の変更点として挙げられます。
- Scroll Driven Animations
text-wrap-style: pretty- CSS Anchor Positioning
- Trusted Types
- File System WritableStream API
Valibot v1 - The 1 kB schema library
軽量なスキーマバリデーションライブラリであるValibot のv1がリリースされました。
記事は、その生い立ちやこれまでを振り返るものになっています。
styled-components Thank you - Open Collective
ReactのCSS-in-JSライブラリであるstyled-componentsがメンテナンスモードに入るという発表です。
メンテナのEvan Jacobs氏は、ReactのAPI変更やCSS技術のトレンドの変化が理由だと述べています。
今後は既存ユーザーへのサポートとバグ修正に注力し、新規プロジェクトでの採用は推奨しないとのことです。
microsoft/playwright-mcp: Playwright Tools for MCP
Playwrightのブラウザ自動操作化機能を利用して、Model Context Protocol (MCP) サーバーを構築するためのツールを提供する、playwright-mcpが公開されました。
CVE-2025-29927 | Next.js
以前報告されていた、Next.js のキャッシュポイズニングに関する脆弱性（CVE-2024-46982）の改修について、不十分との指摘があったことに対して、その修正についての記事です。
この脆弱性ではミドルウェアの実行をスキップすることが可能で、リクエストがルートに到達する前に認証用のCookie検証などの重要なチェックをスキップできます。
そのため、ミドルウェアを使用したセルフホスト型のNext.jsアプリケーションが影響を受けることになりますが、VercelやNetlifyでホストされているアプリケーション、またはstatic exportを使ってデプロイされたアプリケーションでは影響を受けないとのことです。
next startとoutput: 'standalone' を使用するNext.jsアプリケーションに対しては、直ちに最新バージョンへアップデートすることが推奨されています。
関連：Cache Poisoning · Advisory · vercel/next.js
Node just added TypeScript support. What does that mean for Deno?
Node.jsが最近追加したTypeScriptのネイティブサポートについて解説し、Denoが以前から提供しているTypeScript統合と比較している記事です。
それぞれのランタイムにおけるTypeScriptの取り扱い方、特に型チェック、型削除、設定の簡便さ、そしてエコシステムとの連携について主に述べられています。
Denoは、型チェックを実行するtsc、SWCによるトランスパイルが内部的に組み込まれていたり、tsconfig.jsonが不要だったりすることで開発ワークフローを簡素化することに重点を置いているようです。
Oxlint Beta | The JavaScript Oxidation Compiler
Oxlint の Beta 版のリリースがありました。
500 を超えるビルトインルールの追加、パフォーマンス面での大幅な向上がおこなわれ、今後はカスタム ESLint プラグインのサポートや IDE への統合も計画されています。
Announcing Rsdoctor 1.0
Rspack・Webpackエコシステムと互換性のあるビルドアナライザツール「Rsdoctor」の 1.0がリリースされました。
Biome v2.0 beta
Biome v2.0のBeta版がリリースされました。
PluginやDomain機能の追加、import の sort ロジックでの改善が行われました。
Plugin やDomainの詳細に関しては以下のページが参考になります。
Intent to Deprecate and Remove: Deprecate special font size rules for H1 within some elements
HTML5 で導入された Sectioning Contents、特に Outline Algorithm により、レンダリングエンジンの実装ではセクションのネストが深くなるほど Headings の font-size が小さくなるようになっていますが、それを Living Standard では remove しようという動きです。
影響範囲の懸念から、仕様から Outline Algorithm の記述が remove されるだけで、UA スタイルシートは特に変更されない方向で議論は進んでいます。
Chromium 系ブラウザではconsole エラーと Lighthouse スコアへの影響が出るようになるようです。
あとがき
CSS Form Control Styling の First Public Working Draft、アツいですね🎉
Title: CSS Form Styling Module Level 1
Shortname: css-forms
Level: 1
Status: DREAMhttps://github.com/w3c/csswg-drafts/commit/9b62e3fa2097a339df6b79b5e85bf01cf8da4520
Discussion