JavaScriptのES6+の便利な機能まとめ - モダンな書き方を完全マスター

はじめに

2015年にリリースされたES6（ECMAScript 2015）は、JavaScriptに革命的な変化をもたらしました。それ以降も毎年新機能が追加され、より簡潔で読みやすいコードが書けるようになっています。

しかし、機能が多すぎて「どれから学べばいいかわからない」と感じる方も多いのではないでしょうか。本記事では、ES6以降で追加された主要な機能を網羅的に紹介し、各機能の概要と使いどころを具体例とともに解説します。

本記事で紹介するES6+の主要機能は以下のとおりです。

let/constによる変数宣言
テンプレートリテラル
デフォルト引数と残余引数
分割代入（Destructuring）
スプレッド構文
アロー関数
クラス構文
Promise と async/await
Map / Set
ES Modules（import/export）
その他の便利な機能

ES6+の機能を学ぶ前に

ECMAScriptとは

ECMAScript（エクマスクリプト）は、JavaScriptの標準仕様を定めた規格です。Ecma Internationalという標準化団体が策定しており、ブラウザベンダーはこの仕様に基づいてJavaScriptエンジンを実装しています。

timeline
    title ECMAScriptの主要リリース
    1997 : ES1
    1999 : ES3
    2009 : ES5
    2015 : ES6/ES2015（大規模アップデート）
    2016 : ES2016
    2017 : ES2017（async/await）
    2020 : ES2020（オプショナルチェーン）
    2021 : ES2021
    2022-2025 : 毎年新機能追加

ES6以降は、毎年新しいバージョンがリリースされています。本記事では、ES6以降の機能を「ES6+」と総称して紹介します。

ブラウザ対応状況

現代の主要ブラウザ（Chrome、Firefox、Safari、Edge）は、ES6+の機能をほぼ完全にサポートしています。Internet Explorerはサポートが終了しているため、新規開発ではES6+を安心して使用できます。

古いブラウザへの対応が必要な場合は、Babel（トランスパイラ）を使ってES5互換のコードに変換することで対応可能です。

let/constによる変数宣言

ES6では、varに代わる新しい変数宣言キーワードとしてletとconstが追加されました。

varの問題点

従来のvarには以下の問題がありました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// 問題1: 関数スコープしか持たない
if (true) {
  var x = 10;
}
console.log(x); // 10（ブロック外からアクセスできてしまう）

// 問題2: 再宣言が可能
var name = "田中";
var name = "佐藤"; // エラーにならない

// 問題3: 巻き上げによる予期しない動作
console.log(message); // undefined（エラーではなくundefined）
var message = "こんにちは";

letとconstの特徴

特徴	var	let	const
スコープ	関数スコープ	ブロックスコープ	ブロックスコープ
再宣言	可能	不可	不可
再代入	可能	可能	不可
巻き上げ	undefined	TDZ（エラー）	TDZ（エラー）

letとconstを使うことで、より安全で予測可能なコードが書けます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// letはブロックスコープを持つ
if (true) {
  let y = 20;
}
// console.log(y); // ReferenceError: y is not defined

// constは再代入不可
const MAX_COUNT = 100;
// MAX_COUNT = 200; // TypeError: Assignment to constant variable

// constでもオブジェクトの中身は変更可能
const user = { name: "田中" };
user.name = "佐藤"; // OK
user.age = 25;      // OK
// user = {};       // NG: 参照自体の変更は不可

使い分けの指針

基本的にはconstを優先して使い、再代入が必要な場合のみletを使うというのがモダンJavaScriptのベストプラクティスです。

1
2
3
4
5
6
7
8
9


// 基本はconstを使う
const API_URL = "https://api.example.com";
const users = [];

// 再代入が必要な場合はletを使う
let count = 0;
for (let i = 0; i < 10; i++) {
  count += i;
}

テンプレートリテラル

