プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのフレームワーク、Vue.jsのイベント修飾子における学習ポイントについて紹介します。
この記事では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系との比較は、当初の予定通り、最後にまとめて取り上げてゆきたいと思います）
前回の記事では、Vue.jsのイベントの書き方について、JavaScriptのときのものと比較しつつ、まずは導入としての記載を確認してゆきましたね。漫画の記載にもあるように、今回はイベント修飾子について確認してゆきます。
猫弟子の言うように、以前、Vue.jsのv-modelの修飾子について、こちらの記事でも取り上げていましたね。
導入として、復習がてら、v-modelの修飾子を確認してみましょう。
まずは、JavaScriptの記載からです。
new Vue({
el: "#app",
data: {
// 入力エリアにバインドする用の変数ニャ
message: ""
}
});
dataにはmessageが定義されているだけのシンプルな構成ですね。HTMLに関しては、該当箇所のみ抜粋します。
<div id="app">
<!-- おニャ？！v-modelとイコールの間に.trimと書いてあるニャ！ -->
前後の空白を取り除くニャ→<input type="text" v-model.trim="message">
<p>
<!-- 試しに上の入力エリアで、文章の前後に余白を入れてもその余白は表示されないニャ！ -->
余白(ΦωΦ)→{{ message }}←(ΦωΦ)入ってないニャ！
</p>
</div>
v-modelの記載の後に、「.trim」とつながってmessageが入力エリアにバインドされていますね。その結果、入力文字は「trim=余白が除去」され、下の「{{ message }}」での表示で、余白文字が除去された状態で出力されているのを確認できます。
v-modelの記載に続いて、「ドット」でオプションのように修飾子を追加出来る書き方でしたね。それは、イベント修飾子の場合も同様です。では、ここまでの復習の延長で、イベント修飾子の記載を確認してゆきましょう。
v-modelの修飾子の様に、まずは利用例からでも良いのですが、今回はその利用例との違いを比較するために、最初にイベント修飾子を用いない場合の記載を取り上げつつ、その後、用いる例と比較してゆきます。
まずは、JavaScript側からです。
new Vue({
el: "#app",
methods: {
showAlert() {
alert("説明用のシンプル処理ニャ！ただ、アラートを表示させているだけニャ！");
}
}
});
ただalertを表示させるだけという、「showAlert」というメソッドが定義されていますね。まさに説明用の、必要最低限な学習コードといった感じです。
では、次にHTMLです。こちらは、イベント修飾子をまだ用いていないコードとして記載しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>お試しHTMLニャ</title>
<style>
.long-height {
/* 画面の高さいっぱいに高さを引き伸ばしているニャ！ */
/* 説明用の高さ設定なのニャ～ */
height: 100vh;
}
</style>
</head>
<body>
<div id="app">
<!-- HTML上は一行だけれど、上のCSSの設定で、画面いっぱいに高さが伸びているdivニャ！ -->
<!-- 先頭に一行↓のメッセージが表示されているのニャ～ -->
<div class="long-height">ここがページの先頭ニャ</div>
<!-- イベント処理が記載されいているa要素があるニャ -->
<!-- クリックイベントにイベント設定がされているのニャ -->
<a href="#" @click="showAlert">クリックするニャ！</a>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="script.js"></script>
</body>
</html>
肝は、a要素の部分です。HTMLのa要素は、クリック可能なリンク要素として、結構な頻度で登場してくる要素になります。こちらの要素のhref属性には、そのクリックした結果の遷移先を指定するのですが、特に背に先の指定は無いという場合も往々にしてあります。そんな際には、「ページのトップ」を表す「#」の記号をダミーの値として設定するシーンも多いでしょう。
ですが、そのままですと、クリックするごとにページのトップへ飛んでしまいます。飛ぶ前の時点で、下までスクロールしていたシーンとかに、ちょっと不親切な挙動になってしまいますね。（その不親切さを体感してもらうために、style要素の部分に高さを指定する挙動確認用のスタイルが設定されています）
今回の例では、a要素をクリックし、alertが表示された後、ページのトップに移動してしまい、a要素が見えなくなっているという挙動となっていました。
a要素をクリックした際に、何かしらの処理はするけれど、href先に移動する処理は防ぎたい、そんなニーズを、イベント修飾子を用いつつ叶えてゆきましょう。
JavaScript側は変化無しなので、割愛します。
HTML側は該当箇所のみピックアップしています。
<!-- ニャ！@clickの後に「.prevent」ってついているニャ！ -->
<!-- 「ドット」でつなげる感じは、v-modelの修飾子と同じなのニャ～ -->
<!-- これでクリックしても、勝手に先頭に移動しなくなったニャ！ -->
<a href="#" @click.prevent="showAlert">クリックするニャ！</a>
猫弟子のコメントにもありますが、今回の修正を加えただけで、クリック後にページのトップに遷移してしまうという挙動は防がれていますね。イベントの伝播を「prevent=防ぐ」修飾子を設定することで、click時のメソッドに書いてある内容は実行されたけれど、その後続のリンク遷移の挙動が発生しなくなりました。
今回はまずイベント修飾子の説明としてpreventを用いました。次回はイベント引数の絡みで、preventの記載をJavaScriptで実現する場合にはどうなるかという比較も含めつつ、取り上げてゆきたいと思います。
Vue.jsのイベント修飾子について、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。
Vue.jsの15個目の記事として、Vue.jsのイベント修飾子について学びました。次回からはイベント制御の三回目としてイベント引数などを取り上げる予定です。
見た目のフレームワークとしてVue.jsを学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
Vue.js導入に関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。
