ES6（ES2015という名でも知られている）には、多くの新機能があって、その一つは destructuring assignment（分割代入）になりました。destructuring というのは、array（配列）やオブジェクトからのデータを取得する方法です。destructuringをよく使えば、コードがわかりやすくて簡潔になります。
本記事、ES6の destructuring について簡単に説明したいと思います。
対象者
- ES6 destructuring については、まだ聞いたことない方
- Javascript語でコードしているけど、ES6を使わない方
- Javascript語でコードしていて、コードが簡潔にしたい方
概要
本記事には、下記とほぼ同じ代入文がよく書いてあります。
const { a, b } = object;
左側：代入されている変数
右側：この変数にデータを取得
ES6 Destructuring (分割代入) はだいたいそういうふうに書きますが、オブジェクトだけではなく、配列もString型も分割できます。それをもとに、本記事がいくつかの部分に分けています。
配列
ES6で、配列されているデータを分割代入できますが、まず、ES6がなしでの仕方を見ましょう。
const emojis = ['🙂', '🤣', '👿', '🤖'];
const smile = emojis[0];
const laugh = emojis[1];
console.log(smile, laugh); // 🙂 🤣
それは、何も間違っていませんが、下記にするのはどう思いますか？（ES6で）
const emojis = ['🙂', '🤣', '👿', '🤖'];
const [smile, laugh] = emojis;
console.log(smile, laugh); // 🙂 🤣
これで、もっとわかりやうくて簡潔になりましたが、いくつかのデータがいらないなら、どうしますか？
配列のデータを抜かすこと（スキップ）
配列を分割すると, いくつかのデータはいらないかもしれないので、それが抜かすことができます。 いくつかも抜かせます。
const emojis = ['🙂', '🤣', '👿', '🤖'];
const [smile,, devil] = emojis;
const [, laugh,, robot] = emojis;
console.log(smile, devil, laugh, robot); // 🙂 👿 🤣 🤖
rest オペレーターの使用
「rest」というのは、英語で「その他」という意味なので、このオペレーターを使うと、配列の他のデータを取得できます。restオペレーターは、... のシンタクスで使います。例えば：
const emojis = ['🙂', '🤣', '👿', '🤖'];
const [smile, laugh, ...notHuman] = emojis;
console.log(smile, laugh, notHuman); // 🙂 🤣 ['👿', '🤖']
繰り返し可能な変数（iterables）
iterable（繰り返し可能）な変数（String型など）も分割代入できます。
const alphabet = 'abcdefg';
const [a, b, c] = alphabet;
console.log(a, b, c); // a b c
オブジェクト
ES6で、オブジェクト（JSON型）されているデータも分割代入できます。
const user = {
id: 1,
name: 'Sam',
age: 20
};
ES6がなしでの仕方で、こういうふうにします。
const id = user.id;
const name = user.name;
const age = user.age;
ES6の分割代入で：
const { id, name, age } = user;
console.log(id, name, age); // 1 Sam 20
この仕方では、変数の名前とオブジェクトのデータの名前が同じにしなければなりません。
他の名前を使うこと
上記に書いてあるのは、変数の名前とオブジェクトのデータの名前が同じにしなければなりませんが、他の名前も使えます。
const { originalName: newName } = object;
// 例えば
const { name: userName, age: userAge } = user;
欠席値 (default value) の定義
オブジェクトを分割して、オブジェクトの属性に値がない場合、欠席値 (default value) を定義することができます。
const { name, country = 'Philippines' } = user;
userという上記に書いてあるオブジェクトには、countryという属性がなかったので、undefinedになりますが、この default シンタクスで、countryはPhilippinesという値が保存されます。
機能のパラメーター
// 上記に書いてあるuserオブジェクトを使って、自己紹介の機能
const introduction = ({ name, age, country }) => {
console.log(`Hello! I am ${name}, ${age} years old from the ${country}`);
}
// Hello! I am Sam, 20 years old from the Philippines
入れ子にされた (nested) オブジェクト
普通のオブジェクトの書き方にちょっと違いますが、入れ子にされたオブジェクトにも分割代入できます。例えば：
const person = {
name: 'Sam',
age: 20,
country: 'Philippines',
parents: {
father: 'Mario',
mother: 'Sally'
}
};
こういうオブジェクトありますが、parentsという属性だけを取得したいので、ES6がなしで、こうします：
const father = person.parents.father;
const mother = person.parents.mother;
console.log(father, mother); // Mario Sally
ES6で：
const { parents: { father, mother } } = person;
console.log(father, mother); // Mario Sally
コードがもっと読みやすくて簡潔になりました 
変数の交換（入れ替え）
ES6 Destructuring (分割代入) は、配列やオブジェクトだけのためではなく、変数の入れ替えにも使えます。例えば、このaとbという変数があります。
let a = 1;
let b = 2;
交換したいなら、もう一つの変数が必要になります。
let temp = a;
a = b;
b = temp;
その方法は、読みにくくて簡潔ではありませんが、ES6 Destructuring のおかげで、こういうコードだけでできます。
[a, b] = [b, c];
まとめ
上記の事例で、ES6 Destructuring (分割代入) を使えば、コードが短くて読みやすくなるということが見えます。なので、皆さんのコードには、こういうコード：
a = object.a;
b = object.b;
c = object.c;
d = object.d;
...
z = object.z;
// 🤣
があれば、ES6 Destructuring使用の良い機会になりますね。一緒にES6 Destructuring で簡潔なコードを書きましょう！