JavaScript - ECMAScript 2021: 初級者ガイド

こんにちは、将来のプログラミングスーパースター！私は、ECMAScript 2021の素晴らしい旅にお伴いするのがとても楽しみです。コンピュータサイエンスの教師として数年間の経験を持つ者として、多くの学生が完全な初心者から自信満々のプログラマーに変わるのを見てきました。今日は、JavaScriptの最新機能を探求し、できるだけ楽しく、理解しやすいように約束します。お気に入りの飲み物を手に取り、リラックスして、一緒に潜りましょう！

ECMAScript 2021とは？

新しい機能に飛び込む前に、まずECMAScriptとは何か簡単に話しましょう。ECMAScriptはJavaScriptのレシピ帳だと思ってください。毎年、シェフ（言語開発者）が新しいレシピ（機能）を追加して、私たちのプログラミング生活をより簡単で美味しくしています。ECMAScript 2021、別名ES12は、このレシピ帳の最新版です。

ECMAScript 2021に追加された新しい機能

ECMAScript 2021は、私たちに楽しい新しいツールを提供します。まるで新しいセットのLEGOブロックをコレクションに加えるようなものです。これらの新しい機能を一つずつ探ってみましょう。

数値セパレータ (_)

非常に長い数を読むことは頭が痛いでしょう。例えば、1000000000です。数値セパレータがそれを救います！

// 数値セパレータなし
const billion = 1000000000;

// 数値セパレータあり
const billionReadable = 1_000_000_000;

console.log(billion === billionReadable); // 出力: true

1_000_000_000のアンダースコア(_)は数値の値を変更しません。それはただ、私たち人間が読みやすくするためだけのものです。素晴らしいですね！

Promise any()メソッド

JavaScriptのPromiseは、一斉に電話をかけ、誰かが受話器を取るのを待つようなものです。Promise.any()メソッドは、複数のPromiseを扱う新しい方法です。

const promise1 = new Promise((resolve, reject) => setTimeout(reject, 100, 'promise1'));
const promise2 = new Promise((resolve, reject) => setTimeout(resolve, 200, 'promise2'));
const promise3 = new Promise((resolve, reject) => setTimeout(resolve, 300, 'promise3'));

Promise.any([promise1, promise2, promise3])
.then((value) => console.log(value))
.catch((error) => console.log(error));

// 出力: promise2

この例では、Promise.any()は配列内のPromiseのいずれかが満たされたら解決します。まるでレースで、最初にゴールラインを越えた人だけに興味があるようなものです。

String replaceAll()メソッド

文字置換ゲームをしたことがありますか？replaceAll()メソッドは、JavaScriptの文字列に対してそのようなゲームのようです。

const sentence = "I love cats. Cats are great pets.";
const newSentence = sentence.replaceAll("cats", "dogs");

console.log(newSentence); // 出力: "I love dogs. Dogs are great pets."

replaceAll()之前は、正規表現やループを使ってすべての一致を置換する必要がありました。今では、単一のメソッドを呼ぶだけです！

論理代入演算子

ECMAScript 2021は、3つの新しい論理代入演算子を導入しました。これらは、JavaScriptで一般的なパターンを書くための略です。それぞれ見てみましょう。

論理AND代入 (&&=) 演算子

let x = 1;
let y = 2;

x &&= y;

console.log(x); // 出力: 2

// これは以下と等しいです：
// x && (x = y);

&&=演算子は、左側の値が真である場合にのみ右側の値を代入します。まるで「xが真なら、yにする」と言っているようなものです。

論理OR代入 (||=) 演算子

let a = null;
let b = 'default value';

a ||= b;

console.log(a); // 出力: "default value"

// これは以下と等しいです：
// a || (a = b);

||=演算子は、左側の値が偽である場合にのみ右側の値を代入します。デフォルト値を設定するのに最適です！

ヌルコalescing代入 (??=) 演算子

let foo = null;
let bar = 'baz';

foo ??= bar;

console.log(foo); // 出力: "baz"

// これは以下と等しいです：
// foo ?? (foo = bar);

??=演算子は、左側の値がnullまたはundefinedの場合にのみ右側の値を代入します。||=と似ていますが、より具体的に「空」を検出します。

メソッドの摘要

ここで学んだ新しいメソッドの摘要を簡単にまとめます：

メソッド	説明	例
数値セパレータ	大きな数をより読みやすくする	1_000_000_000
Promise.any()	配列内のいずれかのPromiseが満たされたら解決	Promise.any([promise1, promise2, promise3])
String.replaceAll()	文字列内のすべての一致を置換	"hello hello".replaceAll("hello", "hi")
&&=	左側が真の場合に代入	x &&= y
||=	左側が偽の場合に代入	x \|\|= y
??=	左側がnullまたはundefinedの場合に代入	x ??= y

そして、ここまで、ECMAScript 2021の興味深い新しい機能を探求しました。覚えておいてください、プログラミングを学ぶ最良の方法は実践です。ですから、これらの新しい機能で遊んで、実験し、最も重要なことは楽しむことをお勧めします！

私の古いプログラミングの教授はよく言っていました、「コーディングは料理みたいだ。最初はいくつかの料理を焦がすかもしれませんが、練習を積むことで、すぐに名作を創作できるようになります！」間違えを恐れずに、続けてください。それらは学習プロセスの一部です。

codingを続け、好奇心を持ち、楽しく学びましょう！

Credits: Image by storyset