Frontend Weekly 2024-10-18

2024-10-18

New ECMAScript Stage 4 Proposals#

2024 年 10 月 12 日の TC39 ミーティングで、Promise.try、Import Attributes、RegExp Modifiers、Sync Iterator helpers、JSON Modulesが Stage 4 になった。

https://ecmascript-daily.github.io/ecmascript/2024/10/12/ecmascript-proposal-update

Sync Iterator helpers#

これによりイテレータを操作するためのヘルパー関数が多く追加される。

https://github.com/tc39/proposal-iterator-helpers

次のように Array 相当の記述が可能になる。

Iterators	Array
map(fn)	map(fn)
filter(fn)	filter(fn)
take(n)	slice(0, n)
drop(n)	slice(n)
flatMap(fn)	flatMap(fn)
reduce(fn, init)	reduce(fn, init)
toArray()
forEach(fn)	forEach(fn)
some(fn)	some(fn)
every(fn)	every(fn)
find(fn)	find(fn)
from(iter)

Promise.try#

Promise.try は、渡された関数を実行し、その結果を Promise でラップして返す。

1
Primise.try(func());

Promise.try を利用することで任意の関数を Promise のセマンティクスで扱うことができる。以下のコードに似た動作をする。

1
new Promise((resolve, reject) => {
2
  try {
3
    resolve(func());
4
  } catch (error) {
5
    reject(error);
6
  }
7
});

Import Attributes 及び JSON Modules#

Import Attributes は JSON や CSS、WASM など追加のモジュールを読み込めるようにすることを目的にしている。

1
import json from "./foo.json" with { type: "json" };

合わせて、JSON モジュールのプロポーザルも Stage 4 になった。

https://github.com/tc39/proposal-json-modules

既に JSON の読み込みについては、Firefox を除くモダンブラウザだけでなく Node.js や Deno、Bun などでも利用可能。

RegExp Modifiers#

RegExp Modifiers を利用すると、次のように正規表現のフラグを一部変更することが出来る。

1
const re1 = /^[a-z](?-i:[a-z])$/i;
2
re1.test("ab"); // true
3
re1.test("Ab"); // true
4
re1.test("aB"); // false
5

6
const re2 = /^(?i:[a-z])[a-z]$/;
7
re2.test("ab"); // true
8
re2.test("Ab"); // true
9
re2.test("aB"); // false

https://github.com/tc39/proposal-regexp-modifiers

CSS nesting improves with CSSNestedDeclarations#

CSS Nesting における問題を解決するために、Chrome 130 から導入される CSSNestedDeclarations について解説する記事。

https://web.dev/blog/css-nesting-cssnesteddeclarations?hl=en

Chrome 130 から宣言のホイスティングが行われなくなるため、宣言がネストしたルールセットの下にあるような記述をしていた場合、壊れる可能性がある。

1
/* This does not work in Chrome 130 */
2
#mypopover:popover-open {
3
  @starting-style {
4
    opacity: 0;
5
    scale: 0.5;
6
  }
7

8
  opacity: 1;
9
  scale: 1;
10
}

.io ドメイン消滅の可能性について#

イギリスの領土返還により、.ioドメインが消滅するかもしれないという話が出ている。記事では、ユーゴスラビアに割り当てられていた国別コードトップレベルドメイン（ccTLD）である.yuや、ソビエト連邦の ccTLD であった.suを例に挙げ、.ioドメインが消滅する可能性について考察している。

https://every.to/p/the-disappearance-of-an-internet-domain