更新日: 2022年7月15日
公開日: 2022年7月13日

Ne:Code道場～イベント制御の巻③（イベント引数）～

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのイベント引数における学習ポイントについて紹介します。

はじめに
イベント伝播の制御、JavaScriptの時にやったニャ
もしかしてJavaScriptの時の書き方が参考になるかニャ？
もしもイベント引数以外の引数があったらどうなるニャ？
最後に

はじめに

この記事ではVue.jsのイベント引数について、前回に引き続き取り上げつつ、躓きポイントを補足しています。各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、Vue.jsのイベント制御について理解を深めていきましょう。
（いままでの記事もそうですが、Vue.jsはバージョンは2を用いています。サンプルコードで「vue@2.6.0」という部分でその指定を行っています。ただ、直近のVue.js公式の発表で、Vue.jsの3系がメインになるというアナウンスがありましたので、Vue.jsの最後にまとめて3との比較をする予定でしたが、イベントの記載が終わった後から、Vue.jsの3系に切り替えて記事をまとめてゆきます。（イベントの次は、ライフサイクルフックを取り上げます）イベント以前の記事のVue.jsの3系との比較は、当初の予定通り、最後にまとめて取り上げてゆきたいと思います）

イベント伝播の制御、JavaScriptの時にやったニャ

前回の記事では、Vue.jsのイベント修飾子について、昔取り上げたv-modelの修飾子と比較しつつ確認しましたね。その際に取り上げたイベント引数について、今回の記事で見ていきたいと思います。
JavaScriptの記事の時に、イベント引数について取り上げましたが、基本は同じ様に捉えてゆくことが可能です。
導入として、復習がてら、JavaScriptのイベント引数を用いた、イベント伝播の制御方法のコードを以下に記載します。（今回の引用に関係ない部分のコードは除去しています）

// イベント伝播を制御するパターンニャ
document.getElementById("btn").addEventListener("click", (event/* なので、イベント引数を記載しているニャ */) => {
  // イベントの伝播における既定の振る舞いを止めている処理が追加されているニャ
  event.preventDefault();
});

上記のJavaScriptのコードは、ID属性に「btn」と設定されている要素がclickされた時に、そのclickイベントを伝播させたくないというシーンで用いていましたね。
ここで用いている「preventDefault」が、イベント修飾子の「prevent」の名前の由来になっていることが見て取れるでしょう。
Vue.jsで書くならば、JavaScript側のコードは不要で、上記の要素に「@click.prevent="紐づけるメソッド名"」という記載を書けばOKですね。
　
ここでも、Vue.jsの記載が、HTMLだけで完結しシンプルに作れることを確認できますね。
では、これを仕掛に、Vue.jsでイベント引数を用いる記載がどうなるかを見ていきましょう。「preventDefault」レベルでしたら、そもそもイベント引数を定義しなくても利用できることは確認しましたが、イベント引数を用いてやることは「preventDefault」以外にもあります。その点を踏まえて確認してゆきましょう。

もしかしてJavaScriptの時の書き方が参考になるかニャ？

猫弟子のツブヤキの通り、JavaScriptの時の書き方が参考になります。JavaScriptの時にイベント引数を用いたいとなった場合、引数蘭に記載すると受け取れるようになりましたね。その基本はVue.jsであっても同様です。ではベーシックな記載から見ていきましょう。
まずはHTMLのコードからです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <!-- お試しコードとして、チェックボックスだけおいてあるニャ -->
    <!-- changeイベントに「changeChecked」というメソッドが紐づけられているニャ～ -->
    <input type="checkbox" @change="changeChecked" value="1">
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

お試し用の「THEサンプル」というHTMLですね。イベント処理のベーシックな書き方がHTML側になされているのを確認できます。「changeChecked」メソッドはただメソッド名のみ記載されていて、引数についての記載はHTML上なされていないことを確認できますね。
では、次にJavaScript側です。

