Frontend Weekly 2024-03-07
Safari 17.4のBlock layout with align-content、Promise.withResolvers()、transition-behavior、@scope、Switch control、Vertical form controls、TypeScript 5.4のNoInfer、Pollyfill.ioの売却などについて紹介する。
Safari 17.4
2024年3月5日にSafari 17.4がリリースされました。
WebKit Features in Safari 17.4
Block layout with align-content
ブロックレイアウト及びテーブルレイアウトにもalign-contentを適用できるようになりました。この機能はChrome 123でもサポート予定です。
これによりGridやFlexboxにしなくても良いケースが発生します。align-content: unsafe end; overflow: auto のパターンなどは、例えばチャットの表示などに使えるかもしれません。
Promise.withResolvers()
Promise.withResolver()がほとんどの環境で利用できるようになりました。
Promise.withResolvers() - JavaScript | MDN
これは次の実装と等価です。
function withResolvers() {
let resolve, reject;
const promise = new Promise((res, rej) => {
resolve = res;
reject = rej;
});
return { resolve, reject, promise };
}これを使うと、例えば次のようにイベントリスナーのPromise化が出来ます。この手法は、matsuri-uiのuseConfirmでも使われています。
const confirm = () => {
confirmDialog.showModal();
const { promise, resolve, reject } = Promise.withResolvers();
confirmDialog.addEventListener("cancel", () => {
reject(false);
});
confirmDialog.addEventListerner("close", () => {
resolve(true);
});
return promise;
};
const ok = await confirm();transition-behavior
CSSプロパティのtransition-behaviorもほとんどの環境で利用できるようになりました。transition-behavior: allow-discrete; を指定すると、離散プロパティ（displayやbox-shadowなど）に遷移を適用できます。
transition-behavior - CSS: Cascading Style Sheets | MDN
@scope
セレクタの適用範囲を指定できる@scopeがほとんどの環境で利用できるようになりました。
@scope - CSS: カスケーディングスタイルシート | MDN
Switch control
WHATWGで提案されている input[type="checkbox"] 要素の switch 属性がSafariで先行サポートされました。これは role="switch" 及び関連するaria属性にマッピングされます。現状、利用できる環境はほとんどありません。
また下位互換性の問題はありますが、switch要素がOpenUIで議論されている他WHATWGでも触れられています。
https://github.com/whatwg/html/issues/4180
Vertical form controls
フォーム関連要素の向きをコントロールできるようになりました。これは既にChromeやEdgeなどでも部分的にサポートされています。
あまり使うことはないと思いますが、記憶の隅に置いておくと有効活用できることがあるかもしれません。
TypeScript 5.4
2024年3月6日にTypeScript 5.4がリリースされました。型の改善などが行われた他、NoInfer Utility Type、Object.groupByとMap.groupBy が追加、Import AttributesをglobalのImportAttributesタイプでチェック出来るようになりました。
Announcing TypeScript 5.4 - TypeScript
NoInfer
NoInfer型が追加された。これを使えば、意図しない型推論を制限することが出来る。
特定の配列にある値が含まれているかを確認する関数を考える。
function hoge<C extends string>(array: C[], value: string) {}これを型レベルで確認できるようにしたい。
function hoge<C extends string>(array: C[], value: C) {}これは型で確認できない。
hoge(["image", "video"], "audio");
// 次のような推論が行われてしまう。
type C = (typeof array)[number] | typeof value;このような場合、今までは次のようにする必要があった。
function hoge<C extends string, D extends C>(array: C[], value: D) {}
hoge(["image", "video"], "audio");
// Argument of type '"audio"' is not assignable to parameter of type '"image" | "video"'NoInferを利用すれば、次のように記述できる。
function hoge<C extends string>(array: C[], value: NoInfer<C>) {}NoInferは次のようにも書ける。
export type NoInfer<T> = T & { [K in keyof T]: T[K] };Pollyfill.ioの売却
ブラウザーの互換性を解決するためのサービスPollyfill.ioが、中国のFunnull社に売却されました。現代のサービスでPollyfill.ioが必要になることはほぼないと思いますが、今でも少なくないサービスで利用されています。
［注意喚起］ブラウザ互換ライブラリ「Polyfill.io」がドメイン名ごと中国企業に売却、CloudflareとFastlyが代替となる配信を開始
CloudflareとFastlyがそれぞれ自社のCDNでフォークしたPolyfill.ioの配信を発表しました。
https://cdnjs.cloudflare.com/polyfill/
Others
Support for Remix with Vite
Support for Remix with Vite – Vercel
ESLint v8.57 - support cjs/mjs
ESLint v8.57.0 released - ESLint - Pluggable JavaScript Linter
AppleがEUでのPWAのホームスクリーン追加機能の削除を撤回。ただし、 Safari以外のブラウザで追加したPWAもホームスクリーンから起動する場合はSafari上で実行される
Apple says iOS 17.4 won’t remove Home Screen web apps in the EU after all
Figmaは、デザイナーとエンジニアが互いに近づくことでパワーを発揮する。
Dev Mode活用の前に開発者が知っておきたいFigmaのこと10個+α｜Hiroki Tani
【徹底比較】Vue.js と React でレンダリングされる値、されない値
デザインは直線的ではない
90% of designers are unhirable?
iframe を使って安全にブラウザ拡張機能を実装する - mizdra
VS Code内でReactアプリをプロファイルしてパフォーマンスのボトルネックを探しだすアプリ。以前にも少し話題になった気がする。
Million Lint is in public beta
RSAをJSで実装する