【はじめまして Vue.js】ref( ) は何者？

はじめに

Reactは大体理解してきたし実装もある程度できるけど、Vue.jsは全然知らないわからない人間が書いています📝
Vue.jsを習得する必要が出てきたので、本当に基礎の基礎から一歩ずつ勉強し始めました。
プログラミングの勉強を始めてから、8ヶ月くらいの卵です🥚
　

今日はref( )について

💡ref( )とは？

公式ドキュメントでは、以下のように説明されています。

内部値を受け取り、リアクティブでミュータブルな ref オブジェクトを返します。
またそれは、内部値を示した単一プロパティである .value を持っています。

わかるような、わからないような.....だった私は、コードを用いた具体例でこの文章の意味を理解しました。

App.vue

<script>

const count = 0

const number = 0

function increment() {
    number += 1
}

</script>


<template>

<h1>{{ count }}</h1>
<button @click="count++">button for count</button>

<h1>{{ number }}</h1>
<button @click="increment">button for number</button>

</template>

上記のコードをなんとなく見た時に、<button>で定義されたボタンをクリックすると、countやnumberが1ずつ増えるんだろうな〜と考えますが、実際にはこのコードではそのような動きは実現できません🙅‍♂️

ここで ref( ) が登場します💡
先述のコードを修正して、<button>をクリックするとcountやnumberが1ずつ増えるようにします。

App.vue

<script>
import { ref } from 'vue' // refをimport

const count = ref(0) //ref()を使用

const number = ref(0) // ref()を使用

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

</script>


<template>

<h1>{{ count }}</h1>
<button @click="count.value++">button for count</button>

<h1>{{ number }}</h1>
<button @click="increment">button for number</button>

</template>

➡️ 前者のコードとの違いは2つ。

• 変数定義のところで ref()を使用している
• 変数の値を取り出す部分で .value が追加されている

ref( )を使用すると、refオブジェクトが返ってきます。
そのrefオブジェクトはvalueというプロパティを持っていて、そのvalueプロパティの値に( )の中に指定した値を保持します。
先ほどのコードであれば以下の通り、count.valueもnumber.valueも0になりますし、その値を使用した計算も可能です。また、文字列や配列、オブジェクトなどのデータも適用可能です。

App.vue

<script>
import { ref } from 'vue'

const count = ref(0)
console.log(count.value) // 0
console.log(count.value + 5) // 5

const number = ref(0)
console.log(number.value) // 0
console.log(number.value + 10 * 2) // 20

// 文字列の場合
const name = ref('meme')
console.log(name.value) // 'meme'

// オブジェクトの場合
const myFam1 = ref({
    husband: 'muck',
    daughter: 'peco',
    son: 'bee',
})
console.log(myFam1.value.husband) // 'muck'

// オブジェクトのプロパティの値がref()の場合
const myFam2 = {
    husband: ref('muck'),
    daughter: ref('peco'),
    son: ref('bee'),
}
console.log(myFam2.daughter.value) // 'peco'

// 配列の場合
const myHobbies = ref([
    'walking', 'driving', 'cooking', 
])
console.log(myHobbies.value[0]) // 'walking'

// 配列の要素がref()の場合
const myFavoriteFoods = [ref('ice cream'), ref('hamburger'), ref('chocolate')]
console.log(myFavoriteFoods[0].value) // 'ice cream'

</script>

ここまで具体例を交えなが見てきたうえで、冒頭の公式ドキュメントの文章をもう一度見てみますと、

内部値を受け取り、リアクティブでミュータブルな ref オブジェクトを返します。
またそれは、内部値を示した単一プロパティである .value を持っています。

以下のような解釈ができます。

• 内部値を受け取り
  • ➡️ ref( ) の ( ) の中に入れた値を受け取る
• リアクティブで
  • ➡️ データが何かの操作に反応して変化できる（クリックや計算など）
• ミュータブルな
  • ➡️ .valueで取得できる値には別の値を再代入可能
• ref( )オブジェクト
  • ➡️ ref( )を使用すると返ってくるオブジェクトのことで、プロパティにvalueを持っている
• 単一プロパティである.value
  • ➡️ .valueの値 === 最初に引数で受け取った値

---

ここまで噛み砕かなくても、直感的に使えたらまずはそれでいいのかな？とも思いましたが、すぐ開発しないといけないとかの迫られた状況じゃないのでじっくりひとつの記事にしました（のんびり）。

またコツコツと学習を進めていこうと思います。
何か説明不足や間違い、誤解を招きそうな表現などがありましたらご指摘をいただけますと幸いです。