1432 文字
7 分

Frontend Weekly 2025-01-24

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

また、一貫性を高めるためにユーティリティの役割や名前の変更も行われている。 shadowblurなどはshadow-smblur-smに変更され、元々shadow-smblur-smであったものはshadow-xsblur-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()の挙動が異なるようになった。

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

テストフック(onTestFailedonTestFinished)がコンテキストを受け取るようになった。

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 });
},
});

Storybook v8.5#

Storybook v8.5 がリリースされた。

https://storybook.js.org/blog/storybook-8-5/

React v19 や Vite v6 のサポートに加えて、次のような機能が追加された。

Realtime accessibility tests#

@storybook/addon-a11yアドオンにより、axe-coreを利用したリアルタイムのアクセシビリティテストが可能になった。

https://storybook.js.org/docs/writing-tests/accessibility-testing#accessibility-checks-with-a11y-addon

コードカバレッジの UI での表示#

Storybook Test 実行時に収集してカバレッジを UI 上に表示する機能が追加された。

https://storybook.js.org/docs/writing-tests/test-coverage?ref=storybookblog.ghost.io#with-storybook-test

eslint-config-prettier v10#

eslint-config-prettier v10 がリリースされた。

https://github.com/prettier/eslint-config-prettier/blob/HEAD/CHANGELOG.md#1000

ESLint Stylistic へのサポートが行われた。ただし ESLint Stylistic は、ESLint から書式関連のルールを分離したプロジェクトであり、多くの場合、役割の被る Prettier は ESLint Stylistic を併用することはない。

WebDriverIO v9.5.0#

WebDriverIO v9.5.0 がリリースされた。

https://github.com/webdriverio/webdriverio/releases/tag/v9.5.0

スワイプやタップなどのジェスチャーをサポートするコマンドが追加された。

Google 検索に JavaScript を必須化#

Google 検索が JavaScript の実行を要求するようになった。

https://techcrunch.com/2025/01/17/google-begins-requiring-javascript-for-google-search/

これにより、ランキングチェックツールが一時動作不能になっていた。

https://www.seroundtable.com/google-blocking-seo-rank-checking-tools-volatility-continues-38759.html

A checklist for your tsconfig.json#

tsconfig.json の設定について、細かく解説した記事。推奨される設定なども紹介されている。

https://2ality.com/2025/01/tsconfig-json.html

Frontend Weekly 2025-01-24
https://blog.ohirunewani.com/series/frontend-weekly/2025-01-24/
作者
hrdtbs
公開日
2025-01-24
ライセンス
CC BY-NC-SA 4.0