テンプレートリテラルは、バッククォート（`）で囲む文字列リテラルです。文字列の中に式を埋め込んだり、複数行の文字列を簡潔に書いたりできます。

基本的な使い方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


const name = "田中";
const age = 25;

// 従来の書き方（文字列連結）
const message1 = "私の名前は" + name + "で、年齢は" + age + "歳です。";

// テンプレートリテラル
const message2 = `私の名前は${name}で、年齢は${age}歳です。`;

console.log(message2); // 私の名前は田中で、年齢は25歳です。

${}の中には任意のJavaScript式を書けます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const price = 1000;
const tax = 0.1;

// 式を埋め込む
const total = `合計金額: ${price * (1 + tax)}円`;
console.log(total); // 合計金額: 1100円

// 関数呼び出しも可能
const items = ["りんご", "みかん", "ぶどう"];
const list = `商品一覧: ${items.join(", ")}`;
console.log(list); // 商品一覧: りんご, みかん, ぶどう

複数行の文字列

従来の書き方では複数行の文字列を書くのが面倒でしたが、テンプレートリテラルなら改行をそのまま含められます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// 従来の書き方
const html1 = "<div>\n" +
              "  <h1>タイトル</h1>\n" +
              "  <p>本文</p>\n" +
              "</div>";

// テンプレートリテラル
const html2 = `
<div>
  <h1>タイトル</h1>
  <p>本文</p>