new Vue({
  el: "#app",
  methods: {
    // このメソッドがチェックボックスに紐づいていたのニャ
    // JavaScriptの時の様に、event引数がポッと出てきているニャ！
    changeChecked(event) {
      // ここはサンプルコードとして、event引数から、対象のDOM要素であるtarget（≒チェックボックス）経由で、チェックされているかどうかをログに出しているニャ～
      console.log(event.target.checked)
    }
  }
});

以前のメソッドの記載では、引数は特に書いていませんでした。今回はHTML上は引数の記載はありませんが、JavaScript側は引数の記載が追加されていますね。ここではeventという名前にしています。JavaScriptの時と同様、変数名を変えたとしても動作しますが、分かりやすい名前にしたいところではありますね。
　
実行してコンソールログを確認してみますと、チェックボックスのチェックをつけたり、消したりするタイミングで「true」「false」という文言がログに出力されているのを確認できるでしょう。

もしもイベント引数以外の引数があったらどうなるニャ？

発生したイベント情報以外にも、メソッドに、何かしらの情報を送りたいということはあるでしょう。そんな際には、HTML側をこのように書き換えます。お試しコードとして、参考例がてらにご確認ください。
HTML側は該当箇所のみピックアップしています。

  <div id="app">
    <!-- おニャ？1つ目に$eventというのが指定されているニャ -->
    <!-- その後のtrueは、きっとお試し用の引数指定ニャ -->
    <!-- ここでは、引数が2つあり、1つ目はイベント引数、2つ目は論理値型の値ってことニャ -->
    <!-- eventに$がついているのが気になるニャ～ -->
    <input type="checkbox" @change="changeChecked($event, true)" value="1">
  </div>

　
猫弟子のコメントにもありますが、1つ目の「$event」がイベント引数になります。そして、この「$event」はメソッド側の引数名とは異なり、イベント引数を用いる場合はこの名称固定になります。
試しに、$eventの部分を別の名称、例えば「event」とかに変えてみましょう。Vue.jsサイドからエラーが上げられるのを確認できるでしょう。
変えられるところ、変えられないところ、それぞれを意識しながら用いてゆきたいですね。
では、上記のように変更した結果のJavaScript側のコードも記載します。こちらも、該当箇所のみ抜粋しておきますね。

    // 引数として「isMeow」が増えているニャ！
    // 名前からして、意味が無い、サンプルのための引数というのが一目瞭然ニャ！
    changeChecked(event, isMeow) {
      // 実行した結果、下記2件のログが表示されるのニャ～
      console.log(event.target.checked)
      console.log(isMeow)
    }

HTML側の記載には注意点がありますが、JavaScript側は、メソッドの引数の記載として、よく見慣れている書き方になっているのが確認できるでしょう。

＼Webサイト担当者としてのスキルが身に付く／

無料カウンセリングはこちら

最後に

Vue.jsのイベント引数について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

JavaScriptの時のイベント引数の書き方を振り返ったニャ
1. イベントや、そのイベントの引数などは、プログラミングに関連する知識として抑えておくと、応用力も変わってくるニャ～
シンプルにイベント引数を用いる書き方はVue.jsもJavaScriptも良く似ていたニャ
1. 引数名は好きな名前がつけられるけれど、分かりやすい名前にこしたことはないニャ
イベント引数以外にも、引数をメソッドに渡したい場合は注意が必要ニャ
1. HTML側からイベント引数を用いる場合は、勝手な名前はつけられないのニャ
2. JavaScript側は、引数についての知識があれば、スルッと読める内容になっていたニャ～
3. 自分の好きなように変えられるところ、変えられないところ、それぞれを把握しながらコードを書くことが重要ニャ

Vue.jsの15個目の記事として、Vue.jsのイベント引数について学びました。次回からはライフサイクルフックを取り上げる予定です。そして次回のタイミングからVue.jsのバージョンを3に上げたものに切り替えてゆきます。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。