Frontend Weekly 2024-03-07

Block layout with align-content#

ブロックレイアウト及びテーブルレイアウトにも align-content を適用できるようになりました。この機能は Chrome 123 でもサポート予定です。

https://stackblitz.com/edit/js-6y3l4r?embed=1&file=index.html&hideExplorer=1&hideNavigation=1&view=preview

これにより Grid や Flexbox にしなくても良いケースが発生します。align-content: unsafe end; overflow: auto のパターンなどは、例えばチャットの表示などに使えるかもしれません。

Promise.withResolvers()#

Promise.withResolver()がほとんどの環境で利用できるようになりました。

Promise.withResolvers() - JavaScript | MDN

これは次の実装と等価です。

1
function withResolvers() {
2
  let resolve, reject;
3
  const promise = new Promise((res, rej) => {
4
    resolve = res;
5
    reject = rej;
6
  });
7
  return { resolve, reject, promise };
8
}

これを使うと、例えば次のようにイベントリスナーの Promise 化が出来ます。この手法は、matsuri-ui の useConfirm でも使われています。

1
const confirm = () => {
2
  confirmDialog.showModal();
3
  const { promise, resolve, reject } = Promise.withResolvers();
4
  confirmDialog.addEventListener("cancel", () => {
5
    reject(false);
6
  });
7
  confirmDialog.addEventListerner("close", () => {
8
    resolve(true);
9
  });
10
  return promise;
11
};
12

13
const ok = await confirm();

transition-behavior#

CSS プロパティの transition-behavior もほとんどの環境で利用できるようになりました。transition-behavior: allow-discrete; を指定すると、離散プロパティ（display や box-shadowなど）に遷移を適用できます。

transition-behavior - CSS: Cascading Style Sheets | MDN

https://stackblitz.com/edit/js-nz9m9q?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1&view=preview

@scope#

セレクタの適用範囲を指定できる@scope がほとんどの環境で利用できるようになりました。

@scope - CSS: カスケーディングスタイルシート | MDN

https://stackblitz.com/edit/js-3xj7db?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

Switch control#

WHATWG で提案されている input[type="checkbox"] 要素の switch 属性が Safari で先行サポートされました。これは role="switch" 及び関連する aria 属性にマッピングされます。現状、利用できる環境はほとんどありません。

https://stackblitz.com/edit/js-9dqi7k?embed=1&file=index.html&hideDevTools=1&hideExplorer=1&hideNavigation=1

また下位互換性の問題はありますが、switch 要素が OpenUI で議論されている他 WHATWG でも触れられています。

https://github.com/whatwg/html/issues/4180

Vertical form controls#

フォーム関連要素の向きをコントロールできるようになりました。これは既に Chrome や Edge などでも部分的にサポートされています。

https://stackblitz.com/edit/js-agjqjj?embed=1&file=index.html&hideExplorer=1&hideNavigation=1&view=preview

あまり使うことはないと思いますが、記憶の隅に置いておくと有効活用できることがあるかもしれません。

NoInfer#

NoInfer 型が追加された。これを使えば、意図しない型推論を制限することが出来る。

特定の配列にある値が含まれているかを確認する関数を考える。

1
function hoge<C extends string>(array: C[], value: string) {}

これを型レベルで確認できるようにしたい。

1
function hoge<C extends string>(array: C[], value: C) {}

これは型で確認できない。

1
hoge(["image", "video"], "audio");
2

3
// 次のような推論が行われてしまう。
4
type C = (typeof array)[number] | typeof value;

このような場合、今までは次のようにする必要があった。

1
function hoge<C extends string, D extends C>(array: C[], value: D) {}
2

3
hoge(["image", "video"], "audio");
4
// Argument of type '"audio"' is not assignable to parameter of type '"image" | "video"'

NoInfer を利用すれば、次のように記述できる。

1
function hoge<C extends string>(array: C[], value: NoInfer<C>) {}

NoInfer は次のようにも書ける。

1
export type NoInfer<T> = T & { [K in keyof T]: T[K] };