Vue.jsを学習する上で知っておきたいES2015の文法

Vue.jsは公式ドキュメントを始め、ネット上のほとんどのサンプルがES2015(ES6)の表記で実装されています。

Vue.jsで頻繁に使用するであろうES2015の文法を紹介します。

変数のスコープ

従来のJavaScriptではforやifの中でのみ使用可能なブロックスコープの変数が使えませんでした。

varをつけたりつけなかったりで、グローバル変数や関数内でのみ利用可能なローカル変数を定義していて、意外とあまり良くわからずになんとなく使われていた気がします。

ES2015では、他の言語で親しみがあるであろうブロックスコープの変数を定義できるようになります。

const foo = 'abc' // 再代入不可のconst変数を定義
foo = 'def' // 再代入できないためエラーになる
const obj = {
  bar: 123
}
// objectの要素の代入は可能
obj.bar = 456;

if (huga === 1) {
  let foo = 'abc' // ブロック変数を定義
  foo = 'def' // 再代入は可能
  console.log(foo); // defと出力される
}
console.log(foo); // 参照できないためエラーになる

これにより、他の言語と同じようにスコープがはっきりして、実装しやすくなります。

object

ショートハンドプロパティ

変数名とプロパティ名が同じ場合は省略できます。

const name = 'abc';
const age = 30;
const person = {
  name,
  age
};

// 従来の方法
var person = {
  name: name,
  age: age
};

functionの省略

objectの中にfunctionを定義する場合は「function」の文言を省略して簡潔に実装できるようになります。

これはコンポーネントを実装する上で欠かせないので特に覚えておく必要があります。

{
  methods: {
    update () {
      console.log('update');
    },
    insert () {
      console.log('insert');
    }
  }
}

// 従来の方法
{
  methods: {
    update: function () {
      console.log('update');
    },
    insert: function () {
      console.log('insert');
    }
  }
}

注意点

ES2015ではアローファンクションが使えますが、以下のようにコンポーネント内でアローファンクションを使ってしまうとthisのスコープが変わってしまうので、vueコンポーネントの中では注意が必要です。

{
  methods: {
    update () {
      this.foo // 正しい
    },
    update: function () {
      this.foo // 正しい
    },
    update: () => {
      this.foo // 間違い thisが想定された動きにならない
    }
  }
}

スプレッド演算子

Vuexを使う場合はmapStateやmapMutationなどで使用することになります。

Vuex stateを作成して各コンポーネントで参照するで紹介したように、スプレッド演算子はstage-3なのでbabelの設定が必要です。

配列の中に配列を展開できます。下記のサンプルのように、展開というより「埋め込む」といったほうがわかりやすいかもしれません。

const array = [1, 2, 3];
const array2 = [...array, 4, 5, 6];
console.log(array2); // [1, 2, 3, 4, 5, 6]

// Vuex
// mapMutationのファンクションで取得した配列をmethodsの配列に埋め込む
{
  methods: {
    ...mapMutation({
      foo
    }),
    update () {
      console.log('update');
    }
  }
}

objectの引数の受け取り

主にVuexのactionやmutationで使われます。


const param = {
  message: 'foo',
  id: 123
}

update(param); // ファンクションをコール

function update ({ message }) { // objectの中で使用するもののみ受け取る
  console.log(message); // foo
  console.log(id); // undefined
};
// 従来の方法
function update (param) {
  console.log(param.message); // foo
  console.log(param.id); // 123
};