Cybozu Frontend Monthly #57

イベント概要

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

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

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

開催日

2025年04月28日

イベントページ

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

配信URL

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

メンバー

---

コンテンツ

👀 Notable Articles

Node の--experimental-strip-types オプションとその影響

• 共有者: @sajikix

Node.js の v23.6.0 でデフォルトで有効化された --experimental-strip-types オプションによって、(一部制限があるものの) Node.js で直接 TypeScript を実行できるようになりました。

🔗 Node v23.6.0 (Current)

この変更により、周辺のエコシステムでもこの--experimental-strip-typesオプションへの対応が見られました。

TypeScript の --erasableSyntaxOnly オプション

TypeScript 5.8 では新しく --erasableSyntaxOnly というオプションが追加されました。

🔗 The --erasableSyntaxOnly Option

これは enum や namespace などの「型情報を削除するだけでは JS として実行できない TS 独自の構文」でエラーを出すようにするオプションです。デフォルトで有効になった Node.js の --experimental-strip-types オプションの範囲では、このような「TS 独自の構文」を含む TypeScript の実行をサポートしていません。このオプションを有効にすることで、Node.js で実行可能な TypeScript であることをチェックすることができます。

eslint の設定ファイルもライブラリ依存なしに TS で書けるように

以前から ESLint の設定ファイルは TS で書くことができましたが、内部的には設定ファイルを JS に変換するために jiti というライブラリを使用していました。

一方で --experimental-strip-types オプションが利用できる Node 環境(v 22.10.0 以上)では、ESLint の unstable_native_nodejs_ts_config フラグを有効にすると、jiti を使用せずに TypeScript の設定ファイルを直接読み込むことができるようになりました。

🔗 Node.js Native Loading of TypeScript Configuration Files (Experimental)

現在は Experimental フラグですが、Node.js の TypeScript 実行機能に合わせてデフォルトの挙動となっていきそうです。

より TypeScript First な開発へ

--experimental-strip-types オプションの導入自体が TypeScript の流行と浸透によるものであると同時に、このオプションによりさらに TypeScript First な開発は進むことが期待されます。 またその影響として周辺ツールやライブラリも一層 TypeScript の First Support を意識するようになるでしょう。

一例として、最近では ESLint が一部のコアルールを TypeScript にも対応するようにアップデートしています。

🔗 ESLint コアルールの TypeScript 対応について

このようにブラウザ以外の JS ランタイムや周辺ツールでは TypeScript の First Support 化がより進んでいます。一方で TS 独自の構文を含むコードはサポートされなかったりサポートが遅れたりすることもあるため、今後も各ランタイムやツールのサポートを確認しつつ、JS への変換容易性などを意識した TypeScript コーディングが必要となりそうです。

Next.js 15.3 で追加された Rspack のサポート（experimental）の話

• 共有者: @nus3

Next.js 15.3 がリリースされ、Rspack や Turbopack を使ったビルドが可能になりました。 この追加により、15.3 ではビルドする際に以下の 3 つの選択が可能になりました。（アルファ版、experimental を含む）

• webpack （従来通り）
• Rspack （experimental）
• Turbopack （alpha）

リリースノートには、Rspack は公式プラグインではないものの、Rspack チームと連携して進めていくことが記載されています。 Next.js のビルドツールの選択肢が増えることは、利用ケースが広がりそうで良いですね。

また、Rspack に関連して、（まだ WIP の状態ですが）Rstest というリポジトリが公開されました。 https://github.com/web-infra-dev/rstest Vite と Vitest のように、ビルドツールに紐づいたテストツールがあることは、テストが導入しやすくなるので、今後が楽しみです。

社内デザインシステムを MCP サーバー化したら UI 実装が爆速になった

• 共有者: @mugi_uno

Ubie さんによる、社内でのデザインシステムを MCP サーバー化し、UI 実装を効率化した事例です。 Cursor Rules などを使ってコンテキスト情報としてデザインシステムを理解させようと試みても上手くいかなかったものの、これを MCP サーバーとすることで期待した通りの動作が実現できたとのことです。実際には Figma MCP も連携させることで、Figma デザインを元に自動的にデザインシステムのトークンやコンポーネントを活用した UI モックアップが構築されるようです。

