Edited at

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 シンタクスで、countryPhilippinesという値が保存されます。


機能のパラメーター

// 上記に書いてある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

コードがもっと読みやすくて簡潔になりました :thumbsup:


変数の交換(入れ替え)

ES6 Destructuring (分割代入) は、配列やオブジェクトだけのためではなく、変数の入れ替えにも使えます。例えば、このabという変数があります。

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


参考