Cybozu Frontend Monthly #61

タイトル画像

イベント概要

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

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

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

※フロントエンドウィークリーとは

毎週火曜の 17:00 〜 18:00 で社内向けに行っているフロントエンドの気になる記事を紹介する会です。
2016年3月15日から行われています。

ZennのPublicationにてウィークリーのまとめを投稿していますので、ぜひこちらもご覧ください。 https://zenn.dev/p/cybozu_frontend

開催日

2025年08月26日

イベントページ

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

配信URL

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

メンバー

@sakupi01 @sakupi01
@sajikix @sajikix
@k1tikurisu @k1tikurisu
@nus3_ @nus3_

コンテンツ

👀 Notable Articles

State of CSS 2025

CSS の利用状況などに関してのサーベイである State of CSS の 2025 年度版が公開されました。

個人的な注目ポイントは以下の通りです。State of CSS 2024 との比較を交えた感想も含めています。

Vitest v4 から VRT ができるように

Vitest の Browser Mode を使って VRT ができる toMatchScreenshot のプルリクがマージされました。このtoMatchScreenshotは v4.0.0-beta.4 から利用可能です。

このプルリクの差分には以下のようなtoMatchScreenshotの使い方の例が書かれています。

// basic usage, auto-generates screenshot name
await expect.element(getByTestId("button")).toMatchScreenshot()
// with custom name
await expect.element(getByTestId("button")).toMatchScreenshot("fancy-button")
// with options
await expect.element(getByTestId("button")).toMatchScreenshot({
  comparatorName: "pixelmatch",
  comparatorOptions: {
    allowedMismatchedPixelRatio: 0.01,
  },
})
// with both name and options
await expect.element(getByTestId("button")).toMatchScreenshot("fancy-button", {
  comparatorName: "pixelmatch",
  comparatorOptions: {
    allowedMismatchedPixelRatio: 0.01,
  },
})

Vitest では、他にも Browser Mode を使って、React Server Components（RSC）の Unit テストを、実際の RSC のようにサーバーサイドとクライアントサイドでそれぞれコンポーネントをレンダリングできるプラグインが公開されました（公式ではありませんが）など、Vitest の Browser Mode の活用が進んでいます。

Announcing TypeScript 5.9

TypeScript 5.9 がリリースされました。主な変更点は以下の通りです：

そのほか、パフォーマンスの最適化や、TypeScript 6.0 のビジョンについても触れられています。

Oxlint Type-Aware Preview

Oxc Lint が type-aware な linting(= TS の型情報を利用する Lint)機能のプレビューを公開しました。利用する場合はoxlint-tsgolintをインストールし、最新版の oxclint に--type-awareオプションをつけるだけで利用可能です。

これにより各プロジェクトで試験的に導入した際に大幅に高速化したとしています。

このoxlint-tsgolintの元になっているのは、typescript-eslint チームが作成していた 「ts-goを利用した TypeScript のリントツール PoC」として作成されたtsgolintです。その後 typescript-eslint チームはこの PoC の開発にリソースを割くことを中断しましたが、Oxc のチームがこのリポジトリをフォークし、利用しています。

そのためtsgolint同様 「typescript-go を fork して patch を当てている」などの問題も引き継いでしまっています。これに対して ts-go で go の API を公開してほしいという要望も出ており、今後も ts-go と周辺エコシステムの関係は注目していきたいです。

🗓 Monthly Articles

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

📖 Framework, Library

⚡️ Services

🖥 Browsers

💬 Languages

🤖 Runtimes

📝 Specifications

🦆 Others