モジュール化

ES6ではモジュール化にexportとimportのキーワードを使用します。

// utils.js
export function fetchData(text) {
  // 処理内容
}

// main.js
import { fetchData } from './utils';

fetchData(params); // 処理実行

ブラウザでES6モジュールを利用するには、webpackやrollupなどのバンドラが必要です。バンドル結果を比較すると、webpackは独自のヘルパー関数が多く含まれる一方で、rollupはAMD/UMD形式の関数以外はすべて自身のロジックで構成されています。

クラス構文

ES6のclass構文は、従来のコンストラクタ関数のシンタックスシュガーです。継承などもより明確に記述できます。

// classes.js
// class構文
export class Creature {
    constructor(name) {
        this.name = name;
    }
    consume() {
        console.log(`${this.name} is eating`);
    }
}

export class Cat extends Creature {
    constructor(name) {
        super(name);
        this.name = name;
    }
    meow() {
        console.log(`${this.name} is meowing`);
    }
}

// 通常の関数構文
export function Animal(name) {
    this.name = name;
    this.consume = function() {
        console.log(`function: ${this.name} is eating`);
    }
}
export function Cat2(name) {
    this.meow = function() {
        console.log(`function: ${this.name} is meowing`);
    }
}
Cat2.prototype = new Animal('cat2');

// main.js
import { Cat, Cat2 } from './classes'

const cat = new Cat('タマ')
cat.meow()
cat.consume()

const cat2 = new Cat2('ミケ')
cat2.meow()
cat2.consume()

Promiseオブジェクト

Promiseはコールバック地獄を解消するための仕組みで、3つの状態を持ちます：pending, fulfilled, rejected

const fetchData = new Promise((resolve, reject) => {
	// 処理実行
	if (success) {
		resolve(data);
	} else {
		reject(error);
	}
});

// 使用例
fetchData
	.then(result => {
		// 成功時の処理
	})
	.catch(err => {
		// 失敗時の処理
	});

let/constの導入

letは再代入可能、constは再代入不可です。

let x = 5;
const y = 10;

x = 15; // OK
y = 20; // エラー

テンプレートリテラル

複数行文字列や変数埋め込みが可能になります。

const user = '佐藤';
const years = 30;
const output = `
<section>
	<span>名前: ${user}</span>
	<span>年齢: ${years}</span>
</section>
`;

分割代入

オブジェクトや配列の値を簡単に変数に代入できます。

const data = {
	key1: 'valueA',
	key2: 'valueB'
};
const { key1: firstValue } = data;

ブロックスコープ

varは関数スコープ、letとconstはブロックスコープを持ちます。

// ES5
var obj = { x: 10, y: 20 };
for (var prop in obj) {
	console.log(prop);
}
console.log(prop); // propはグローバルスコープに残る

// ES6
const obj = { x: 10, y: 20 };
for (let prop in obj) {
	console.log(prop);
}
console.log(prop); // undefined

関数のデフォルト引数

function fetchData(param1, param2 = 5) {
	console.log(param1, param2);
}

アロー関数

アロー関数はthisのスコープが周囲のコンテキストを継承します。

function process() {
	const nums = [10, 20, 30];
	nums.map(function(item) {
		console.log('function:', this);
		return item * 2;
	});
	nums.map((item, idx) => {
		console.log('arrow:', this);
		return item * 2;
	});
}

process.call({ val: 200});