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
また、一貫性を高めるためにユーティリティの役割や名前の変更も行われている。
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 }); },});
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
を利用したリアルタイムのアクセシビリティテストが可能になった。
コードカバレッジの UI での表示
Storybook Test 実行時に収集してカバレッジを UI 上に表示する機能が追加された。
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 の設定について、細かく解説した記事。推奨される設定なども紹介されている。