【Vue.js】ユーザーアクション編[methods/v-on:(@)/emit()]

methods()

【methods】とは

[実装例]あいさつボタンを押した際に下にこんにちはと表示される。
・イベントに応じた処理（関数）を定義することができる。
・Vue2では、export defalt methodsとすることで関数を定義することができた。
・Vue3では、<script setup>構文を使うことで、methodsオブジェクトの定義は不要となった。

Vue2での記述方法　VS Vue3での記述方法

Vue2だとexport defalt methodsとする必要があった。

<template>
  <button @click="sayHello">挨拶</button>
</template>

<script>
export default {
  methods: {
    sayHello() {
      alert('こんにちは！');
    }
  }
}
</script>

Vue2だとexport defalt methodsの記載がなくて済む。

<template>
  <button @click="sayHello">挨拶</button>
</template>

<script setup>
  function sayHello() {
    alert('こんにちは！')
  }
</script>

methodsの実装例と解説

実装例（あいさつボタンを押した際に下にこんにちはと表示させる）

<template>
  <button @click="sayHello">挨拶</button>

  <!-- 下にメッセージを表示 -->
  <p v-if="message" style="margin-top: 10px; color: green;">{{ message }}</p>
</template>

<script setup>
import { ref } from 'vue'

// メッセージを保持する変数
const message = ref('')

// メッセージを表示させるmethods
function sayHello() {
  message.value = 'こんにちは！'
}
</script>

v-on:(@)

【v-on:(@)】とは

[実装例]ボタンをクリック（@click）すると在庫量が減る
・v-on:（略記法 @）は、テンプレート内でイベントリスナーを登録するためのディレクティブ。
・何らかのイベントが発生して処理を行わせたい場合に用いる。
・JavaScript の addEventListener と同じような働きをする。

通常の記述 VS 略記法による記述

通常の記述

<button v-on:click="sayHello">挨拶</button>

略記法による記述（v-on

<button @click="sayHello">挨拶</button>

methodsの実装例と解説

実装例（ボタンを押した際に在庫量を減らす）

<template>
  <p>在庫: {{ stock }}</p>
  <button @click="stock--">購入</button>
 // ↑　ボタンがクリックされたら、在庫を1つ減らす（stock = stock - 1 の短縮記法）。
 // ↑　本当はstockの処理を<script>内に記述してもよいが、処理が簡単であるため<template>内に記載
</template>

<script setup>
import { ref } from 'vue'
const stock = ref(5)
// ↑ {{ stock }} の部分をリアクティブに監視している
</script>

emit()

【emit()】とは

[実装例]ボタンを押すと子コンポーネント内の処理を親コンポーネントへメッセージを送ることができる
・Vue コンポーネント間で子コンポーネントから親コンポーネントへイベントを送るために使う仕組み。
・子コンポーネント内で「このイベントが起きたよ！」と親に通知するための関数。
・emitは放出するなどの意味があるため、子 → 親へイベント（emit()）でを放出、通知するなどでイメージする。
・emitはを用いることで、関心の分離（子は「何をすべきか」ではなく「イベントが起きた」ことだけを親に伝える）、再利用性の向上（子が何をするかを限定しないため、どの親からも使いやすくなる）、状態の一元管理（親がデータ（state）を管理し、子は表示や入力に専念する）することができる。

子から親に通知が必要な理由

Vue.jsは基本的に「親が子をコントロールする」という一方向のデータフローである。

• 1. 子は自分自身の中だけの処理に専念すべき
     子コンポーネントは「ボタンを押した」などのイベントは検知できますが、「画面全体の状態を変更する」責任がないため。
• 2. 親がデータの持ち主（状態管理の中心）だから
     子が何かのアクションをしたら、その影響を反映させるのは親の役割であるため、たとえば「子の操作によって画面全体の表示を変えたい」や「子が送った値を保存したい、APIに投げたい」など。

emit()の実装例と解説

src/components/UserActionChild.vueを作成し、子コンポーネントとする

<template>
  <button @click="sendEvent">親に通知する</button>
// ↑　ボタンを配置し、クリックメソッドを定義
</template>

<script setup>
const emit = defineEmits(['customEvent'])
 // ↑　emit 関数を使えるようにするのが defineEmits()。このコンポーネントは customEvent というイベントを親に送るという記述。

function sendEvent() {
  emit('customEvent', '子コンポーネントからのメッセージです！')
}
 // ↑customEvent というイベントを、'子コンポーネントからのメッセージです！' というデータ付きで親に送る。
</script>

src/views/UserActionView.vue

<template>
  <div>
    <h1>emit()</h1>
    <UserActionChild @customEvent="handleCustomEvent" />
　　// ↑ UserActionChild コンポーネント内で customEvent が emit されたら、親で handleCustomEvent 関数を実行してねという意味。
    <p>子から受け取ったメッセージ: {{ messageFromChild }}</p>
  </div>
</template>
<script setup>
import { ref } from 'vue'
import UserActionChild from '../components/UserActionChild.vue'
// ↑ 子コンポーネントを読み込むための記述

const messageFromChild = ref('')
// ↑ messageFromChildを監視

function handleCustomEvent(message) {
  messageFromChild.value = message
}
// メッセージをmessageFromChildに代入
</script>

ここまで聞くと、小さな部品（子）を作成して、それぞれから親にemitを使って通知することで分離が可能となり保守性があがることがわかる。以下に部品を提供しているライブラリをまとめている。

UIコンポーネントライブラリ

コンポーネントライブラリ5選

1. Vuetify

https://vuetifyjs.com/ja/
特徴：Google の Material Design 準拠。見た目がしっかりしていて、業務アプリに向いている。
提供：フォーム、テーブル、ダイアログ、ナビゲーションなど一式。

2. Element Plus

https://element-plus.org/en-US/
特徴：中国の企業Elemeが開発、エンタープライズ系に強い。控えめで整ったUI。

3. Naive UI

https://www.naiveui.com/en-US/os-theme
特徴：Vue 3 + TypeScript フル対応。テーマカスタマイズが柔軟。

4. Quasar

https://quasar.dev/
特徴：SPA、SSR、PWA、モバイルアプリまで一括開発可能。

5. PrimeVue

https://primevue.org/
特徴：非常に豊富な部品群（100種類以上！）。業務アプリや管理画面に向いている。日本語の情報も比較的豊富。