メインコンテンツまでスキップ

「ES2020」タグの記事が9件件あります

全てのタグを見る

`Atomics.wait`, `Atomics.notify`, `Atomics.waitAsync`

· 約10分
[マリヤ・ホルタ](https://twitter.com/marjakh)、ノンブロッキングブロガー

Atomics.wait および Atomics.notify は、ミューテックスやその他の同期手段を実装するために便利な低レベルの同期プリミティブです。しかし、Atomics.wait はブロッキングであるため、メインスレッドで呼び出すことはできません(試みると TypeError が投げられます)。

ヌリッシュ合体

· 約9分
ジャスティン・リッジウェル

ヌリッシュ合体提案 nullish coalescing proposal (??) は、デフォルト値を処理するために設計された新しいショートサーキット演算子を追加します。

既に他のショートサーキット演算子 &&|| に慣れているかもしれません。これらの両演算子は「truthy」と「falsy」の値を扱います。コード例 lhs && rhs を想像してください。もし lhs (左辺) が falsy なら、式は lhs を評価します。それ以外の場合、式は rhs (右辺) を評価します。コード例 lhs || rhs の場合、その逆が真となります。もし lhs が truthy なら、式は lhs を評価します。それ以外の場合、式は rhs を評価します。

Optional chaining

· 約7分
Maya Armyanova ([@Zmayski](https://twitter.com/Zmayski)), オプショナルチェーンの突破者

JavaScriptでの長いプロパティアクセスチェーンはエラーが発生しやすく、そのどれもがnullまたはundefined(「ヌリッシュ」値として知られる)に評価される可能性があります。それぞれの手順でプロパティの存在を確認することは、簡単に深く入れ子になったif文構造やプロパティアクセスチェーンを複製する長いif条件に変わる可能性があります:

globalThis

· 約2分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

もし以前にWebブラウザで使用するJavaScriptを書いたことがあるなら、グローバルthisにアクセスするためにwindowを使用した可能性があります。Node.jsでは、globalを使ったことがあるかもしれません。どちらの環境でも動作するコードを書く場合、利用可能なものを検出して使用してきたかもしれませんが、サポートする環境とユースケースの数が増えるごとにチェックすべき識別子のリストは増加します。それはすぐに管理ができなくなります:

Promiseの組み合わせ

· 約5分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

ES2015でPromiseが導入されて以来、JavaScriptでは静的メソッドPromise.allPromise.raceの2つのPromiseコンビネーターがサポートされています。

現在、標準化プロセスを進行中の2つの新しい提案があります: Promise.allSettledPromise.anyです。この追加により、JavaScriptには合計4つのPromiseコンビネーターが存在し、それぞれ異なるユースケースを可能にします。

`String.prototype.matchAll`

· 約3分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

文字列に対して同じ正規表現を繰り返し適用し、すべての一致を取得することは一般的です。ある程度、String#matchメソッドを使用することでこれを今日行うことは可能です。

この例では、16進数の数字のみで構成されたすべての単語を見つけ、それぞれの一致をログに記録します:

const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
for (const match of string.match(regex)) {
console.log(match);
}

// 出力:
//
// 'DEADBEEF'
// 'CAFE'

しかし、これでは一致する_サブ文字列_しか得られません。通常、サブ文字列だけではなく、各サブ文字列のインデックスや各一致内のキャプチャグループなどの追加情報も必要です。

独自のループを書き、マッチオブジェクトを自分自身で追跡することでこれを達成することはすでに可能ですが、それは少し面倒であまり便利ではありません:

const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
let match;
while (match = regex.exec(string)) {
console.log(match);
}

// 出力:
//
// [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE' ]
// [ 'CAFE', index: 28, input: 'Magic hex numbers: DEADBEEF CAFE' ]

新しいString#matchAllAPIにより、これまでよりも簡単になりました: シンプルなfor-ofループを書くことで、すべてのマッチオブジェクトを取得できます。

const string = 'Magic hex numbers: DEADBEEF CAFE';
const regex = /\b\p{ASCII_Hex_Digit}+\b/gu;
for (const match of string.matchAll(regex)) {
console.log(match);
}

// 出力:
//
// [ 'DEADBEEF', index: 19, input: 'Magic hex numbers: DEADBEEF CAFE' ]
// [ 'CAFE', index: 28, input: 'Magic hex numbers: DEADBEEF CAFE' ]

String#matchAllは特にキャプチャグループを持つ正規表現に役立ちます。個々の一致ごとの完全な情報を、キャプチャグループを含めて提供します。

const string = 'Favorite GitHub repos: tc39/ecma262 v8/v8.dev';
const regex = /\b(?<owner>[a-z0-9]+)\/(?<repo>[a-z0-9\.]+)\b/g;
for (const match of string.matchAll(regex)) {
console.log(`${match[0]} at ${match.index} with '${match.input}'`);
console.log(`→ owner: ${match.groups.owner}`);
console.log(`→ repo: ${match.groups.repo}`);
}

モジュール名前空間エクスポート

· 約1分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

JavaScriptモジュールでは、次の構文を使用することがすでに可能でした:

import * as utils from './utils.mjs';

しかし、これまで対称的なexport構文は存在しませんでした… 今までは:

export * as utils from './utils.mjs';

これは次のものと同等です:

import * as utils from './utils.mjs';
export { utils };

BigInt:JavaScriptにおける任意精度整数

· 約12分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

BigIntはJavaScriptにおける新しい数値プリミティブで、任意精度の整数を表現できます。BigIntを使用すると、Numberで安全な整数制限を超える大きな整数を安全に保存し操作することができます。本記事ではいくつかの使用例を紹介し、JavaScriptのNumberと比較することでChrome 67における新機能を説明します。

動的`import()`

· 約6分
Mathias Bynens ([@mathias](https://twitter.com/mathias))

動的import()は、静的importと比べて新しい可能性を引き出す、関数のような形式の新しいimportを導入します。この記事では両者を比較し、新しい内容の概要を説明します。