JavaScript ES6 機能完全ガイド【2025年最新版】

📚 基礎知識

ES6は、従来のJavaScript（ES5）の機能を拡張したものであり、既存のコードとの互換性を保ちつつ、より洗練された構文と機能を提供します。 ES6の導入により、コードの可読性、保守性、効率が向上しました。

🔍 詳細解説

letとconst

varは関数スコープであり、ブロックスコープを持たないため、予期せぬバグを引き起こす可能性があります。 letとconstはブロックスコープを持ち、変数の再宣言を防ぎます。 constは定数であり、再代入できません。

// var
var x = 10;
if (true) {
  var x = 20; // xの値は20に変わる
}
console.log(x); // 20

// let
let y = 10;
if (true) {
  let y = 20; // 新しいyが作成される
}
console.log(y); // 10

// const
const z = 30;
// z = 40; // エラー: Assignment to constant variable.

アロー関数

アロー関数は、従来の関数式よりも簡潔に書くことができる関数です。 特に、コールバック関数を記述する際に便利です。

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

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

console.log(add(5, 3)); // 8
console.log(addArrow(5, 3)); // 8

クラス

ES6では、クラスというキーワードが導入され、オブジェクト指向プログラミングがより容易になりました。 JavaScriptはプロトタイプベースのオブジェクト指向言語ですが、クラスを使用することで、より直感的にオブジェクトを定義できます。

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

  speak() {
    console.log(`${this.name} says Hello`);
  }
}

const dog = new Animal("Dog");
dog.speak(); // Dog says Hello

テンプレートリテラル

テンプレートリテラルは、文字列をより柔軟に扱うための機能です。 変数を文字列の中に埋め込んだり、複数行の文字列を簡単に記述できます。

const name = "Alice";
const age = 25;

// 従来の文字列結合
const message1 = "My name is " + name + " and I am " + age + " years old.";

// テンプレートリテラル
const message2 = `My name is ${name} and I am ${age} years old.`;

console.log(message1);
console.log(message2);

⚡ 実践ガイド

mkdir es6-project
cd es6-project
npm init -y

// index.js
const add = (a, b) => a + b;
console.log(add(5, 3));

node index.js

🎯 応用編

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

const combinedArray = [...arr1, ...arr2];
console.log(combinedArray); // [1, 2, 3, 4, 3]

🛠️ トラブルシューティング

🎉 まとめ