ECMAScript変遷ざっくりまとめ

前置き

各バージョンごとに追加された実用的(個人的に思う)な機能を列挙します

ES2023

2023年5月2日時点で、FireFoxなど一部ブラウザで未対応のメソッドも含まれるため、使用する際は注意ください。

非破壊で要素が昇順でソートされた新しい配列を返す

Array.prototype.toSorted()

const array = [2, 5, 3, 1, 4]

const reversed = array.toSorted()
console.log(reversed) // [1, 2, 3, 4, 5]

非破壊で要素の順序を逆にした新しい配列を返す

Array.prototype.toReversed()

const array = [1, 2, 3, 4, 5]

const reversed = array.toReversed()
console.log(reversed) // [5, 4, 3, 2, 1]

コールバックの条件に一致する要素を末尾から検索して返す

Array.prototype.findLast()

const array = [2, 5, 3, 1, 4]

const element = array.findLast((num) => num > 3)
console.log(element) // 4

コールバックの条件に一致する要素のインデックスを末尾から検索して返す

const array = [1, 1, 3, 1, 4]

const element = array.findLastIndex((num) => num === 1)
console.log(element) // 3

ES2022

プライベートなフィールドとメソッドの定義

#をprefixとして付与することで可能に
TypeScriptにはprivate修飾子があるが、コンパイル後は結局パブリックの扱いになるので、こちらを使う方が良い

class Human {
  #name: string;
  #age: number;

  constructor(name: string, age: number) {
    this.#name = name;
    this.#age = age;
  }

  /**
   * @returns string
   */
  get name() {
    return this.#name;
  }

  /**
   * @returns number
   */
  get age() {
    return this.#age;
  }
}

export default Human;

クラスフィールド(全インスタンスに共通の値)が定義できるように

従来までは、construtor()の中で宣言するしか無かったが、フィールドに宣言できるようになった

class Human {
  something = 18;
}

async関数外でもawaitを使えるように

これまでは、awaitを使う場合、先にasync関数を定義し、その中で使用する必要があった
async関数外ではなく、async無しの関数宣言・関数式のなかではこれまで同様、awaitは利用できない
モジュールタイプのjsのみで使用可能

<script type="module ...

配列・文字列の要素をインデックス指定で取得

特に嬉しいのは最後の要素を取得するとき

// 配列の例
const lastIndex1 = array[array.length - 1]

↓

const lastIndex2 = array.at(-1)

ES2021

??=演算子

null合体代入
左辺がnullish (null または undefined)のときに、左辺の値に右辺の値を代入することが可能

let a = null;
a ??= "default";
console.log(a); // default

文字列置換メソッド

String.prototype.replaceAll()
一致する文字列を全て置換する機能がこれまで無かったが、追加された

ES2020

オプショナルチェーン

nullish (null または undefined)かもしれない値に安全にアクセスすることが可能
対象の値がnullishでもエラーが発生せずundefinedが返る

const product = {
  name: "PC",
  price: 200000,
  image: null,
};

console.log(product.image.size); // Uncaught TypeError: Cannot read properties of null (reading 'size')
console.log(product.image?.size); // undefined

Null合体演算子

左辺がnullish (null または undefined)の場合は右辺値を返し、それ以外は左辺をそのまま返すという処理が可能

const a = null;
const result = a ?? "default"; // "default"

文字列について、正規表現で一致したものをイテレータで取得できるメソッド

String.prototype.matchAll()

ES2019

配列のフラット化用メソッド

Array.prototype.flat()
Array.prototype.flatMap()

文字列の先頭または末尾の空白を除去するメソッド

trimStart()
trimEnd()

try catchのcatchブロックで引数(errorやerrなど)を省略可能に

これまでは省略すると構文エラーになっていた

ES2018

オブジェクトでもスプレッド構文が使用可能に

const product = { name: "macbook air", price: 150000 };

// オブジェクトのコピー
const product2 = { ...product }; // { name: "macbook air", price: 150000 }

// プロパティを追加
const product3 = { ...product, image: "https://hoge.jp/foo.jpg" }; // {name: 'macbook air', price: 150000, image: 'https://hoge.jp/foo.jpg'}

正規表現関連の新しいメソッド追加

割愛

ES2017

async, awaitによる非同期処理

文字列のパディング

padStart()
padEnd()

オブジェクトを配列へ変換するメソッド追加

Object.value()
Object.entries()

ES2016

配列の中にある要素が含まれるかチェックできるメソッド

Array.prototype.includes()

べき乗演算子

2**3//8
3**3//27

ES2015

ES modules

CommonJS(サーバーサイドのexport-require)形式からexport-importによるES modules形式へ

varからlet,constへ

割愛

class構文の追加

割愛

テンプレートリテラル

バッククオートで囲むと色々便利なことができる

// 以下は文字列に変数を埋め込む例
const name = "John";
const selfIntroduction = `私は${name}です。`; // 私はJohnです。

アロー関数

割愛

スプレッド構文による配列展開

割愛

関数のデフォルト引数、可変長引数(残余引数)

デフォルト引数

const calc = (multiplicand: number, multiplier: number = 2) =>
  multiplicand * multiplier

console.log(calc(1)) // 2
console.log(calc(1, 3)) // 3

可変長引数
- 不定数の引数を配列として受け入れることが可能

const calc = (...args: number[]) =>
  args.reduce((prev, current) => prev + current, 0)

console.log(calc(2)) // 2
console.log(calc(1, 3, 5, 7, 9)) // 25

配列、オブジェクトの分割代入

const product = { name: "macbook air", price: 150000 };
const { name } = product; // "macbook air"

// 関数では引数に分割代入を使用する事ができる
const products = [{ name: "macbook air", price: 150000 }];

products.forEach((product) => console.log(product.price)); // 150000

↓

products.forEach(({ price }) => console.log(price)); // 150000

オブジェクト初期化時のkey省略

const name = "hoge"
const object1 = {name} 🙆 // キー名がnameで値もname("hoge")
const object2 = {name: name} 🙅

などなどてんこ盛り

まとめ

いかがでしたでしょうか。本記事では、ECMAScriptの各バージョンごとの主な変更内容をピックアップして羅列しています。また、今後のバージョンアップ内容も適宜反映していきますので、ぜひ学習の参考にしてみてください。