JavaScript - ECMAScript 2019: 初級者のガイド

こんにちは、将来のプログラミングスーパースターたち！このエキサイティングなECMAScript 2019の世界への旅にあなた们的ガイドとして参加できることを嬉しく思います。プログラミングを教えてきた者として、この言語の素晴らしさをあなたたちと共有するのが待ちきれません。虚拟のノートを準備して、一緒に飛び込んでみましょう！

ECMAScript 2019

ECMAScript 2019の紹介

始める前に、ECMAScriptとは何か簡単に話しましょう。JavaScriptを美味しいケーキとすると、ECMAScriptはそのレシピです。毎年、レシピは調整され、改良されます。2019年も例外ではありませんでした。ECMAScript 2019は、私たちのJavaScriptケーキをさらに美味しくするいくつかの新しい機能をもたらしてくれました！

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

ECMAScript 2019は、私たちのプログラミング生活をより簡単にするいくつかの興味深い機能を導入しました。それ们を一つずつ見ていきましょうか？

JavaScript Array flat() メソッド

あなたの部屋が箱の中に箱が入っているような乱雑な状態になったことはありますか？JavaScriptのネストされた配列はそれに似ています。flat()メソッドは、その箱を全部開けて一つの整然とした層に並べる魔法の清掃ロボットのようなものです。

以下にその動作を見てみましょう：

const messyRoom = [1, 2, [3, 4, [5, 6]]];
const tidyRoom = messyRoom.flat(2);
console.log(tidyRoom); // 出力: [1, 2, 3, 4, 5, 6]

この例では、messyRoomは私たちのネストされた配列です。flat(2)メソッドは2レベル深く配列をフラットします。結果として、全ての数字が同じレベルにあるtidyRoomが得られます。素晴らしいですね？

JavaScript Array flatMap()

そして、私たちの清掃ロボットが整理するだけでなく、その行程でアイテムを変換することができる imagine してみてください。それがflatMap()です！map()とflat()が超人的な子を産んだようなものです。

以下に楽しい例を示します：

const pets = ["dog", "cat", "fish"];
const petSounds = pets.flatMap(pet => {
if (pet === "dog") return ["woof", "bark"];
if (pet === "cat") return ["meow"];
return [];
});
console.log(petSounds); // 出力: ["woof", "bark", "meow"]

このコードでは、私たちのpets配列を取り出し、その鳴き声を新しい配列にします。犬は2つの鳴き声を持っていますが、同じフラット配列に終わります。魚は静かすぎてリストに載りません！

改良された Array sort() メソッド

sort()メソッドはECMAScript 2019で少し刷新されました。今では、配列が安定して並べられることを保証しています。これは何を意味するのでしょうか？2つのアイテムがソート関数によって等しいと考えられる場合、それらは互いの元の順序を保ちます。

以下に例を見てみましょう：

const students = [
{name: "Alice", grade: "B"},
{name: "Bob", grade: "A"},
{name: "Charlie", grade: "B"},
{name: "David", grade: "A"}
];

students.sort((a, b) => a.grade.localeCompare(b.grade));
console.log(students);
/* 出力:
[
{name: "Bob", grade: "A"},
{name: "David", grade: "A"},
{name: "Alice", grade: "B"},
{name: "Charlie", grade: "B"}
]
*/

この例では、私たちは生徒を成績でソートしています。BobとDavid（どちらもAの成績）は元の順序を保ち、AliceとCharlie（どちらもBの成績）も同様です。この安定したソートは多くのアプリケーションで非常に重要です！

JavaScript Object fromEntries

键値ペアの集まりをオブジェクトに変換したいと感じたことはありませんか？今、それがObject.fromEntries()でできます！まるで魔法のようですが、もっと良いbecauseそれはJavaScriptです。

以下を確認してみてください：

const entries = [
['name', 'Alice'],
['age', 25],
['city', 'ワンダーランド']
];

const person = Object.fromEntries(entries);
console.log(person);
// 出力: { name: 'Alice', age: 25, city: 'ワンダーランド' }

この例では、私たちは键値ペアの配列から始め、それをオブジェクトに変換します。各ペアがプロパティになります。これはObject.entries()の逆操作です。

任意の catch バインディング

エラーハンドリングが少しスムーズになりました。以前は、catch節でエラーパラメータを指定する必要がありましたが、それを使わない場合でも省略できるようになりました。

以下にその見方を示します：

// ECMAScript 2019以前
try {
// いくつかのエラーを投げるコード
} catch (error) {
console.log("エラーが発生しました");
}

// ECMAScript 2019で
try {
// いくつかのエラーを投げるコード
} catch {
console.log("エラーが発生しました");
}

2番目の例では、(error)部分を削除しています。これが任意のcatchバインディングです。

改良された JSON.stringify()

JSON.stringify()はECMAScript 2019で少し賢くなりました。Unicode文字の処理が改善され、JSONが有効なまま保たれます。

以下に例を示します：

const obj = { name: "Pikachu\uD800" };
console.log(JSON.stringify(obj));
// 出力: {"name":"Pikachu�"}

この場合、\uD800は未対応のサロゲートです。これがいくつかのJSONパーサーで問題になる可能性があります。新しいJSON.stringify()はそれをUnicodeの代替文字(�)に置き換えることでJSONを有効に保ちます。

函数の toString() メソッド

函数のtoString()メソッドは今、函数の正確なソースコードを含むすべての空白とコメントを含めて返します。まるで函数の完璧な写しを得るようなものです！

以下にその動作を見てみましょう：

function greet(name) {
// これは挨拶関数です
console.log(`Hello, ${name}!`);
}

console.log(greet.toString());
/* 出力:
function greet(name) {
// これは挨拶関数です
console.log(`Hello, ${name}!`);
}
*/

出力にはコメントと元のフォーマットが含まれています。デバッグやドキュメント生成に非常に役立ちます！

文字列リテラルに許可されたセパレーターシンボル

ECMAScript 2019は小さくて便利な変更をもたらしました。文字列リテラルにU+2028（行セパレータ）とU+2029（段落セパレータ）をエスケープなしで使用できるようになりました。

以下に例を示します：

const text = "Line 1 separator→\u2028←Line 2";
console.log(text);
// 出力:
// Line 1
// Line 2

この変更により、これらのセパレータを含むデータを扱うのがより簡単になります。

JavaScript String trimStart() と trimEnd()

最後に、新しい文字列メソッド2つを紹介します：trimStart()とtrimEnd()。これらはtrim()と似ていますが、片方の端からだけ空白を削除します。

以下にその動作を見てみましょう：

const messy = "   Hello, World!   ";
console.log(messy.trimStart()); // 出力: "Hello, World!   "
console.log(messy.trimEnd());   // 出力: "   Hello, World!"
console.log(messy.trim());      // 出力: "Hello, World!"

これらのメソッドは、片方の端だけをきれいにする場合に非常に便利です。これらは古いtrimLeft()とtrimRight()メソッドのエイリアスですが、より明確な名前を持っています。

結論

そして、みんな！ECMAScript 2019の興味深い新しい機能を一緒に旅しました。配列をフラットにすることから文字列をきれいにすることまで、これらの追加により私たちのJavaScriptはより強力で使いやすくなりました。

忘れないでください、学ぶ最良の方法は実践です。これらの新しい機能を自分のコードで試してみましょう。間違えを恐れずに - それが私たちがプログラマとして学び成長する方法です。

ハッピーコーディングを！そして、あなたのJavaScriptの冒険がバグフリーで楽しいものになることを願っています！

Credits: Image by storyset