ここ一ヶ月ほどですが、この Ubie さんの事例をはじめ、MCP に関する記事やニュースが非常に多く出てきました。

たとえば、Microsoft から公式で Playwright を操作するための MCP が公開され、LLM 経由で気軽にブラウザを操作可能となりました。E2E テストなど、具体的なユースケースがイメージしやすい MCP かと思います。

🔗 microsoft/playwright-mcp

Cloudflare からは、MCP サーバーをリモート利用するためのツールやガイドが公開されています。 これによって、認証がカバーできたり、プレイグラウンドで動作確認が可能となります。

🔗 Build and deploy Remote Model Context Protocol (MCP) servers to Cloudflare

日常の開発ワークフローが大きく変化する礎となる気配もあり、実際に触ってみた人も多いのではないでしょうか。 （例に漏れず、私も触って遊んでいました）

一方で、MCP は新たなセキュリティ面での懸念点でもあり、無闇に使うとリスクも大きくなりそうですね。 そのあたりに関しても非常にわかりやすくまとめて解説されている記事もあり、大変参考になりました。

🔗 MCP サーバーを利用することはセキュリティ的に安全か?

🗓 Monthly Articles

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

📖 Framework, Library

• Lynx: Unlock Native for More - Lynx
  • ByteDance が開発したクロスプラットフォームフレームワーク「Lynx」がオープンソース化され、HTML/CSS でネイティブ UI を構築可能に
• Playwright 1.51 is here!
  • エラー発生時にコンテキストを含むプロンプトをコピーできる機能などが追加されました
• Enable moveBefore in experimental releases
  • React の Experimental リリースで、DOM API のmoveBefore()サポートが有効化されました
• ESLint v9.22.0 released
  • defineConfig()とglobalIgnores()が追加され、Flat Config でextendsが指定可能に
• Oxlint Beta
  • 500 以上のビルトインルールを追加し、パフォーマンスを大幅に向上させた Oxlint Beta 版がリリース
• Announcing Rsdoctor 1.0
  • Rspack や Webpack と互換性のあるビルドアナライザツール「Rsdoctor」の 1.0 版がリリース
• Biome v2.0 beta
  • Plugin や Domain 機能の追加、import のソートロジック改善などを含む Biome v2.0 ベータ版がリリース
• Valibot v1 - The 1 kB schema library
  • 軽量なスキーマバリデーションライブラリ Valibot v1 がリリース、その歴史と開発背景を紹介
• styled-components Thank you
  • React の CSS-in-JS ライブラリ styled-components がメンテナンスモードに入り、新規採用は非推奨に
• Next.js plugin for alternate bundler
  • Next.js に Rspack をバンドラーとして使用できるプラグイン「@next/plugin-rspack」が追加
• Express.js v5.1 Latest Release
  • パフォーマンス改善や res オブジェクトの機能追加などを含む Express.js v5.1 がリリース
• React Trends in 2025
  • RSC と RSF の普及、React フォームの改善、React コンパイラの登場など 2025 年の React トレンドを予測
• State of Vue.js Report 2025
  • Vue.js の現状とエコシステム、開発者サーベイ、今後の展望をまとめた包括的なレポート
• Let’s call these little crabs “Rstack”, which is short for Rspack stack.
  • Rspack、Rsbuild、Rspress、Rslib などのツール群を「Rstack」と呼ぶことが発表
• microsoft/playwright-mcp: Playwright Tools for MCP
  • Playwright の MCP サーバーが公開
• Support Policy | Next.js
  • Next.js のサポートポリシーが公開、メジャーバージョンには「Active LTS」と「Maintenance LTS」の 2 フェーズがあり
• CVE-2025-29927 | Next.js
  • Next.js のキャッシュポイズニング脆弱性に関する修正リリース、ミドルウェアのスキップが可能だった問題を解決

