ECMAScript変遷ざっくりまとめ

 

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

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} 🙅

などなどてんこ盛り

Javascript学習におすすめの書籍

タイトルとURLをコピーしました