</div>
`;

実践的な活用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


// HTMLの動的生成
function createUserCard(user) {
  return `
    <div class="user-card">
      <img src="${user.avatar}" alt="${user.name}">
      <h2>${user.name}</h2>
      <p>年齢: ${user.age}歳</p>
      <p>職業: ${user.job || "未設定"}</p>
    </div>
  `;
}

const user = { name: "田中", age: 25, avatar: "/images/tanaka.jpg" };
document.body.innerHTML = createUserCard(user);

デフォルト引数と残余引数

ES6では、関数の引数に関する便利な機能が追加されました。

デフォルト引数

引数にデフォルト値を設定できます。引数が渡されなかった場合やundefinedの場合に、デフォルト値が使われます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


// 従来の書き方
function greet(name) {
  name = name || "ゲスト";
  return `こんにちは、${name}さん！`;
}

// デフォルト引数を使った書き方
function greetModern(name = "ゲスト") {
  return `こんにちは、${name}さん！`;
}

console.log(greetModern());       // こんにちは、ゲストさん！
console.log(greetModern("田中")); // こんにちは、田中さん！

デフォルト値には式や関数呼び出しも使用できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


function createUser(
  name,
  role = "user",
  createdAt = new Date()
) {
  return { name, role, createdAt };
}

const admin = createUser("田中", "admin");
console.log(admin);
// { name: "田中", role: "admin", createdAt: [現在日時] }

残余引数（Rest Parameters）

...を使うと、可変長の引数を配列として受け取れます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// 従来の書き方（argumentsオブジェクト）
function sum() {
  let total = 0;
  for (let i = 0; i < arguments.length; i++) {
    total += arguments[i];
  }
  return total;
}

// 残余引数を使った書き方
function sumModern(...numbers) {
  return numbers.reduce((total, n) => total + n, 0);
}

console.log(sumModern(1, 2, 3, 4, 5)); // 15

残余引数は必ず最後の引数として配置します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


function logMessages(level, ...messages) {
  messages.forEach(msg => {
    console.log(`[${level}] ${msg}`);
  });
}

logMessages("INFO", "処理を開始", "データ取得完了", "処理終了");
// [INFO] 処理を開始
// [INFO] データ取得完了
// [INFO] 処理終了

分割代入（Destructuring）

分割代入は、配列やオブジェクトから値を取り出して個別の変数に代入する構文です。コードを簡潔に書けるだけでなく、可読性も向上します。

配列の分割代入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const colors = ["赤", "青", "緑"];

// 従来の書き方
const first = colors[0];
const second = colors[1];

// 分割代入
const [red, blue, green] = colors;
console.log(red);   // 赤
console.log(blue);  // 青
console.log(green); // 緑

一部の要素だけを取り出すことも可能です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const numbers = [1, 2, 3, 4, 5];

// 最初の2つだけ取得
const [first, second] = numbers;

// 1番目をスキップ
const [, secondOnly] = numbers;

// 残りを配列として取得
const [head, ...tail] = numbers;
console.log(head); // 1
console.log(tail); // [2, 3, 4, 5]

オブジェクトの分割代入

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


const user = {
  name: "田中",
  age: 25,
  city: "東京"
};

// 従来の書き方
const name = user.name;
const age = user.age;

// 分割代入
const { name, age, city } = user;
console.log(name); // 田中
console.log(age);  // 25

変数名を変更したり、デフォルト値を設定したりできます。

1
2
3
4
5
6
7
8
9


const user = { name: "田中", age: 25 };

// 変数名を変更
const { name: userName, age: userAge } = user;
console.log(userName); // 田中

// デフォルト値の設定
const { name, city = "未設定" } = user;
console.log(city); // 未設定

関数引数での分割代入

関数の引数でも分割代入が使えます。オプションオブジェクトを受け取る場合に便利です。

1
2
3
4
5
6
7


// 分割代入を使った関数定義
function createUser({ name, age, role = "user" }) {
  return { name, age, role };
}

const user = createUser({ name: "田中", age: 25 });
console.log(user); // { name: "田中", age: 25, role: "user" }

スプレッド構文

スプレッド構文（...）は、配列やオブジェクトを展開するための構文です。残余引数と見た目は同じですが、使う場面が異なります。

配列のスプレッド

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13


const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

// 配列の結合
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// 配列のコピー（シャローコピー）
const copy = [...arr1];

// 要素の追加
const withZero = [0, ...arr1];
console.log(withZero); // [0, 1, 2, 3]

オブジェクトのスプレッド

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const defaults = { theme: "light", language: "ja" };
const userSettings = { theme: "dark" };

// オブジェクトのマージ
const settings = { ...defaults, ...userSettings };
console.log(settings); // { theme: "dark", language: "ja" }

// プロパティの追加・上書き
const user = { name: "田中", age: 25 };
const updatedUser = { ...user, age: 26, city: "東京" };
console.log(updatedUser); // { name: "田中", age: 26, city: "東京" }

実践的な活用例

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


// 配列から最大値を取得
const numbers = [5, 2, 8, 1, 9];
const max = Math.max(...numbers);
console.log(max); // 9

// 関数呼び出しに配列を展開
function introduce(name, age, city) {
  console.log(`${name}（${age}歳）${city}在住`);
}

const params = ["田中", 25, "東京"];
introduce(...params); // 田中（25歳）東京在住

アロー関数

アロー関数は、=>を使った簡潔な関数定義の構文です。従来のfunctionキーワードを使った定義よりも短く書けます。

基本的な書き方

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


// 従来の関数式
const add = function(a, b) {
  return a + b;
};

// アロー関数
const addArrow = (a, b) => {
  return a + b;
};

// さらに簡潔に（return省略）
const addShort = (a, b) => a + b;

// 引数が1つの場合は括弧も省略可能
const double = n => n * 2;

アロー関数のthis

アロー関数の最大の特徴は、thisが定義時のスコープを引き継ぐことです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


const counter = {
  count: 0,
  // 従来の関数ではthisが変わってしまう
  startOld: function() {
    setInterval(function() {
      this.count++; // thisがwindowを指す（意図しない動作）
    }, 1000);
  },
  // アロー関数ではthisが維持される
  startNew: function() {
    setInterval(() => {
      this.count++; // thisがcounterを指す（期待どおり）
    }, 1000);
  }
};

配列メソッドとの組み合わせ

アロー関数は、map、filter、reduceなどの配列メソッドと組み合わせるとコードが簡潔になります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


const users = [
  { name: "田中", age: 25, active: true },
  { name: "佐藤", age: 30, active: false },
  { name: "鈴木", age: 28, active: true }
];

// アクティブなユーザーの名前を取得
const activeNames = users
  .filter(user => user.active)
  .map(user => user.name);

console.log(activeNames); // ["田中", "鈴木"]

アロー関数を使うべきでない場面

以下の場面では従来の関数を使うべきです。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


// オブジェクトのメソッド定義
const obj = {
  value: 10,
  // NG: アロー関数ではthisが期待どおりに動かない
  getValue: () => this.value,
  // OK: 従来の関数またはメソッド短縮記法
  getValue() {
    return this.value;
  }
};

// コンストラクタ関数（アロー関数はnewで呼び出せない）
// const Person = (name) => { this.name = name; }; // NG
function Person(name) {
  this.name = name;
}

クラス構文

ES6で導入されたクラス構文により、オブジェクト指向プログラミングがより直感的に書けるようになりました。

基本的なクラス定義

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28


class User {
  // コンストラクタ
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // メソッド
  greet() {
    return `こんにちは、${this.name}です`;
  }

  // getter
  get info() {
    return `${this.name}（${this.age}歳）`;
  }

  // setter
  set info(value) {
    const [name, age] = value.split(",");
    this.name = name;
    this.age = Number(age);
  }
}

const user = new User("田中", 25);
console.log(user.greet()); // こんにちは、田中です
console.log(user.info);    // 田中（25歳）

継承

extendsキーワードでクラスを継承できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23


class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name}が鳴きました`);
  }
}

