Frontend Weekly 2025-01-24

2025年1月24日

Chrome 132、Tailwind CSS v4、Vitest v3、Bun v1.1.44、Storybook v8.5、eslint-config-prettier v10、WebDriverIO v9.5.0、Google検索のJavaScript必須化などについて

Table of Contents

Chrome 132

Chrome 132がリリースされた。

https://developer.chrome.com/blog/new-in-chrome-132

Element Capture

Chrome 132では、現在のタブのキャプチャに加えて、要素のキャプチャが可能になった。

https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia

キャプチャ対象

次のようにして、要素をキャプチャすることが出来る。

const stream = await navigator.mediaDevices.getDisplayMedia({
  preferCurrentTab: true,
});
const [videoTrack] = stream.getVideoTracks();
const target = document.getElementById("rt-ElCap");
const restrictionTarget = await RestrictionTarget.fromElement(target);

await videoTrack.restrictTo(restrictionTarget);
video.srcObject = stream;

ただし、キャプチャ対象の要素はスタッキングコンテキストを持っている必要がある。

dialog要素のtoggleイベント

Chrome 132では、dialog要素が開閉した際に発火するtoggleイベントが追加された。また、開閉直前に発火するbeforetoggleイベントも追加された。

dialog.addEventListener("toggle", event => {
  if (event.newState === "open") {
    console.log("Dialog opened");
  }
});

File System APIがAndroidやWebViewでも利用可能に

File System APIは、今までSafariやFirefoxに加えてChromeでもモバイルでは利用出来なかったが、Chrome 132からAndroidでは利用可能になった。

File System API（File System Access API）は、ローカルにあるファイルやディレクトリへのアクセス権のユーザーへのリクエストや、許可されたファイルやディレクトリへの操作を提供するAPI。

https://developer.mozilla.org/en-US/docs/Web/API/File_System_API

const fileHandles = await window.showOpenFilePicker();
const file = await fileHandles[0].getFile();

Tailwind CSS v4

Tailwind CSS v4がリリースされた。

https://tailwindcss.com/blog/tailwindcss-v4

多くの新機能や新たなユーティリティやバリアント、構成の変更などを含んでいる。

構成が変更されているため、そのままバージョンを上げて使うことは出来ない。マイグレーションガイドの一読が必要。

https://tailwindcss.com/docs/upgrade-guide

以下に、一部の新機能を紹介する。

CSS-first configuration

tailwind.config.jsの代わりにCSSファイル内で@themeルールを利用して設定を行うことが出来る。

@import "tailwindcss";

@theme {
  --font-display: "Satoshi", "sans-serif";

  --breakpoint-3xl: 1920px;

  --color-pikachu-100: #f4e66b;
}

@starting-style support

@starting-styleをサポートしたstarting variantが追加された。

<div>
  <button popovertarget="my-popover">Check for updates</button>
  <div
    popover
    id="my-popover"
    class="transition-discrete starting:open:opacity-0 ..."
  >
    <!-- ... -->
  </div>
</div>

not variants

:not()疑似クラスをサポートしたnot variantが追加された。

<div class="not-hover:opacity-75">
  <!-- ... -->
</div>

ユーティリティの削除や変更

非推奨なユーティリティ*-opacity-*やflex-shrink-*、overflow-ellipsiesなどが削除された。

https://tailwindcss.com/docs/upgrade-guide#removed-deprecated-utilities

また、一貫性を高めるためにユーティリティの役割や名前の変更も行われている。 shadowやblurなどはshadow-smやblur-smに変更され、元々shadow-smやblur-smであったものはshadow-xsやblur-xsに変更された。

https://tailwindcss.com/docs/upgrade-guide#renamed-utilities

Vitest v3

Vitest v3がリリースされた。

https://vitest.dev/blog/vitest-3

機能面でいくつか破壊的な変更が含まれている。次に、抜粋して紹介する。

spy.mockResetの挙動変更

spy.mockReset()は今までモックの履歴をクリアした上で、モックを空の関数に差し替えていたが、Vitest v3ではモックを元の実装に戻すように実装が変更された。

これにより、JestとVitestでspy.mockReset()の挙動が異なるようになった。

テストフックへのコンテキストの共有

テストフック（onTestFailedとonTestFinished）がコンテキストを受け取るようになった。

test("some test", ctx => {
  ctx.info = "some info";
  if (something()) {
    ctx.info = "some other info";
  }
  onTestFinished(ctx => {
    if (ctx.info === "some info") {
      // do a thing
    }
  });
});

テストファイルのカバレッジからの除外

今まで設定をカスタムしているとテストファイル自体をカバレッジの対象にしてしまうことがあったが、常に除外されるようになった。

spyOnが実装を再利用するように変更

spyOnが実装を再利用するように変更された。

const spy1 = vi.spyOn(obj, "method").mockImplementation(() => "mocked");
const spy2 = vi.spyOn(obj, "method");

expect(spy1).toBe(spy2);

Bun v1.1.44

Bun v1.1.44がリリースされた。

https://bun.sh/blog/bun-v1.1.44

HTML Importsが組み込まれフルスタックの開発サーバとして利用できるようになった。

import homepage from "./index.html";

Bun.serve({
  static: {
    "/": homepage,
  },
  development: true,
  async fetch(req) {
    if (req.url.endsWith("/api/users")) {
      const users = await Bun.sql`SELECT * FROM users`;
      return Response.json(users);
    }
    return new Response("Not Found", { status: 404 });
  },
});