ECMAScript 2018: 初心者向けのやさしいガイド

こんにちは、未来のJavaScript魔法使いさんたち！ECMAScript 2018のエキサイティングな旅にお連れします。プログラミングを教えてきた経験のある者として、これらの新しい機能をあなたたちと共有するのが待ちきれません。コーディングが初めてでも安心してください。一歩一歩進んでいき、すぐにプロのようにJavaScriptを書けるようになるでしょう！

ECMAScript 2018

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

ECMAScript 2018、またはES9は、JavaScript言語に素晴らしい追加機能をもたらしました。まるでコーディングの冒険のために新しい工具箱を手に入れたようなものです！これらの機能を一つずつ見ていきましょう。

JavaScriptの非同期反復

bffuete buffetで、一度に全部を皿に盛り付ける代わりに、食べる準備ができたら魔法のように一皿ずつ呼び出すことができる imagine それは、コードに対して非同期反復が行うことと似ています！

`for-await-of`ループ

この新しいループは、非同期データソースをより簡単に扱うことができます。以下はその例です：

async function* numberGenerator() {
yield Promise.resolve(1);
yield Promise.resolve(2);
yield Promise.resolve(3);
}

async function printNumbers() {
for await (const num of numberGenerator()) {
console.log(num);
}
}

printNumbers();
// 出力:
// 1
// 2
// 3

この例では、numberGeneratorはプロミスを生成する非同期ジェネレータ関数です。for-await-ofループは、次の反復に進む前に各プロミスの解決を待ちます。まるで、あなたが次の料理を提供するまで待つ忍耐強い友達がいるようなものです！

RegExp()オブジェクトの新しい機能

RegExp、または正規表現は、テキスト処理のスイスアーミーナイフのような存在です。ECMAScript 2018は、このツールにいくつかの新しい技を追加しました。

Unicodeプロパティエスケープ

この機能により、Unicodeプロパティに基づいて文字を一致させることができます。国際的なテキストを扱う際に非常に便利です！

const greekSymbol = "π";
console.log(/\p{Script=Greek}/u.test(greekSymbol)); // true

ここで、\p{Script=Greek}はギリシャ文字に一致します。uフラグはUnicodeモードを有効にします。

後方照応

今では、一致の前に何が来たかを確認することができます。まるでコーディングの世界で後ろを振り向くようなものです！

const price = "$123.45";
console.log(price.match(/(?<=\$)\d+(\.\d*)?/)[0]); // "123.45"

この例では、(?<=\$)は一致の前にドル記号が来ていることを確認するポジティブな後方照応です。ドル記号は一致に含まれません。

名前付きキャプチャグループ

キャプチャグループに名前を付けることができるようになり、正規表現がより読みやすく、保守がしやすくなりました。

const dateRegex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const match = dateRegex.exec("2023-05-15");
console.log(match.groups.year);  // "2023"
console.log(match.groups.month); // "05"
console.log(match.groups.day);   // "15"

これは、ツールボックスの区画にラベルを付けるようなもので、すべてが簡単に見つけられます！

JavaScript Promiseのfinally()

JavaScriptのプロミスは、友達と計画を立てるようなものです。時にはうまくいくし、時にはいかないときもありますが、いずれにせよ後で何かをしたいことがあるかもしれません。それがfinally()です！

function fetchData() {
return new Promise((resolve, reject) => {
// APIコールのシミュレーション
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Data fetched successfully!");
} else {
reject("Error fetching data");
}
}, 1000);
});
}

fetchData()
.then(data => console.log(data))
.catch(error => console.error(error))
.finally(() => console.log("Operation completed"));

この例では、プロミスが解決也好却下也好、finallyブロックは常に実行されます。まるで「成功也好失敗也好、片付けて帰ろう」と言うようなものです。

JavaScriptのリストオブジェクトプロパティ

オブジェクトリテラルのリスト演算子（...）は、まるで魔法の袋のように、残りのすべてを保持することができます。一部のプロパティを残りのプロパティから分離したいときに非常に便利です。

const person = {
name: "Alice",
age: 30,
city: "Wonderland",
occupation: "Explorer"
};

const { name, age, ...rest } = person;

console.log(name);  // "Alice"
console.log(age);   // 30
console.log(rest);  // { city: "Wonderland", occupation: "Explorer" }

この例では、nameとageを取り出し、残りはrestにまとめられます。まるで洗濯物をソックスとそれ以外に分けるようなものです！

結論

そして、みなさん！ECMAScript 2018のエキサイティングな新機能についての旅が終わりました。覚える最良の方法は実践ですので、これらの新しいツールを試してみてください。コーディングは料理と同じで、練習すればするほど上手くなります！

以下は、私たちがカバーしたメソッドの簡単な参照表です：

機能	説明
`for-await-of`	プロミスに対して非同期反復を許可
Unicodeプロパティエスケープ	正規表現でUnicodeプロパティに基づいて文字を一致
後方照応	正規表現で一致の前に何が来たかを確認
名前付きキャプチャグループ	キャプチャグループに名前を付ける
`Promise.prototype.finally()`	プロミスが解決したか却下されたかに関わらずコールバックを実行
リストオブジェクトプロパティ	オブジェクトの残りのプロパティを新しいオブジェクトにまとめる

ハッピーコーディング、そしてあなたのJavaScriptの冒険が常にエキサイティングでありますように！

Credits: Image by storyset