[JavaScript | ES6] Vuexで … のシンタックスでエラー。ES6 で見慣れないシンタックスがあったとき

2017/06/17

こんにちは。きんくまです。

ES6のシンタックス、時々見慣れないものとかがあります。

VuexというReduxのVue版があるのですが、真似してコード書いたらエラー。

そんでサンプルのソースを見ていたら、どうやらBabelのプラグインを入れてるみたい。

インストールします

npm install --save-dev babel-plugin-transform-object-rest-spread

.babelrc の plugins の配列に追加します。presetsのところはもともと書いてあったやつだと思ってください。

{
  "presets": [
    ["env", { "modules": false }],
  ],
  "plugins": [
    "transform-object-rest-spread",
  ]
}

サンプルコード

これはどんなものかというと、こんな感じに、… の3つのピリオドを続けてうつシンタックスが追加されます。

let obj1 = {
    a:"name"
};

let obj2 = {
    b:'hello',
    obj1
};

let obj3 = {
    b:'hello',
    ...obj1
};

console.log(obj1); //-> {a: "name"}
console.log(obj2); //-> {b: "hello", obj1: Object}
console.log(obj3); //-> {b: "hello", a: "name"}

obj2の方は、obj1というキーにobj1そのものが値が入るのに対して、
obj3の方は、obj1の中身のaというキーがそのまま入っています。

これの面白いところは、値がコピーされて入るところです。

ためしにobj3のaを変更してみます。

obj3.a = "abc";

console.log(obj1); //-> {a: "name"}
console.log(obj3); //-> {b: "hello", a: "abc"}

すると、obj1.a はそのままで、obj3.a だけが変更されました。

今は、Objectに対して書いたのですが、配列についても書いてみます。

let arr1 = ["a", "b"];

let arr2 = [...arr1, "c"];

console.log(arr2); //-> ["a", "b", "c"]

arr2[1] = "d";

console.log(arr1); //-> ["a", "b"]
console.log(arr2); //-> ["a", "d", "c"]

同じように値のコピーが行われています。

なんか書いてて思い出したのだけど、前にReactをちょっと触ったときに、この書き方があった気がしました。

あると便利なBabelのプラグイン

上のも便利なんですが、Classのインスタンスプロパティを追加できるやつもあると便利です。

ES6のクラスだと、他のクラスベースの言語みたいに、インスタンスプロパティが追加できません。
なので、追加します。

>> Class properties transform

これやると、こんな感じにいわゆる普通のクラスが書けます。

class Person {
    age = 30;      //プラグイン入れないとエラー
    name = "Mike"; //ここも！
    greet(){
        console.log(`Hello! I'm ${this.name}`)
    }
}

let p = new Person();
console.log(p.age);
p.greet();

その他　チートシートみたいの

ES6で検索すると一番上に出てくる、このページが書き方が一覧で載っていて便利でした。

>> ECMAScript 6: New Features: Overview and Comparison

あと見慣れない書き方だと、Objectのキーがこんな感じに書けるようになっていました。

let key = "counter";

let obj = {
    [key + 0]:"This is counter."
};

console.log(obj.counter0);

//以前の書き方だと
let obj2 = {};
obj2[key + 0] = "This is counter.";

それで、これにアロー関数とかを組み合わせて書いたりすることができます。
下のものは全て同じ関数に変換されます。

let key = "counter";

let obj = {
    [key + 0]: function(count){
        return count + 1;
    },
    [key + 1]: (count) => {
        return count + 1;
    },
    [key + 2] (count) {
        return count + 1
    },
    [key + 3]: count => count + 1,
};

let result = obj.counter1(5);
console.log(result); //-> 6

不思議なのは一番最後の書き方で、return を書かなくても return が追加されるところでしょうか。CoffeeScriptとかも常にreturnが追加されていましたね。

一番最後を { count + 1 } というふうに {} で囲ってみたら、return は追加されませんでした。

という感じでございます。ではでは。