公開日: 2022年2月17日

Ne:Code道場～イベント制御の巻～

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

はじめに
イベント、JavaScriptの記事の時もあったニャ
Vue.jsでのイベント制御はどうなるニャ？
もっとコンパクトにした例とニャ？
最後に

はじめに

この記事ではVue.jsのイベント制御について、取り上げつつ、躓きポイントを補足しています。各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、Vue.jsのイベント制御について理解を深めてゆきましょう。
（いままでの記事もそうですが、Vue.jsはバージョンは2を用いています。サンプルコードで「vue@2.6.0」という部分でその指定を行っています。Vue.jsの最後で今まで取り上げたものとバージョン3での比較をまとめたいと思っています）

イベント、JavaScriptの記事の時もあったニャ

前回の記事までは、Vue.jsのwatchについて確認してきました。今回からはVue.jsでのイベント制御について、何回かに分けて取り上げてゆきます。
ここまでで取り上げてきたv-modelを用いたバインドや、computedでの計算結果の表示、watchによる監視、これらの便利な機能がVue.jsには備わっているので、その機能でまかなえる場合は、積極的にそちらを用いてゆきましょう。
そして、それらに当てはまらない、「ああしたら→こうしたい」的な処理を組み込みたい時には、Vue.jsでのイベント制御を活用してゆきましょう。
タイトルや漫画内でも猫弟子がJavaScriptの記事の際に取り上げられていたことに言及していますね。なので、まずは、JavaScriptの記事のコードとの比較で、劇的ビフォーアフターを確認してゆきたいと思います。
まずはHTMLからです。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <p>
    現在のカウントは
    <span id="output"></span>
    だニャ
  </p>
  <button id="btn">クリックするとカウントが増えるニャ♪</button>
  <script src="script.js"></script>
</body>
</html>

ボタンをクリックするとカウントがどんどん増えてゆく、というイベント制御を行っていましたね。では具体的にその制御を行っているJavaScript側を次にみてみましょう。

// spanのDOM要素を取得しているニャ
let output = document.getElementById("output");

// 画面に表示する数字の値を持っている変数だニャ
let num = 0;

// 画面が表示された時に、数字は初期値としての0が表示されるのを確認できるニャ
output.textContent = num;

// ボタンのDOM要素を取得し、クリック時の処理を組み込んでいるニャ
// 第二引数にはクリックされた時の処理を無名関数として渡しているニャ
document.getElementById("btn").addEventListener("click" , () => {
    // 表示する数字を一つ増やすニャ
    num++;
    // その数字を表示させているニャ
    output.textContent = num;
});

　
まず、画面読み込み時に初期値としてカウントに0を設定し、その後、ボタンがクリックされた際の処理としてカウント数を1づつ増やしていますね。では、この処理をVue.jsに書き直すとどの様になるのかを見ていきましょう。

Vue.jsでのイベント制御はどうなるニャ？

初期値としてカウントの値をゼロに設定するのは、dataプロパティでカウント用の変数をもたせると良さそうですね。上記の例ではHTML→JavaScriptと取り上げましたが、Vue.jsの例では、JavaScript→HTMLとみてゆきたいと思います。

new Vue({
  el: "#app",
  data: {
    // せっかくデータバインドができるのニャから、countはdataのところで定義しているニャ
    count: 0
  },
  methods: {
    // methodsエリアにaddCountというメソッドが定義されているニャ！
    addCount() {
      // 中身は至ってシンプルニャ！countを増やしているだけニャ～
      this.count++;
    }
  }
});

とてもシンプルになっていますね。JavaScriptのコードの際にあった、DOMを取得したり、DOMに値を設定している様な処理はキレイに無くなっています。ではボタンをクリックした際にaddCountが実行されるにはどうすればよいのでしょう。それはこの後のHTML側のコードで見ていきましょう。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="utf-8">
  <title>お試しHTMLニャ</title>
</head>
<body>
  <div id="app">
    <p>
      現在のカウントは
      <!-- バッチリ、countの表示がされているニャ -->
      <!-- それに伴いこのspan要素のid属性も無くなっているニャ～ -->
      <span>{{ count }}</span>
      だニャ
    </p>
    <!-- ニャ？！@マークの後にclickと書いてある記載が増えているニャ！ -->
    <!-- きっとこれがボタンクリック処理の登録になっているのニャ -->
    <button @click="addCount">クリックするとカウントが増えるニャ♪</button>
  </div>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
  <script src="script.js"></script>
</body>
</html>

猫弟子のコメントにもあるように、@click部分で該当ボタンがクリックされた時に、addCountを呼び出すという設定がされています。
@の後には好き勝手なキーワードを書ける訳ではなく、今回はclickというイベントで処理を実行したいので、そのイベント名を@の後に書いているのですね。
また、countの表示もVue.jsの書き方でスッキリとしていますね。
まずは最初の例として、@clickにてmethodsに記載した処理（addCount）を呼び出してみました。ただ、addCountの中身はたった1行ですね。書き方のバリエーションとして、もっとコンパクトにまとめることも可能です。次はその点を見ていきましょう。

もっとコンパクトにした例とニャ？

もっとコンパクトにした場合のJavaScriptです。定義していたaddCount、及び、それを包んでいたmethodsを削除しています。

new Vue({
  el: "#app",
  data: {
    count: 0
  },
  // methodsエリアが消失しているニャ！
});

HTML側は該当箇所のみピックアップしています。

    <!-- ニャ？！clickの中で直接countが増えているニャ！！ -->
    <!-- ここでのcountにはthisがついていないのニャ -->
    <button @click="count++">クリックするとカウントが増えるニャ♪</button>

　
猫弟子のコメントにもありますが、この様に修正しても同様に動作します。HTML側でdataプロパティの値を用いる場合は、thisをつけていないというのもポイントですね。
methodsに書いてあったものとの比較で見ると「thisが無い！」ことがハイライトされそうですが、よくよく見てみますと、「{{ count }}」で用いている部分も同様にthisが無いというのを確認できますね。dataプロパティの値をJavaScript側で用いるか、HTML側で用いるかでの違いを抑えておきたいですね。
ただ、「枠組みであるHTML側」と「処理を担うJavaScript側」は棲み分けしていたほうが見やすいコードになるでしょう。上記の例は記載パターンとして抑えておきつつ、基本は棲み分けながら用いてゆきたいですね。

最後に

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

イベント制御はJavaScriptの時と同じような考え方で捉えるのニャ
1. 「ああしたら→こうする」を実現するためにイベント制御を組み込んでゆくニャ～
watchやcomputedなどVue.jsならではの機能で置き換えられる部分は積極的にそちらを用いると良いニャ
1. 自分のやりたいことを踏まえて、使い分けて行けると良いニャ
@とイベント名で実行したいイベント処理をHTML側に書けるのニャ
1. その際にmethodsで定義しているメソッドを呼び出すことが可能ニャ
2. methodsに定義して無くても処理を直接記載することもできるニャ。ただ、HTMLとJavaScriptの役割分担を考えると、分かれている方が、棲み分けできていて良さそうニャ

Vue.jsの14個目の記事として、Vue.jsのイベント制御について学びました。次回からはイベント制御の二回目としてイベント修飾子などを取り上げる予定です。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。