アクセシビリティツリーを比較する Playwright の Aria snapshots がよさそう

Playwright の Aria snapshots はアクセシビリティツリーを比較することでテストする手法です。アクセシビリティツリーは DOM のスナップショットテストと比較して、外部から見た振る舞いが変わりづらいという利点があります。`.toMatchAriaSnapshot()` メソッドを使ってアクセシビリティツリーのスナップショットテストを行うことができます。

Next.js の "use cache" ディレクティブによるキャッシュ制御

Next.js の App Router はデフォルトでキャッシュされる設計でリリースされました。一方でデフォルトでキャッシュされることに対して不満を持つ開発者も多かったように思います。このようなフィードバックを受けて、Next.js 15 ではいくつかのキャッシュ戦略が変更されました。さらに現在 canary チャンネルで提供されている dynamicIO フラグを有効にすることで、"use cache" ディレクティブを用いてキャッシュを制御できるようになります。

HTML だけで Shadow DOM を構築するための宣言型 Shadow DOM

宣言型 Shadow DOM は `<template>` 要素を使用して Shadow DOM を構築する方法です。宣言型 Shadow DOM を使用することで、従来の JavaScript を使用した Shadow DOM の構築方法と比較して、サーバーサイドレンダリング(SSR)に対応しているため、パフォーマンスの向上や SEO 対策に期待されます。

Chrome の組み込み AI の Summarization API を試してみる

Google では大規模言語モデル(LLM)などの AI モデルをブラウザに直接統合するように設計された、Web プラットフォーム API とブラウザ機能を開発しています。これには Gimini Nano という AI モデルが含まれており、デスクトップパソコンにおいてローカルで実行されるように設計されています。この記事では Summarization API を使用して、文章を要約してみます。

Storybook と Vitest の統合したコンポーネントテスト

Storybook v8.3 以降、ストーリーをテストするためのテストランナーとして Vitest を使用できるようになりました。Vitest を使用することで複雑なセットアップが不要になります。また、推奨されているブラウザモードを使用することで、実際のブラウザでの挙動をより正確に再現できます。