うぇぶちぇんじろぐ2022part1

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

うぇぶちぇんじろぐ2022part1

ES2022 Core Web Vitalsがパソコン向け検索ランキングに適用 Google Analytics UAサポート終了 TypeScript公式のチートシート Vercelマルチテナントアプリケーション開発キットデザインシステム公開 (Vercel, AWS)ショップ公開 (Figma, Deno)SFCがGitHubからの移行発表 C++互換の新しい言語 Carbon

情報収集に役立つリソース

Google / Chrome / GitHub / AWS / その他

その他

ES2022

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

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()

正規表現 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
// ]

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)

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

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
}