Javascriptの関数の引数でよく見る（{ id }）ってどういう意味？ #JavaScript

VueやReactを書いていると、こんな感じの関数をよく見ます。

sample.vue

methods: {
  userData({ id }) {
    // 処理
  }
}

Vuexのactionでも({ commit })という記述をよく見ますよね。

正直、初めて見たときは意味不明でした。引数に波括弧ってどういうこと？みたいな。

同じように思っている人も多い（はず）なので、以下でこの独特な記法について解説していきます。

上記の書き方はES6の分割代入の一種っぽい

分割代入とは、以下のようなものです。

const data = {
  id: 1,
  name: 'taro'
}

const { id, name } = data;

console.log(id); // 1
console.log(name); // taro

dataオブジェクトはidとnameというプロパティを持っています。代入したい変数名とプロパティ名が一致している場合、上記のように書くことで1行にまとめることが可能です。

関数の引数に出てくる波括弧もよく似たもので、上の考え方を少し応用すれば理解できるかと思います。

sample.vue

<template>
  <div>
    {{ displayUserData(userData) }} // taroと表示される
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: {
        id: 1,
        name: 'taro'
      }
    }
  },

  methods: {
    displayUserData({ name }) {
      return name
    }
  }
}
</script>

displayUserDataメソッドの引数は({ name })となっています。これは、引数として渡されたオブジェクトのプロパティにnameがあれば、それを利用するという意味です。

このメソッドを使う場合、上記のようにuserDataオフジェクトをそのまま放り込みます。userDataはnameプロパティを持っているので、この場合は'taro'が表示されます。

これは以下の書き方と同義です。

sample.vue

<template>
  <div>
    {{ displayUserData(userData.name) }} // taroと表示される
  </div>
</template>

<script>
export default {
  data() {
    return {
      userData: {
        id: 1,
        name: 'taro'
      }
    }
  },

  methods: {
    displayUserData(name) {
      return name
    }
  }
}
</script>

displayUserDataの引数から波括弧がなくなり、加えて呼び出し時にuserData.nameと、プロパティを指定しています。

ということは、({ commit })はどういう意味？

Vuexのactionsを定義する際、下記のような書き方をすることが多いかと思います。

sample.js

actions = {
  somethingAction({ commit }) {
    commit('somethingMutation')
  }
}

実は、上記についてはこのように書くこともできます。

sample.js

actions = {
  somethingAction(context) {
    context.commit('somethingMutation')
  }
}

Vuexのactionsはdispatchされると、contextオブジェクトを受け取ります。そしてcontextオブジェクトは、以下のようなプロパティを持っています。

{
  state,
  rootState,
  commit,
  dispatch,
  getters,
  rootGetters
}

ただ、commitしか使わないケースが大半なので、({ commit })と書くことで簡略化することが多いかと思います。

上記の通り、contextオブジェクトはdispatchプロパティも持っているので、以下のような感じにすればactionから別のactionを呼び出すことも可能です。


actions = {
  somethingActions({ commit, dispatch }) {
    commit('somethingMutation')
    dispatch('otherAction')
  }
}

公式ドキュメントにより詳しく書かれているので、もっと詳しく知りたい人はそちらを見てください。。

vuex公式ドキュメント

まとめ

jsフレームワークのconfigファイルとかでもよく出てくる記法なので、理解しておくと便利です。

これらについては、「呼びされるときに呼び出し元からオブジェクトを渡される」ということを知っておくと、より理解しやすいかなと思います。