らばーいもっきんぐ

プログラミング等々についての覚え書き

【Vue.js】コンポーネントのdata()について

はじめに

Vue.jsのコンポーネントでdataを定義する際に、公式サイトでは以下のような書き方が使われています。

Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})

data: function() {}と書いていくのが通常なのかと思っていたところ、以下のような書き方もできると知りました。

Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
変わったのはdata: function() {}data() {}となっているところ。 しかし、なぜこの書き方ができるのか分からなかったので調べてみました。

結論

先に結論を書いてしまうと、ECMAScript 2015から省略記法が利用できるようになり、functionを書かずにメソッド(プロパティに関数を格納しているもの)を定義できるようになったため。 以下のリンク先の「メソッドの定義」部分に省略記法についての記載があります。 developer.mozilla.org

JavaScriptのプロパティに関数を格納する書き方

省略記法を用いない場合、オブジェクトのプロパティに関数を格納するには以下のように書きます。

obj = { hoge: function() { console.log("hogehoge") } };
obj.hoge();
//=> hogehoge

これが省略記法を用いると以下のように書けるようになりました。

obj = { hoge() { console.log("hogehoge") } };
obj.hoge();
//=> hogehoge
省略記法を使う場合には:(コロン)とfunctionを書く必要が無くなります。

ここで、もう一度Vueのコンポーネントの記述を見てみると、Vue.componentの第二引数にオブジェクトが渡されており、オブジェクトのプロパティとしてdataが定義されています。 したがって、data(){ }という書き方は省略記法を使ってdataプロパティに関数を格納していると分かりました。

// 省略記法を使ってdataプロパティに関数を格納している
Vue.component('button-counter', {
  data() {  },
})

まとめ

分かってしまうと単に省略記法で書いていただけという結論でしたが、調べる過程でJSの理解が少し深まった気がします。 VueやReactを使うにしても、やはりJSの基本を理解しておくことは大事だと感じました。

参考サイト

developer.mozilla.org

jp.vuejs.org

jp.vuejs.org