メソッド（アプリケーションの振る舞い）を定義するmethods [Vue.js]

本記事では、Vue.jsで作成するアプリケーションのメソッド（振る舞い）を定義するmethodsプロパティオプションについて紹介します。

1 methodsプロパティオプション
2 methodsオプションの書式
3 methodsオプションにメソッドを定義する
4 メソッドを呼び出す

methodsプロパティオプション

アプリケーションでは様々な処理を行い、アプリケーションの動作を作っていきます。
例えば、画面（ページ）上のボタンがクリックされた時にユーザーに対して処理確認のメッセージを表示したり、テキストボックスの値が変更されてフォーカスが他のコントロール（要素）に移動した時に入力された値のチェックを行ったりします。
このアプリケーションの動作はメソッドで行います。
Vueインスタンスに定義するオプションオブジェクトの中で、メソッドを定義するために用意されているオプションオブジェクトがmethodsプロパティオプションになります。

methodsオプションに定義したメソッドをHTML要素のイベントなどに割り当てることで、ユーザーの操作に応答するアプリケーションを実装することができます。
また、データベースやファイルから取得したデータをユーザーに表示するために加工したりすることもメソッドで行うことができます。

methodsオプションの書式

methodsオプションには、定義するメソッドの名前と処理を記述するための関数を記述します。

methodsオプションは、次の書式で定義されます。

methods: {
  メソッド名: 関数定義
}

methods: {

メソッド名: 関数定義

}

「メソッド名」がキー（プロパティ名）、「関数定義」が値になります。
「関数定義」の部分には「function() {}」が入りますので、次のように記述することになります。

methods: {
  メソッド名: function() {
    // 処理をここに記述
  }
}

methods: {

メソッド名: function() {

// 処理をここに記述

}

methodsオプションには複数のメソッドが定義できます。
複数のメソッドを定義する場合は、カンマ「,」で区切ります。

methods: {
  メソッド名1: function() {
    // 処理をここに記述
  },
  メソッド名2: function() {
    // 処理をここに記述
  },
  メソッド名3: function() {
    // 処理をここに記述
  }
}

methods: {

メソッド名1: function() {

// 処理をここに記述

メソッド名2: function() {

// 処理をここに記述

メソッド名3: function() {

// 処理をここに記述

}

methodsオプションにメソッドを定義する

ここでは、methodsオプションにメソッドを定義する例をいくつか紹介します。

戻り値（返り値）がないメソッドを定義する

以下に示す例では、戻り値を持たないメソッド（voidメソッド）を定義します。

Vue.createApp({
  methods: {
    myMethod: function() {
      var a = 1;
      var b = 2;
      var c = a + b;
      console.log(c);
    }
  }
}).mount('#app')

Vue.createApp({

methods: {

myMethod: function() {

var a = 1;

var b = 2;

var c = a + b;

console.log(c);

}

}).mount('#app')

上記の例では、メソッド（関数）内で足し算をして、その結果をコンソールログに出力しています。

戻り値（返り値）があるメソッドを定義する

以下に示す例では、戻り値を持つメソッド（returnで値やオブジェクトを返すメソッド）を定義します。

Vue.createApp({
  methods: {
    myMethod: function() {
      var a = 1;
      var b = 2;
      var c = a + b;
      return c;
    }
  }
}).mount('#app')

Vue.createApp({

methods: {

myMethod: function() {

var a = 1;

var b = 2;

var c = a + b;

return c;

}

}).mount('#app')

上記の例では、メソッド（関数）内で足し算をして、その結果を呼び出し元に返しています。

引数があるメソッドを定義する

以下に示す例では、引数を受けるメソッドを定義します。

Vue.createApp({
  methods: {
    myMethod: function(a, b) {
      var c = a + b;
      console.log(c);
    }
  }
}).mount('#app')

Vue.createApp({

methods: {

myMethod: function(a, b) {

var c = a + b;

console.log(c);

}

}).mount('#app')

上記の例では、メソッド（関数）内で受け取った引数の「a」と「b」を足し算をして、その結果をコンソールログに出力しています。

イベントメソッドを定義する

以下に示す例では、ボタンがクリックされた時のイベントで実行するメソッドを定義します。

Vue.createApp({
  methods: {
    myMethod: function(event) {
      alert(event.shiftKey);
    }
  }
}).mount('#app')

Vue.createApp({

methods: {

myMethod: function(event) {

alert(event.shiftKey);

}

}).mount('#app')

上記の例では、ボタンがクリックされた時に呼び出されるメソッドを定義し、イベントが発生した際に引数として渡されるMouseEventオブジェクトのshiftKeyメソッドを利用して、ボタンがクリックされた時にShiftキーが押されているかどうかをメッセージダイアログボックス（アラート）に表示しています。
Shiftキーが押されている場合は「true」、押されていない場合は「false」と表示されます。

メソッドを呼び出す

ここでは、ボタンがクリックされた時に「イベントメソッドを定義する」で定義したメソッドを呼び出す例（コード）を示します。

<script src="https://unpkg.com/vue@next"></script>
 
<div id="app">
  <button v-on:click="myMethod($event)">show message</button>
</div>

<script>
Vue.createApp({
  methods: {
    myMethod: function(event) {
	  alert(event.shiftKey);
    }
  }
}).mount('#app')
</script>

<button v-on:click="myMethod($event)">show message</button>

</div>

Vue.createApp({

methods: {

myMethod: function(event) {

alert(event.shiftKey);

}

}).mount('#app')

</script>

上記のコードをHTMLファイル（拡張子が.htmlのファイル）を作成して貼り付けて実行すると、以下のようなメッセージが表示されます。

ボタンがクリックされた時のイベントを処理する際は、Vue.jsのv-onディレクティブを使用します。v-onディレクティブには引数（属性値）にメソッドを指定します。
上記の例では、ボタンがクリックされた時に呼び出す「myMethods」メソッドの引数に「$event」を指定しています。
Vue.jsでは、イベントの引数に受け取るEventオブジェクトを「$event」で指定します。（メソッドに引数がない場合は「$event」が省略できます。メソッドに引数を定義している売は「$event」を必ず指定します。）

Vue.js 入門 Tips 一覧

リンク