[ES6] 分割代入（Destructuring assignment）を使いこなす

こんにちは、久々にフロントエンドに戻ってきて楽しい@yoheiMuneです。
今日はES2015（ECMAScript6）の仕様のうちの一つ、分割代入（Destructuring assignment）についてブログを書きたいと思います。パッと見たときはそんなでもなかったんですが、しっかりと学ぶと非常に便利な仕様だと感じてきました。

目次

分割代入とは

分割代入（Destructuring assignment）は、複数の変数に一気に値を代入できる機能です。例えば以下のような感じになります。

var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

これだけ見るとそんなでもないですが、後述の通り、関数で複数の値を返却できたり、初期値の設定が柔軟になったりと便利なことが多い機能です。

配列形式（Array destructuring）で使う

それではまずは基本的な使い方を見て見たいと思います。代入方法には大きく配列形式とオブジェクト形式があります。ここでは配列形式を見てみたいと思います。

// 2つの変数に一気に代入
var a, b;
[a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 以下のように残りの部分を全て受け取ることもできます。
[a, b, ...rest] = [1, 2, 3, 4, 5];
console.log(a);    // 1
console.log(b);    // 2
console.log(rest); // [ 3, 4, 5 ]

// 初期値を指定しておくこともできます
[a=10, b=20] = [1];
console.log(a); // 1
console.log(b); // 20

この機能を用いることで、関数で複数の値を返却することもできます（これ便利）。

function getValues() {
    return [100, 200];
}
[a, b] = getValues();
console.log(a); // 100
console.log(b); // 200

また、以下のような値の入れ替えも1行で実装可能です。

a = 10, b = 20;
[a, b] = [b, a];
console.log(a); // 20
console.log(b); // 10

こんな感じで、いろいろと使いどころの多い機能です。

オブジェクト形式（Object destructuring）で使う

続いてオブジェクト形式です。以下のように使うことができます。

// オブジェクト形式の基本的な使い方
({a, b} = {a:"a", b:"b"});
console.log(a); // a
console.log(b); // b

// 初期値の指定も行うことができます
var {a=10, b=5} = {a: 3};
console.log(a); // 3
console.log(b); // 5

// 別名で受け取ることもできます.
let person = {name : 'Yohei'};
let {name: firstName} = person;
console.log(firstName);   // Yohei

また、以下のようにモジュールのインポートの時に複数の値や処理を一気にインポートすることができます。

// mymodule.js
module.exports = {
    sayHi: () => console.log("Hi"),
    sayGoodby: () => console.log("Goodby")
};

// requireで一気に読み込む
const {sayHi, sayGoodby} = require('./mymodule.js');
sayHi();      // Hi
sayGoodby();  // Goodby

また、ES6のimportでも同じような感じで利用できます（Reactのサンプルとかではよく使われています）。

// ES6のexport例
// mymoduleES6.js
export var foo = () => "foo";
export var bar = () => "bar";

import {foo, bar} from "./mymoduleES6.js"
print(foo()); // foo
print(bar()); // bar

またfor-of文でも使えます。

// for-ofで分割代入を使う
var people = [
    {
        id: 1,
        name: "Yohei",
        age: 30
    },
    {
        id: 2,
        name: "Mizuno",
        age: 32
    }
];
for (var {id, name, age} of people) {
    console.log(id, name, age);
}

また、以下のように関数の引数に用いることで、オブジェクトの中身を引数で受け取ることができます。

var user = {
    id: 77,
    name: "Yohei",
    age: 30
};

// 関数の引数に分割代入を使う
function userId({id}) {
    return id;
}
console.log(userId(user)); // 77

// 関数の引数に分割代入を使う②
function whois({name, age}) {
    return `I'm ${name}, ${age} years old.`;
}
console.log(whois(user)); // I'm Yohei, 30 years old.

// 初期値を指定することもできます
function whois2({name="Mizuno", age=32} = {}) {
    return `[v2] I'm ${name}, ${age} years old.`;
}
console.log(whois2()); // [v2] I'm Mizuno, 32 years old.

ここで`を用いたテンプレート文字（Template string）を用いてますが、それもES6の機能です。詳細は「[フロントエンド] Chrome41βのリリース内容まとめ。Template文字、let/const、image-rendering、DEVツール新機能など」をご確認ください。

分割代入をブラウザでも使う

Babelを使ってコンパイルすることで、現状でもブラウザで使うことができます。詳細は「[フロントエンド] 次世代JavaScriptのコンパイラ、Babelに入門」をご参照ください。
また、途中で説明しましたES6のimportとexportも使いたい場合には、「[フロントエンド] ES2015のimport/exportをブラウザで使うためのコンパイル（Babel × Browserify）」を用いることで、ブラウザでも利用できます

参考資料

分割代入については以下で学びました。ありがとうございます。

lukehoban/es6features: Overview of ECMAScript 6 features

Destructuring assignment - JavaScript | MDN

最後に

分割代入を初めて見たときは「なんだこの変な感じの書き方はー！」と思ったんですが、それにめげずに学んでよかったです。非常に便利な機能ですね。Babelでも完璧にコンパイルできるので今すぐにでも実践に導入したいところです（実際に担当プロジェクトでは既に使っています）。今後もES6の機能を腰を据えて学んで、ブログに書いていけたらと思います。

最後になりますが本ブログでは、フロントエンド・開発関連・Swift・Linux・Python・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！