Vue でボタンをクリックした時の処理
記事IT・テクノロジー
Vue でボタンをクリックした時の処理
Vue 公式チュートリアルのステップ４です。このステップでは、Web ブラウザ上に作成した「ボタン」をクリックした時の処理を学習します。
前回までのポイントをもう一度
例によって最初は、前回までの復習です。 前回までに、Vue の「部品」を記述するファイル「.vue」は、HTML・CSS・Javascript の記述を書く部分に分かれています。
＊ HTML は、「template」のタグの部分に記述します。
＊ CSS は、「style」のタグの部分に記述します。
＊ Javascript は、「script」のタグの部分に記述します。
Vue では、この三つの部分をうまく連携させて、色々な機能を実現しています。 特に、HTML の部分は、標準の HTML の書き方とは、若干違う部分もあるので、その辺りを意識しながら、Vue 独自の書き方をマスターする必要があります。
これまでは、この三つの基本部分を使った例と、簡単な連携を学習してきました。
今回学ぶのは？
今回は、HTML と Javascript の連携で、新たに「ボタン」を使った事例を学習します。 ボタンをクリックする度にボタンに表示されている数字を１づつ増やして表示をするという機能を実現します。
以下のコードが変更を加える前のコードです。
<script>
export default {
data() {
return {
count: 0,
};
},
};
</script>
<template>
<!-- make this button work -->
<button>count is: {{ count }}</button>
</template>
ポイントは二つです
＊ Javascript で「count」という変数を作っています。初期値は「０」です。
＊ HTML の記述でボタンを作っています。
ボタンの記述は、
<button>count is : {{ count }}</button>
のように書きます。「button」のタグに囲まれた部分がボタンに表示される文字になります。 中括弧二つで囲まれた部分に、「count」が入っているので、Javascript の変数の値が表示されます。
課題は、ボタンをクリックした時に、ボタンに表示されている文字の数字を１づつ増やすようにします。
変更を加えるポイントは？
このステップの課題の変更は、
＊ ボタンがクリックされたイベントを処理するメソッド（関数）を作る
＊ ボタンのクリックのイベントで処理を行うメソッドを呼び出す
この二つになります。
最初に、ボタンのクリックのインベントの検出と、処理の呼び出しは、HTML の記述に書きます。
<template>
<button ＠click="increment">count is : {{ count }}</button>
</template>
「＠click="呼び出すメソッド名（関数名）"」の記述をボタンの HTML の記述に追加します。
次に、ここで呼び出しているメソッド（関数）を作ります。
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>
Vue で利用するメソッド（関数）の記述は、「export default {}」の中に、「methods」というタグをつけて、その中に記述します。ここでは、「increment()」という名前で、変数「count」を１増やす記述「this.count++」を加えれば完了です。
ここで「this」という記述が変数の前についていますが、これは、Vue では、「export default {}」の中で宣言した変数を使うときは「this」をつけるという決まりになっています。理由は、「script」タグの中では、「export default {}」の外側でも変数を作る事ができますが、この変数と区別するためです。
ここが少しわかりにくいと多いますが、基本は、
＊「export default {}」の内側で、「export default{}」の内側で作った変数や、メソッドを使う場合には、前に「this」をつけると覚えてください。
＊ HTML の部分（「template」のタグの中）で使う場合には、「this」は不要です。
きちんと、説明する事もできますが、オブジェクト志向のプログラミングで使う「クラス（class）」の概念を学習してからでないと、理解するのは難しいと思いますので、現段階では、「このように記述する」と覚えてください。
変更を加えた後のコードは以下のようになります。
<script>
export default {
data() {
return {
count: 0,
};
},
methods: {
increment() {
this.count++;
},
},
};
</script>
<template>
<button ＠click="increment">count is: {{ count }}</button>
</template>
今回の応用編は？
今回の課題は、ボタンを押すと、ボタンの数字が１づつ増えるという機能を実現するものでした。 応用編として、次の変更を考えてみてください。
＊ ボタンではなく、「h1」のタグで、「count」の値を表示するように HTML を変更してみてください
＊ ボタンを追加して、追加したボタンの表示の文字を「＋」にしてください
＊ もう一つボタンを追加して、ボタンの表示の文字を「ー」にしてください。
＊ 「＋」のボタンがクリックされたら、「count」の値を１増やす処理(increment)を呼び出すようにしてください。
＊ 「ー」のボタンがクリックされたら、「count」の値を１減らす処理（decrement）を呼び出すようにしてください。
＊ メソッド（関数）「decrement()」を作ってください。
少し難しいかもしれませんが、挑戦してみてください。
答えはこちらになります
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
increment() {
this.count++
},
decrement() {
this.count--
}
}
}
</script>
<template>
<h1>count is: {{ count }}</h1>
<button ＠click="increment">+</button>
<button ＠click="decrement">-</button>
</template>
まとめ
このステップでは、少しプログラミングらしい課題になりました。
学習した内容をまとめると：
イベントに対応した処理を行うメソッド（関数）は、「export defautl {}」の中に、「methods:{}」という部分を作ってその中に記述します。
「export default {}」の中で作った変数やメソッド（関数）に内部からアクセスする場合は、先頭に「this」をつけます
「export defautl {}」の中で作った変数やメソッド（関数）に HTML からアクセスする場合は、「this」はつけません。
ボタンを押したイベントの呼び出しは、「＠click="呼び出すメソッド（関数）名"」で呼び出します
以上です。
まとめてしまうと簡単そうに見えますが、実際に使いこなせるようになるには、このプログラムを自分で色々変更してみて、実際に表示や動作がどのように変わるかを「目で見て」体験する必要があります。
時間をかけて、遊んでみるのが習得の近道です。
次回は 2022 年 2 月 21 日にお届けします。それまでに、これまでの四つのステップをよく復習しておいてください！
