このページ内容は2022年9月9日以降、再調査・再検証してません。実際に扱う際は最新の情報にアクセスしてください。

link
その他
link
ES2022

ES2022の仕様が確定したので、どういう機能が入ったか紹介しておきますes2022。ちなみに、ChromeやFirefox, Microsoft Edgeの最新版では対応済みだそうですes2022_browser_support。今回は量が多いので、クラスに関するものは省略します。

link
Top Level Await

これは module形式 (.mjsファイルやpackage.jsonのtypeがmoduleのもの) のJavaScriptに有効な機能で、ファイルのトップレベル (async関数なし) でawaitが使える機能ですes2022_top_level_await。ちなみに、Node.jsの場合はv14.8.0 (2020.8リリース) から利用できる機能で、AWS Lambda Node.js 14のランタイムでも今年から利用可能になりました。

従来は以下のように、async関数内でしかawaitを使えませんでした。

1
// 例1
2
const test = async () => {
3
await promiseFunction()
4
}
5
6
test()
7
8
// 例2 (即時関数を使うやり方)
9
(async () => {
10
await promiseFunction()
11
})()

それが以下のようにasyncなしで書けるようになりました。ちなみに、AWS LambdaではProvisioned Concurrencyと組み合わせることで、ユーザーのアクセスがある前にあらかじめ初期化を実施しておき、コールドスタートのレイテンシーを下げることができるようですlambda_top_level_await

1
await promiseFunction()
link
正規表現 dフラグ追加

これは正規表現に合致した文字列のインデックス情報を取得するためのフラグですes2022_regex_index。例えば、dフラグを利用しないで正規表現を使うとこのようになります。正規表現に合致するプログラマーという文字列が何文字目から始まるか分からないです。

1
// dフラグを付与しない場合
2
const whatJobRegExp = /職業は(?<job>.*)です/u;
3
4
const myJob = whatJobRegExp.exec('職業はプログラマーです');
5
6
myJob
7
// [
8
// '職業はプログラマーです', 'プログラマー'
9
// groups: { job: 'プログラマー' }
10
// index: 0,
11
// input: '職業はプログラマーです'
12
// ]

dフラグを使うと、正規表現に合致した文字列が何文字目から始まるか分かるようになります。

1
// dフラグを付与した場合
2
const whatJobRegExp = /職業は(?<job>.*)です/ud;
3
4
const myJob = whatJobRegExp.exec('職業はプログラマーです');
5
6
myJob
7
// indicesが追加され、正規表現に合致した文字列が何文字目から始まり終わるかを取得できる
8
// [
9
// '職業はプログラマーです', 'プログラマー'
10
// groups: { job: 'プログラマー' }
11
// index: 0,
12
// indices: [
13
// [0, 11],
14
// [3, 9],
15
// groups: {
16
// job: [3, 9]
17
// }
18
// ]
19
// input: '職業はプログラマーです'
20
// ]
link
Array.prototype.at()

これは配列の何番目の要素を返したいか指定できるメソッドですes2022_array_at。負の値にすると、配列の後ろから数えて要素を返し、指定する数が要素の数より大きいと、undefinedになります。

1
const array = ["ク", "エ", "タ"]
2
3
console.log(array.at(0)) // => ク
4
console.log(array.at(1)) // => エ
5
console.log(array.at(-1)) // => タ
6
7
console.log(array.at(4)) // => undefined

このメソッドにより、配列の最後の要素を返すのが簡単になりました。

1
// 以下2つは同じものを返す
2
array[array.length - 1]
3
array.at(-1)
link
Object.prototype.hasOwn()

これはhasOwnPropertyと同じもので、オブジェクトが任意のプロパティを持っているかどうかを調べるためのメソッドですes2022_hasown。例えば、従来だと以下のように書いてました。

1
let foo = { bar: 'Here be dragons' };
2
3
// 従来の使い方
4
Object.prototype.hasOwnProperty.call(foo, 'bar'); // true
5
Object.prototype.hasOwnProperty.call(foo, 'baz'); // false

hasOwnを使うと以下のようになります。

1
let foo = { bar: 'Here be dragons' };
2
3
Object.hasOwn(foo, "bar"); // true
4
Object.hasOwn(foo, "baz"); // false
link
Error.prototype.cause

これはErrorをthrowするときに、エラーの発生理由を付け加えることができるオプションですes2022_error_cause

1
const errorFunction = () => {
2
try {
3
a.b
4
} catch (error) {
5
// ここでエラー理由を付け足す
6
throw new Error("エラー!!", { cause: error })
7
}
8
}
9
10
// 実際にエラーを発生させる
11
try {
12
errorFunction()
13
} catch (error) {
14
console.log(error) // => Error: エラー!!
15
// error.causeでerrorFunction()内でcatchされたエラーをcauseとして表示
16
console.log(error.cause) // => ReferenceError: a is not defined
17
}

自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
サイトマップ
Notes
業務や趣味での気づき・メモ
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