「Vue.js」の「イベント処理」について学ぼう!
今回から「Vue.js」の基礎について学んでいきたいと思います。
「Vue.js」を使うことで、「どんなメリットがあるのか？」や「これまでの方法の問題点」などを見ていきたいと思います。
従来の「イベント」の検知と設定
「Vue.js」が利用されるシーンは主に、「WEBアプリケーションやWEBサービス」の「ユーザーインターフェース（UI）」で利用されます。
ユーザーが「ブラウザの画面」を操作する場合は、「ボタン」や「テキストを表示する要素」などに「イベントリスナー」を設定し、「イベント」が発生した際にプログラムを実行します。
「イベント」は「ユーザーの操作」や「DOMの状態変化」などによって発生します。
「ボタン」だけではなく、「インプットボックス」に入力された「テキストの入力状態」など、開発されるアプリケーションによっては、１つの画面に「数十個のイベントリスナーの設定」が必要になってくるケースもあります。
「Javascript」では「document.getElementById」や「document.getElementsByClassName」などのメソッドで「イベントリスナーを設定する要素」を取得して、「addEventListener」メソッドで「イベント」を設定するという流れになります。
「JQuery」を利用するとプログラムの記述は短くなりますが、「イベントの設定」は上図と同様の流れになります。
このように１つの１つの要素に対して「メソッドでイベントの設定を行うこと」は、「コードの複雑化」と「管理の難易度を高める」ことに繋がってしまいます。
「Vue.js」の「イベント」の検知と設定
「Vue.js」での「イベント」の中心になるのは「Vueインスタンス」です。
「Vueインスタンス」が変化すると、「あらかじめ設定された動作が自動実行する」という仕組みが「Vue.js」に用意されています。
例えば、「インプットボックスの値」が変化したら「p要素の内容」も同じ内容に書き代わるという「Vue.js」のプログラムを書いてみると、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<input type="text" v-model="inputValue">
<p>{{ inputValue }}</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
inputValue: "Hello, World！",
}
})
</script>
</body>
</html>
のようになります。
このプログラムの内容は、
のようなイメージになります。
「Vueインスタンス」を生成し、その中に「inputValue」という名前のデータを作成します。
今回は初期値に、「Hello, World！」を設定しました。
「input要素の入力内容」が変更され、「Vueインスタンス」の「inputValue」の内容が変化すると「Vuejs」によって自動的に「p要素の表示内容」が更新されます。
このプログラムを実行すると、
のようになります。
「入力ボックス」の入力内容を変更すると、その下にある「p要素」の表示も更新されていますね。
さらにもう一つ入力ボックスが増えると、
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.jst</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app">
<p>入力１<input type="text" v-model="inputValue"></p>
<p></p>入力１の内容：{{ inputValue }}</p>
<hr>
<p>入力２<input type="text" v-model="inputValue2"></p>
<p></p>入力２の内容：{{ inputValue2 }}</p>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
inputValue: "Hello, World1",
inputValue2: "Hello, World2",
}
})
</script>
</body>
</html>
のようになりますが、「HTML要素」を足して、「Vue」の「dataプロパティ」のオブジェクトに「inputValue2」を追加しただけです。
このプログラムの内容は、
のようなイメージになります。
これを実行してみると、
のように実行されます。
「Javascript」で「イベントリスナー」を設定することを考えると、かなり短くコードが記述できている印象ですね。
「入力ボックスの値」と「p要素の表示内容」がリンクされているイメージですが、このような作りを「リアクティブ（反応的）」と言うそうです。
「宣言的」と呼ぶこともあるそうですが、専門的な言葉が今後もたくさん出てきそうな予感がします(;^^
「Vue.js」に出てくる「新しい言葉の意味」も少しずつ学んでいきたいと思います。