⚡️ Services

• Multiple tags in this action are compromised · Issue #2463 · tj-actions/changed-files
  • GitHub Actions の Changed Files アクションの全バージョンにマルウェアが混入した問題を報告
• hygen.io domain is expired / documentation not available
  • scaffold ツール hygen のドキュメントサイトのドメインが期限切れとなり、約 2 年間メンテナンスされていない状況
• Trapping misbehaving bots in an AI Labyrinth
  • Cloudflare が不適切な AI クローラーやボットを混乱させる「AI Labyrinth」機能を発表、無料プランでも利用可能
• Build and deploy Remote Model Context Protocol (MCP) servers to Cloudflare
  • Cloudflare で MCP を動作させるためのツール群と手順を紹介、認証や連携機能を提供

🖥 Browsers

• Intent to Experiment: Speculation rules target_hint field
  • Speculation Rules API にtarget_hintフィールドを追加し、_blank 指定リンクのプリレンダリングをサポート
• Introducing command and commandfor
  • Chrome 135 でサポートされたcommandとcommandfor属性により、要素間で CommandEvent を発火可能に
• Intent to Deprecate and Remove: Deprecate special font size rules for H1 within some elements
  • HTML5 の Outline Algorithm による見出しサイズの自動調整機能の廃止予定をアナウンス
• Release Notes for Safari Technology Preview 215
  • CSS Anchor Positioning、Trusted Types、Scroll Driven Animations などをサポートした Safari 18.5 の技術プレビュー
• Item Flow, Part 1: A new unified concept for layout
  • WebKit チームによる CSS Grid と Flexbox を統合した新レイアウト概念「Item Flow」の提案

💬 Languages

• TypeScript 5.8
  • 戻り値式の分岐ごとのチェック、ECMAScript モジュールの require()サポート、—erasableSyntaxOnly オプションなどを追加
• A 10x Faster TypeScript
  • TypeScript Compiler を TypeScript から Go に書き換えてネイティブポート化し 10 倍の速度向上を目指す取り組み
• Deep Dive into deno lint plugin
  • Deno 2.2 で追加されたdeno lintプラグイン対応の背景と詳細について解説
• Node just added TypeScript support. What does that mean for Deno?
  • Node.js の TypeScript ネイティブサポート追加を踏まえ、Deno との実装アプローチの違いを解説

📝 Specifications

• CSS Form Control Styling Level 1 First Public Working Draft
  • OS やブラウザ間で一貫したフォームコントロールのスタイリングを可能にするモジュールの初期ドラフトが公開
• A Modern CSS Reset
  • interpolate-size: allow-keywords;を利用したアニメーション改善など、現代的な CSS リセットの新機能を解説
• Minding the Gaps: A new way to draw separators in CSS
  • Microsoft の Edge チームが提案するgap-separatorプロパティで、Flexbox や Grid のギャップに区切り線を描画

🦆 Others

• Model Context Protocol の現在地
  • Anthropic の Model Context Protocol の概要と現状を解説、LLM アプリケーションのインテグレーション標準化を目指す
• Typed Japanese
  • 日本語の文法を型システムとして形式化するプロジェクト、TypeScript の型システムで文法的な正しさを検証
• CSS Modules Kit
  • CSS Modules のコードジャンプを可能にするなどの補助ツール「happy-css-modules」の上位互換
• VSCode に新機能「Copilot Vision」プレビュー版が登場
  • GitHub Copilot に画像認識機能が追加され、モックアップから HTML や CSS 生成、エラー画面の分析が可能に
• The Clean Architecture が Web フロントエンドでしっくりこないのは何故か
  • クリーンアーキテクチャが Web フロントエンド開発に適合しない理由を考察した発表
• フロントエンドテストの与え方
  • フロントエンドのテスト運用における実践的なアプローチを実例を交えて紹介

フロントエンドエキスパートチームについて

https://speakerdeck.com/cybozuinsideout/frontendexpert-team