class Dog extends Animal {
  constructor(name, breed) {
    super(name); // 親クラスのコンストラクタを呼び出し
    this.breed = breed;
  }

  speak() {
    console.log(`${this.name}「ワンワン！」`);
  }
}

const dog = new Dog("ポチ", "柴犬");
dog.speak(); // ポチ「ワンワン！」

静的メソッドとプロパティ

staticキーワードを使うと、インスタンスを作らずに呼び出せるメソッドやプロパティを定義できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


class MathUtils {
  static PI = 3.14159;

  static add(a, b) {
    return a + b;
  }

  static multiply(a, b) {
    return a * b;
  }
}

console.log(MathUtils.PI);           // 3.14159
console.log(MathUtils.add(2, 3));    // 5
console.log(MathUtils.multiply(2, 3)); // 6

Promiseとasync/await

Promiseは非同期処理を扱うためのオブジェクトで、ES6で導入されました。ES2017ではさらにasync/awaitが追加され、非同期コードがより読みやすくなりました。

Promiseの基本

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25


// Promiseの作成
const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const success = true;
      if (success) {
        resolve({ id: 1, name: "田中" });
      } else {
        reject(new Error("データ取得に失敗しました"));
      }
    }, 1000);
  });
};

// Promiseの使用
fetchData()
  .then(data => {
    console.log("成功:", data);
  })
  .catch(error => {
    console.error("失敗:", error.message);
  })
  .finally(() => {
    console.log("処理完了");
  });

async/await

async/awaitを使うと、非同期処理を同期処理のように書けます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


async function fetchUserData() {
  try {
    const response = await fetch("/api/users/1");
    const user = await response.json();
    console.log(user);
    return user;
  } catch (error) {
    console.error("エラー:", error.message);
    throw error;
  }
}

// 呼び出し
fetchUserData();

Promise.allとPromise.allSettled

複数の非同期処理を並列で実行する場合に便利です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// すべて成功した場合のみ結果を取得
async function fetchAllUsers() {
  const urls = ["/api/users/1", "/api/users/2", "/api/users/3"];
  const promises = urls.map(url => fetch(url).then(res => res.json()));
  
  // すべて成功したら結果を配列で取得
  const users = await Promise.all(promises);
  return users;
}

// 成功・失敗に関わらずすべての結果を取得
async function fetchAllSettled() {
  const urls = ["/api/users/1", "/api/users/2", "/api/invalid"];
  const promises = urls.map(url => fetch(url).then(res => res.json()));
  
  const results = await Promise.allSettled(promises);
  results.forEach(result => {
    if (result.status === "fulfilled") {
      console.log("成功:", result.value);
    } else {
      console.log("失敗:", result.reason);
    }
  });
}

MapとSet

ES6では、新しいコレクション型としてMapとSetが追加されました。

Map

Mapはキーと値のペアを格納するコレクションです。オブジェクトと似ていますが、いくつかの利点があります。

特徴	Object	Map
キーの型	文字列/Symbol	任意の型
サイズ取得	`Object.keys(obj).length`	`map.size`
順序保証	ES2015以降は保証	挿入順を保証
イテレーション	やや面倒	直接可能

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24


// Mapの基本操作
const userRoles = new Map();

// 値の設定
userRoles.set("田中", "admin");
userRoles.set("佐藤", "editor");
userRoles.set("鈴木", "viewer");

// 値の取得
console.log(userRoles.get("田中")); // admin

// 存在確認
console.log(userRoles.has("佐藤")); // true

// サイズ
console.log(userRoles.size); // 3

// イテレーション
for (const [name, role] of userRoles) {
  console.log(`${name}: ${role}`);
}

// 削除
userRoles.delete("鈴木");

オブジェクトをキーにできるのがMapの大きな利点です。

1
2
3
4
5


const objKey = { id: 1 };
const map = new Map();

map.set(objKey, "オブジェクトがキー");
console.log(map.get(objKey)); // オブジェクトがキー

