個人的に好きなVueの書き方２選 | cloud.config Tech Blog

Power Platform を好奇心でいじってるエンジニア歴 2 年目の、横田です！
今回は、最近感動した個人的に好きな Vue の書き方２選を紹介します！
※書き方は好き嫌いがあるので、そこはご容赦ください！

１. computedに定数を定義する書き方

ついつい定数とか変数をdataに書きがちで、dataの可読性が低くなりがちでした。これはcomputedに定数を書くとすっきりします！変数か定数かの見分けも一目瞭然ですし、dataと違ってcomputedだと値が変更されないので、とても綺麗に感じます！

やりがちな例

// やりがちな例
export default {
  data() {
    return {
      max: 5,
      count: 0
    }
  }
}

感動した例

// 感動した例
export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    max() {
      return 5
    }
  }
}

props で受け取った値に対して定数化するのも良いです！props が変わればcomputed も更新されます！

// 感動した例
export default {
  props: {
    firstName: {
      type: String,
      default: ''
    },
    lastName: {
      type: String,
      default: ''
    }
  },
  computed: {
    initial() {
      return `${this.firstName.slice(0, 1)}.${this.lastName.slice(0, 1)}`
    }
  }
}

２. $emitを活用した子のイベントの書き方

子のpropsが多くて親のinterfaceが見づらくなることってありませんか？そんな時は、$emitを活用してイベント系のpropsをわかりやすくすることで少しすっきりさせることができます！

やりがちな例

//　やりがちな例（子：child.vue）
<template>
  <button @click="clickEvent"></button>
</template>

<script>
export default {
  props: {
    clickEvent: {
      type: Function,
      required: true,
    },
  },
}
</script>

//　やりがちな例（親：parent.vue）
<template>
  <child :clickEvent="clickConfirm" />
</template>

<script>
import child from '~/components/child'
export default {
  components: {
    child
  },
  methods: {
    clickConfirm() {
      confirm('ok?')
    }
  }
}
</script>

感動した例

//　感動した例（子：child.vue）
<template>
  <button @click="$emit('click-event')"></button>
</template>

//　感動した例（親：parent.vue）
<template>
  <child @click-event="clickConfirm" />
</template>

<script>
import child from '~/components/child'
export default {
  components: {
    child
  },
  methods: {
    clickConfirm() {
      confirm('ok?')
    },
  },
}
</script>

一見、そんな変わらないように見えますが、interfaceが増えるとclickイベントの見分けがつきやすくなります！

<child
  first-name="yokota"
  last-name="rikiya"
  birthday="2019/01/01"
  @click-delete="clickDelete"
  @click-confirm="clickConfirm"
  @click-edit="clickEdit"
/>

ただ、１点わかりづらいのがクリックイベントのinterfaceがpropsに定義されていないことです。コンポーネントを使う際に、クリックイベントの名前とか構成とかを一々調べないといけないので、再利用性が落ちてしまう気がします。そこで、$emit内のクリックイベントの名前を定数として定義するとわかりやすいかと思います！他にもスマートな書き方がありそうなので、ぜひ知っている方は教えてください！

//　$emit内のクリックイベントの名前を定数として定義する例（子：child.vue）
<template>
  <button @click="$emit(propsClickEventName)"></button>
</template>

<script>
export default {
  computed: {
    propsClickEventName() {
      return 'click-event'
    }
  }
</script>

まとめ

今回は、個人的に好きなVueの書き方２選を紹介しました！
１つ目はcomputedに定数を定義する書き方、２つ目は$emitを活用した子のイベントの書き方でした！どなたかのお役に立てれば嬉しいです！
「お！いいね！」って思った方は、グッドボタンお願いします！