MENU
SwiftUI/Flutter/Vue等でアプリ開発
  1. ホーム
  2. dev
  3. JavaScript
  4. [JavaScript] ES2021対応の書き方

[JavaScript] ES2021対応の書き方

JavaScript

JavaScriptの最新版であるES2021は、2021年6月にリリースされました。ES2021には、新しい機能や改善点がいくつか追加されており、開発者はこれらを使ってより効率的かつパワフルなコードを書くことができます。

以下では、ES2021に対応したJavaScriptの基本的な書き方とその具体例を紹介します。

目次

String.prototype.replaceAll()

String.prototype.replaceAll()は、文字列中の全ての指定された文字列または正規表現と一致する箇所を、別の文字列に置換するメソッドです。

// ES5
var str = "Hello, world!";
var newStr = str.replace(/l/g, "x"); // "Hexxo, worxd!"

// ES2021
let str = "Hello, world!";
let newStr = str.replaceAll("l", "x"); // "Hexxo, worxd!"

Promise.any()

Promise.any()は、複数のPromiseのうち、最初にresolveされたPromiseを返すメソッドです。どのPromiseもresolveされなかった場合は、Promise.all()と同様に、すべてのPromiseがrejectされた結果を返します。

// ES2021
let promise1 = new Promise((resolve, reject) => setTimeout(() => resolve('foo'), 3000));
let promise2 = new Promise((resolve, reject) => setTimeout(() => resolve('bar'), 2000));
let promise3 = new Promise((resolve, reject) => setTimeout(() => resolve('baz'), 1000));

Promise.any([promise1, promise2, promise3]).then((value) => {
  console.log(value); // 最初にresolveされたPromiseの結果が表示される
}).catch((error) => {
  console.log(error); // すべてのPromiseがrejectされた場合に表示される
});

Logical Assignment Operators

Logical Assignment Operatorsは、代入式と論理演算子を組み合わせた演算子です。これらを使うことで、変数の値を簡潔に更新することができます。

// ES2015
let a = 5;
a = a || 10; // aがfalseの場合、10を代入する

// ES2021
let a = 5;
a ||= 10; // aがfalseの場合、10を代入する（||=演算子）

Numeric Separators

Numeric Separatorsは、数値を桁ごとに区切るためのアンダースコアを使うことができる機能です。これにより、複雑な数値リテラルをより可読性の高い形式で表現することができます。

// ES2021
let num1 = 1000000000;
let num2 = 1_000_000_000;

console.log(num1 === num2); // true

WeakRefs

WeakRefsは、オブジェクトに弱い参照を作成するための新しいAPIです。これを使うことで、メモリリークを防止することができます。

// ES2021
let obj = { name: "John" };
let weakRef = new WeakRef(obj);

obj = null; // objへの参照を削除

setTimeout(() => {
  if (weakRef.deref() === undefined) {
    console.log("objは既に解放されています");
  } else {
    console.log(`objのnameプロパティの値は${weakRef.deref().name}です`);
  }
}, 2000);

Logical nullish assignment (??=)

Logical nullish assignmentは、代入式とnullish coalescing演算子（??）を組み合わせた演算子です。これを使うことで、変数の値がnullまたはundefinedの場合にのみ代入を行うことができます。

// ES2021
let a = null;
a ??= 10; // aがnullまたはundefinedの場合、10を代入する

console.log(a); // 10

まとめ

以上が、ES2021に対応したJavaScriptの基本的な書き方と具体例です。これらの機能をうまく使うことで、よりモダンで効率的なJavaScriptコードを書くことができます。

JavaScript
よかったらシェアしてね！
  • URLをコピーしました！
  • URLをコピーしました！
目次