ES6 Destructuring (分割代入) で簡潔なコードを書こう！

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 で簡潔なコードを書きましょう！

参考

• Object Destructuring in ES6 | DEV.to
• ES6 Destructuring
• 分割代入 - Javascript | MDN