JavaScript - ECMAScript 2020: 基礎者のガイド

こんにちは、将来のプログラマーさんたち！ECMAScript 2020の素晴らしい世界に陪你案内できることを嬉しく思っています。コンピュータサイエンスの教師として多年間の経験を持ち、多くの生徒たちがこの概念を理解したときの輝く目を見てきました。では、一緒にES2020がJavaScript言語にもたらす素晴らしい機能を見ていきましょう！

ECMAScript 2020で追加された機能

ECMAScript 2020、またはES2020は、JavaScript開発者のための新しい工具箱のようです。私たちのコードライフをより簡単で効率的にするいくつかの興味深い機能を導入しています。一緒にこの工具箱を開いて、中身を見てみましょう！

BigInt プリミティブデータ型

夜空の星を数えていると imagine します。数十億個ありますよね！過去には、JavaScriptには数がどれだけ大きくなってもいいかという制限がありました。しかし、BigIntを使うと、その制限は没有了（言い換えを意図して）！

BigIntを使うと、非常に大きな整数を扱うことができます。以下のように使います：

const bigNumber = 1234567890123456789012345678901234567890n;
console.log(bigNumber);
// 出力: 1234567890123456789012345678901234567890n

const result = bigNumber + 1n;
console.log(result);
// 出力: 1234567890123456789012345678901234567891n

この例では、数の終わりに 'n' を追加してBigIntを作成しています。'n' はJavaScriptに「これはBigIntだよ！」と伝える东西です。BigInt上で通常の数と同じように操作を行うことができますが、BigIntを使う際には 'n' を追加することを忘れないでください。

ヌルリッシュコアリシング演算子 (??)

「プレゼント当てゲーム」をしたことがありますか？箱を摇らして、何も聞こえなければ空だと思いませんか？ヌルリッシュコアリシング演算子は、コードで少し似たような感じです！

この演算子は、値がnullまたはundefinedであるかをチェックし、それらが(true)の場合、デフォルト値を提供することができます。以下のように動作します：

let username = null;
console.log(username ?? "Guest");
// 出力: "Guest"

username = "Alice";
console.log(username ?? "Guest");
// 出力: "Alice"

最初のケースでは、usernameはnullなので「Guest」が返されます。二つ目のケースでは、usernameに値が設定されているため、その値が返されます。まるで「箱が空なら、テディベアだと思おう！」と言っているようなものです。

Promise allSettled() メソッド

あなたが教師（私のように）で、全ての生徒が試験を終えるのを待っていると imagine します。いくつかは無事に終了し、他のいくつかは諦めるかもしれません。Promise.allSettled()は、全ての生徒が答案用紙を提出するのを待つようなものです。

以下に例を示します：

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).then((results) => results.forEach((result) => console.log(result.status)));

// 出力:
// "fulfilled"
// "rejected"

このコードでは、二つのPromiseがあります。一つは無事に解決し、他のものは却下されます。Promise.allSettled()は両方のPromiseが完了を待ち、それぞれの状態を返します。

String matchAll() メソッド

「Where's Waldo?（ワルドどこだ？）」というゲームをしたことがありますか？matchAll()は、テキストでパターンの全ての occurrenceを見つける「Where's Waldo?」のようです！

実際に見てみましょう：

const text = "The cat and the hat sat on the mat.";
const regex = /at/g;
const matches = [...text.matchAll(regex)];

console.log(matches);
// 出力: [
//   ['at', index: 7, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 19, input: 'The cat and the hat sat on the mat.', groups: undefined],
//   ['at', index: 31, input: 'The cat and the hat sat on the mat.', groups: undefined]
// ]

ここでは、テキスト内の「at」というパターンの全てのoccurrenceを探しています。matchAll()はイテレータを返し、それをスプレッド演算子(...)を使って配列に変換しています。各マッチは、文字列内での見つけられた場所に関する情報を提供します。

オプションチェーン演算子 (?.)

最後に、オプションチェーン演算子について話しましょう。これは、慎重な探検家のように、道の各ステップを慎重にチェックして進む东西です。

以下のように動作します：

const user = {
name: "Alice",
address: {
street: "123 Main St"
}
};

console.log(user.address?.street);
// 出力: "123 Main St"

console.log(user.phoneNumber?.home);
// 出力: undefined

この例では、存在しない可能性のあるプロパティにアクセスしようとしています。?.演算子を使うことで、安全にアクセスすることができます。user.addressが存在する場合、streetにアクセスを試みます。user.phoneNumberが存在しない場合、エラーを吐かずにundefinedを返します。

メソッド一覧

ここに、私たちが学んだ新しいメソッドの摘要表を示します：

メソッド	説明
BigInt	大きな整数を扱うことができる
?? (ヌルリッシュコアリシング)	nullまたはundefinedの場合、デフォルト値を提供
Promise.allSettled()	全てのPromiseが完了を待つ
String.matchAll()	テキスト内のパターンの全てのoccurrenceを見つける
?. (オプションチェーン)	ネストされたオブジェクトプロパティを安全にアクセス

そして、皆さん！ECMAScript 2020の素晴らしい新しい機能を探索しました。思い出してください、学ぶ最良の方法は実際にやることです。コードエディタを立ち上げて、これらの新しいツールで実験してみてください。ハッピーコーディング、そしてあなたのJavaScriptの旅が興奮と発見で満たされることを願っています！

Credits: Image by storyset