Vue基本③（クリック時の処理とリアクティビティ）

Vue②から続き
何かを押したら何かの処理が実行されるという処理を書いていきます。
例えば<button>ボタン</button>を<template>に追加し、ボタンが押されたら何か実行されるというのを作ります。
<button>タグに属性として@を付けて、その後にイベントの名前（今回はclick)をつけて、属性値に実行したい関数名を記入します。
今回の関数は増えるという意味のincrimentを付けて、ボタンがクリックされたらconsole.logにクリック！という文字が出るようにします。

<script setup>
const title = 'Nyan programer'
let number = 9999
function increment(){
console.log('クリック！');
}
</script>

<template>
  <h1>Title: {{ title }}</h1>
  <h2>Number: {{ number - 1000 }}</h2>
  <button @click="increment">ボタン</button>
</template>

<style>
h1 {
  color: green;
}
h2 {
  color: red;
}
</style>

※前回からの続きなのでそのまま入れてます。
ボタンを押すと『クリック！』の文字が出ます。

この関数に実際の計算式など入れると

function increment() {
  number +=1
  console.log(number)
}

1ずつ増えていきますが、console.logでしか数字が増えていきません。

変数を更新したのに表示では反映されていないのはなぜか？
これはJavaScriptでは当たり前ですが、仮に下記のような変数を計算します。

let a = 2
let b = 3
let c = a + b // c= 5
a = 10
console.log(c);

このcの結果はもちろん５です。
aに再代入しても入らないのがJavaScriptです。
今はこれと同じ状態で、変数の値が変わるだけで特に何も変わりません。
表示も変えるにはどうしたらいいか？
Vueにはそのような動作に対応する機能があります。
何かのデータが変わった時にそれに依存して自動的に変更していくことをリアクティビティと言います。
これがVueにとって非常に重要なシステムになります。

ではどうやってリアクティビティにしていくかというと<script>に名前付きimportでvueから提供されているref関数というものを使用します。

import { ref } from "vue";

このref関数をリアクティビティに更新したいデータに対して使用して、そのデータを引数として呼び出し、その返り値を元のデータのように扱うだけです。

let number = ref(9999)

こうすることで変化があった時に自動で再レンダリングがされるようになります。
ただし、データをオブジェクトとして扱わなければなりません。
上記のref関数を使った変数をconsole.logで出力すると様々なオブジェクトが入っています。

let number = ref(9999)
console.log(number)

この中のオレンジ色で囲った.valueという値にnumberの数字が格納されていて、これを使うのでnumberのvalueということですね。
そして関数式にこの.valueを加えて

function increment() {
  number.value += 1
  console.log(number)
}

再度ボタンを押していくと

このように表示も+1されていきます。これがリアクティビティのシステムです。（ref関数はリアクティブな値という）

変数numberの値を変える時も

number = 2222

ではなく

number.value = 2222

という書き方になります。これで表示も変更されます。

もちろん、ボタンをクリックすると+1ずつ追加されます。
現在のコード

<script setup>
import { ref } from 'vue'

const title = 'Nyan programer'
let number = ref(9999)

console.log(number.value)

number.value = 2222
function increment() {
  number.value += 1
}
</script>

<template>
  <h1>Title: {{ title }}</h1>
  <h2>Number: {{ number - 1000 }}</h2>
  <button @click="increment">ボタン</button>
</template>

<style>
h1 {
  color: green;
}
h2 {
  color: red;
}
</style>

そして、この

 <h2>Number: {{ number - 1000 }}</h2>

numberに.valueを付けないのは<template>タグ内のrefオブジェクトは内部的にチェックしていて自動的に.valueをつけることになっているので値が入るということです。
もしここに.valueを付けてしまうと.value.valueになってしまい正しく値が入らずNaNが表示されてしまいます。
なので必ず<template>内は.valueを付けないようにしてください。

では、Titleもリアクティブに設定しましょう。
このref関数には文字列も入りますし、オブジェクトも入ります。

const title = ref('Nyan programer')
const info = ref({
  nyans: 100,
  churu: 4
})

infoはリアクティブなオブジェクトを持った定数です。こういうのも作ることができます。
このinfoにスクリプトの中からアクセスしたいときは

console.log(info.value.nyans);
console.log(info.value.churu);

このようにデータを取ります。
infoの中のリアクティブなvalueの中のnyans(churu)ということになります。
これを<template>内で記入すると

<h2>Nyans: {{ info.nyans }}</h2>
<h3>Churu: {{ info.churu }}</h3>

こちらも.valueは不必要で、普通の変数や定数と同じで自動で付けてくれます。
ちなみにinfoだけの場合はオブジェクトが表示されます。

 <h2>Nyans: {{ info }}</h2>

リアクティブにできるのはref関数だけではありません。
次回は他の方法も見ていきます。