Set

Setは重複しない値のコレクションです。配列から重複を除去する場合などに便利です。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


// Setの基本操作
const uniqueNumbers = new Set([1, 2, 3, 2, 1]);
console.log(uniqueNumbers); // Set(3) {1, 2, 3}

// 値の追加
uniqueNumbers.add(4);
uniqueNumbers.add(1); // 重複するため追加されない

// 存在確認
console.log(uniqueNumbers.has(2)); // true

// サイズ
console.log(uniqueNumbers.size); // 4

// イテレーション
for (const num of uniqueNumbers) {
  console.log(num);
}

配列から重複を除去するイディオムとしてよく使われます。

1
2
3
4
5
6
7
8


const numbers = [1, 2, 2, 3, 3, 3, 4];
const unique = [...new Set(numbers)];
console.log(unique); // [1, 2, 3, 4]

// 文字列の重複文字を除去
const text = "programming";
const uniqueChars = [...new Set(text)].join("");
console.log(uniqueChars); // progamin

ES Modules（import/export）

ES Modulesは、コードを複数のファイルに分割して管理するための仕組みです。

名前付きエクスポート

複数の値を個別にエクスポートできます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


// utils.js
export const PI = 3.14159;

export function add(a, b) {
  return a + b;
}

export function multiply(a, b) {
  return a * b;
}

1
2
3
4
5
6
7
8
9


// main.js
import { PI, add, multiply } from "./utils.js";

console.log(PI);           // 3.14159
console.log(add(2, 3));    // 5
console.log(multiply(2, 3)); // 6

// 名前を変更してインポート
import { add as sum } from "./utils.js";

デフォルトエクスポート

モジュールから1つのメイン機能をエクスポートする場合に使います。

1
2
3
4
5
6


// User.js
export default class User {
  constructor(name) {
    this.name = name;
  }
}

1
2
3
4


// main.js
import User from "./User.js";

const user = new User("田中");

HTMLでのモジュール読み込み

HTMLファイルでES Modulesを使う場合は、type="module"を指定します。

1
2
3
4
5
6


<script type="module" src="main.js"></script>

<script type="module">
  import { greet } from "./utils.js";
  greet("田中");
</script>

その他の便利な機能

ES6以降では、他にも多くの便利な機能が追加されています。

オプショナルチェーン（ES2020）

ネストされたオブジェクトのプロパティに安全にアクセスできます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20


const user = {
  name: "田中",
  address: {
    city: "東京"
  }
};

// 従来の書き方
const city = user.address && user.address.city;

// オプショナルチェーン
const cityModern = user.address?.city;
console.log(cityModern); // 東京

// 存在しないプロパティ
const country = user.address?.country;
console.log(country); // undefined（エラーにならない）

// 関数呼び出し
const result = user.greet?.();

Null合体演算子（ES2020）

nullまたはundefinedの場合のみデフォルト値を使用します。

1
2
3
4
5
6
7
8


const value1 = null ?? "デフォルト";
console.log(value1); // デフォルト

const value2 = 0 ?? "デフォルト";
console.log(value2); // 0（||と違い、0やfalseはそのまま使われる）

const value3 = "" ?? "デフォルト";
console.log(value3); // ""

ショートハンドプロパティ

変数名とプロパティ名が同じ場合、省略して書けます。

1
2
3
4
5
6
7
8


const name = "田中";
const age = 25;

// 従来の書き方
const user1 = { name: name, age: age };

// ショートハンドプロパティ
const user2 = { name, age };

計算プロパティ名

オブジェクトのキーを動的に設定できます。

1
2
3
4
5
6
7
8
9


const key = "dynamicKey";

const obj = {
  [key]: "動的な値",
  [`prefix_${key}`]: "プレフィックス付き"
};

console.log(obj.dynamicKey);        // 動的な値
console.log(obj.prefix_dynamicKey); // プレフィックス付き

for…of

配列やイテラブルオブジェクトを反復処理できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


const fruits = ["りんご", "みかん", "ぶどう"];

// for...of
for (const fruit of fruits) {
  console.log(fruit);
}

// インデックスも必要な場合
for (const [index, fruit] of fruits.entries()) {
  console.log(`${index}: ${fruit}`);
}

ES6+機能の早見表

以下に、本記事で紹介したES6+の主要機能をまとめます。

