【Vue基礎】Vueリアクティブを理解する

Vueによるリアクティブとは

データの変更が自動的にUIに反映される仕組みのことです。Vueはリアクティブシステムによって、状態の変化に応じてDOMを効率よく再描画してくれます。それでは簡単なリアクティブについて、vueファイルに書いてみましょう。

  <script setup>
  let number = 1
  function increment() {
    number += 1
  }
  </script>
  <template>
    <div>
      <h2>number: ${{ number }}</h2>
    </div>
    <button @click="increment">+1クリック</button>
  </template>

ボタンをクリックすれば、数字がインクリメントされるはず、npm run devで確認が、これではリアクティブな動的はできませんね。javascriptでは、

  <script setup>
  let x = 1
  let y = 2
  let z = x + y // z = 3
  x = 4
  console.log(z) // 3のまま、zは再代入してはいないから
  </script>

xには4が再代入されますが、x + y の合計となった z に再代入はされません。もちろん x の再代入の数値をzでもう一度計算をして処理すればよいのですが、このままではプリミティブな値や配列などリアクティブとして扱えません。

ref関数

ref関数は、Vue3 の Composition API でリアクティブなデータを作成するための関数。refを使うとプリミティブな値やオブジェクト、配列などをリアクティブな参照オブジェクトとして扱えます。

<script setup>
import { ref } from 'vue' //名前付きインポート
</script>

refを読み込み

<script setup>
  import { ref } from 'vue'
  let number = ref(1)
  function increment() {
    number.value += 1
  }
</script>
<template>
  <div>
    <h2>number: ${{ number }}</h2>
  </div>
  <button @click="increment">+1クリック</button>
</template>

refで囲う事で、データを自動でオブジェクト化（リアクティブ）してくれます。また、オブジェクトとされたデータから値を抽出する場合、格納されたvalueを取り出して、値に対して処理をする事よりVueが裏側でリアクティブに処理を実行します。ちなみに、テンプレートの中のマスタッシュ内には、.valueはいりません。これは、Vueが裏側でこれは値だねと自動で認識してくれます。すばらしい。ちなみに、ref関数はオブジェクトをもったデータももちろん使用できますし、値を取得することも問題なく使用できます。

<script setup>
const box = ref({
  width: 1000,
  height: 300,
})
</script>
<template>
<p>{{ box.width }}</p>
</template>

こんなオブジェクトも問題なく使用できます。

<script setup>
  const courseInfo = {
    sections: ref(10),
    language: ref('japanese'),
}
</script>
<template>
    <p> {{ courseInfo.sections }}</p>
</template>

ちなみにこちらの方が短縮で賢い書き方ですね。

<script setup>
const { sections, language } = {
  sections: ref(10),
  language: ref('japanese'),
}
</script>
<template>
    <p> {{ sections }}</p>
</template>

ref関数と似た関数でreactiveがありますが、Vue公式では ref を推奨されています。

• ref はプリミティブ型（数値、文字列、ブール値など）をラップしてリアクティブにできる。

• reactive はオブジェクトしか扱えないので、プリミティブ型は ref が必要。

• ref だと .value を使って値にアクセスする必要があるので、「これはリアクティブな値だ」とすぐに分かる。

• reactive は中身が全部リアクティブになるけど、どのプロパティが反応するか分かりにくくなることもある。

まとめてリアクティブにするならreactiveもとおまいますが、まとめてオブジェクト化されると配列内で扱いずらいところがあるなどプロジェクトを進めていく中で起きる可能性はありますので、refの方がよいですね。※主観です。

まとめ

いかがでしたでしょうか。今回は、JavaScriptフレームワークVueのリアクティブrefについて、ご紹介させていただきました。Vueは、拡張性の高さにより大規模開発のニーズまでサポートする環境を提供してくれます。是非、VScodeを使用して、Vueのモダンな開発環境を整えて、開発を進める事をおススメします。

以上となります。できる限りわかりやすく伝えようとしても書くのは難しいです。
コードや記事の書き方について気になるところがあれば、アドバイスいただけると嬉しいです。