ES6は…#

JavaScriptの6番目のメジャーバージョン
正式名称はECMAScript 2015
2015年6月にリリース

ES6では#

従来のJavaScriptに多くの新機能や構文が追加
JavaScriptのコードがより簡潔で読みやすく、効率的に書けるように

主な新機能#

クラス構文: オブジェクト指向プログラミング#

1
class Person {
2
  constructor(name, age) {
3
    this.name = name;
4
    this.age = age;
5
  }
6

7
  sayHello() {
8
    console.log(`Hello, my name is ${this.name}.`);
9
  }
10
}
11

12
const person = new Person('John Doe', 30);
13
person.sayHello(); // Hello, my name is John Doe.

モジュール: コードを分割して管理しやすく#

1
export function add(a, b) {
2
  return a + b;
3
}
4

5
export function subtract(a, b) {
6
  return a - b;
7
}
8

9
// 他のファイル
10

11
import { add, subtract } from './math.js';
12

13
const result = add(1, 2); // 3
14
console.log(result);
15

16
const difference = subtract(4, 2); // 2
17
console.log(difference);

アロー関数: 関数をより簡潔に記述#

1
// 従来の関数
2
function add(a, b) {
3
  return a + b;
4
}
5

6
// アロー関数
7
const add = (a, b) => a + b;
8

9
const result = add(1, 2); // 3
10
console.log(result);

デフォルト引数: 関数の引数にデフォルト値を設定できるように#

1
function add(a, b = 1) {
2
  return a + b;
3
}
4

5
const result1 = add(1, 2); // 3
6
console.log(result1);
7

8
const result2 = add(1); // 2
9
console.log(result2);

スプレッド構文: 配列やオブジェクトを展開して使用できるように#

1
// 配列の連結
2

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

6
const arr3 = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6]
7
console.log(arr3);
8

9
// オブジェクトのマージ
10

11
const obj1 = {
12
  name: 'John Doe',
13
  age: 30
14
};
15

16
const obj2 = {
17
  address: '123 Main Street',
18
  city: 'New York'
19
};
20

21
const obj3 = {...obj1, ...obj2}; // { name: 'John Doe', age: 30, address: '123 Main Street', city: 'New York' }
22
console.log(obj3);
23

24
// 関数引数の展開
25

26
function sum(a, b, c) {
27
  return a + b + c;
28
}
29

30
const numbers = [1, 2, 3];
31

32
const result = sum(...numbers); // 6
33
console.log(result);

テンプレートリテラル: 文字列をより簡単に記述できるように#

従来では、文字列を連結するには、+ 演算子を使用
- コードが冗長になりがち
テンプレートリテラルは、バッククォート文字 (`) を使用して記述
- 文字列をより簡単に記述

1
const name = 'John Doe';
2
const age = 30;
3

4
const greeting = `Hello, ${name}. You are ${age} years old.`;
5
console.log(greeting);

Promise: 非同期処理をより簡単に記述できるように#

1
function getData() {
2
  return new Promise((resolve, reject) => {
3
    setTimeout(() => {
4
      resolve('Hello, world!');
5
    }, 1000);
6
  });
7
}
8

9
getData().then((data) => {
10
  console.log(data); // Hello, world!
11
});