機能	導入バージョン	主な用途
let/const	ES6	ブロックスコープ変数宣言
テンプレートリテラル	ES6	文字列補間、複数行文字列
デフォルト引数	ES6	関数引数のデフォルト値
残余引数	ES6	可変長引数の配列化
分割代入	ES6	配列・オブジェクトからの値抽出
スプレッド構文	ES6	配列・オブジェクトの展開
アロー関数	ES6	簡潔な関数定義、thisの固定
クラス	ES6	オブジェクト指向プログラミング
Promise	ES6	非同期処理の管理
Map/Set	ES6	高機能なコレクション
ES Modules	ES6	コードの分割と再利用
async/await	ES2017	非同期処理の簡潔な記述
オプショナルチェーン	ES2020	安全なプロパティアクセス
Null合体演算子	ES2020	null/undefinedのデフォルト値

まとめ

本記事では、ES6以降で追加されたJavaScriptの主要な機能を網羅的に紹介しました。これらの機能を活用することで、より簡潔で読みやすく、保守しやすいコードが書けるようになります。

各機能のポイントを振り返ります。

let/const: varの問題を解決するブロックスコープ変数宣言
テンプレートリテラル: 文字列補間と複数行文字列を簡潔に記述
分割代入・スプレッド構文: 配列・オブジェクト操作を効率化
アロー関数: 簡潔な関数定義とthisの自動バインド
クラス: 直感的なオブジェクト指向プログラミング
Promise/async/await: 非同期処理をシンプルに管理
Map/Set: 高機能なコレクション型
ES Modules: コードの分割と再利用

まずはlet/const、テンプレートリテラル、アロー関数から使い始めて、徐々に他の機能も取り入れていくことをおすすめします。

はじめに#

ES6+の機能を学ぶ前に#

ECMAScriptとは#

ブラウザ対応状況#

let/constによる変数宣言#

varの問題点#

letとconstの特徴#

使い分けの指針#

テンプレートリテラル#

基本的な使い方#

複数行の文字列#

実践的な活用例#

デフォルト引数と残余引数#

デフォルト引数#

残余引数（Rest Parameters）#

分割代入（Destructuring）#

配列の分割代入#

オブジェクトの分割代入#

関数引数での分割代入#

スプレッド構文#

配列のスプレッド#

オブジェクトのスプレッド#

実践的な活用例#

アロー関数#

基本的な書き方#

アロー関数のthis#

配列メソッドとの組み合わせ#

アロー関数を使うべきでない場面#

クラス構文#

基本的なクラス定義#

継承#

静的メソッドとプロパティ#

Promiseとasync/await#

Promiseの基本#

async/await#

Promise.allとPromise.allSettled#

MapとSet#

Map#

Set#

ES Modules（import/export）#

名前付きエクスポート#

デフォルトエクスポート#

HTMLでのモジュール読み込み#

その他の便利な機能#

オプショナルチェーン（ES2020）#

Null合体演算子（ES2020）#

ショートハンドプロパティ#

計算プロパティ名#

for…of#

ES6+機能の早見表#

まとめ#

参考リンク#

はじめに

ES6+の機能を学ぶ前に

ECMAScriptとは

ブラウザ対応状況

let/constによる変数宣言

varの問題点

letとconstの特徴

使い分けの指針

テンプレートリテラル

基本的な使い方

複数行の文字列

実践的な活用例

デフォルト引数と残余引数

デフォルト引数

残余引数（Rest Parameters）

分割代入（Destructuring）

配列の分割代入

オブジェクトの分割代入

関数引数での分割代入

スプレッド構文

配列のスプレッド

オブジェクトのスプレッド

実践的な活用例

アロー関数

基本的な書き方

アロー関数のthis

配列メソッドとの組み合わせ

アロー関数を使うべきでない場面

クラス構文

基本的なクラス定義

継承

静的メソッドとプロパティ

Promiseとasync/await

Promiseの基本

async/await

Promise.allとPromise.allSettled

MapとSet

Map

Set

ES Modules（import/export）

名前付きエクスポート

デフォルトエクスポート

HTMLでのモジュール読み込み

その他の便利な機能

オプショナルチェーン（ES2020）

Null合体演算子（ES2020）

ショートハンドプロパティ

計算プロパティ名

for…of

ES6+機能の早見表

まとめ

参考リンク