🔰 Vueの「リアクティブ」ってなに？初心者向けにやさしく解説

Vue.jsを勉強していると、必ず出てくる言葉。

「リアクティブ」

正直、最初は
「なんか難しそうな横文字…」
「雰囲気で流してしまった…」
という人も多いと思います。

実はこれ、Vueを理解するうえで一番大事な考え方です。
でも安心してください。
仕組みがわかれば、一気に楽になります。

---

🔰 結論：リアクティブとは？

リアクティブ =
「データが変わると、画面も自動で変わる仕組み」

Vueでは

• 画面を直接書き換えません
• DOMを触りません

👉 データを変えるだけでOKです。

---

🔰 JavaScriptだけの世界（リアクティブじゃない）

まずはVueを使わない場合を見てみましょう。

<p id="count"></p>
<button id="btn">+1</button>

let count = 0;
const p = document.getElementById('count');
const btn = document.getElementById('btn');

p.textContent = count;

btn.addEventListener('click', () => {
  count++;
  p.textContent = count; // 自分で画面を更新
});

このコードでは👇

• 値を変えた
• 自分で画面も更新している

これが普通のJavaScriptです。

---

🔰 Vueの世界（リアクティブ）

同じことをVueで書くとこうなります。

<template>
  <p>{{ count }}</p>
  <button @click="count++">+1</button>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  }
}
</script>

起きていること

• count の値が変わる
• 画面が自動で更新される

👉 これが リアクティブ です。

---

🔰 なにがリアクティブなの？

よくある勘違い👇

❌「変数は全部リアクティブ」
⭕「Vueが管理しているデータだけリアクティブ」

let normal = 0; // リアクティブじゃない

data() {
  return {
    count: 0 // Vueが監視している → リアクティブ
  }
}

Vueは data の中の値を
「監視対象」として登録しています。

---

🔰 Vueは裏で何をしている？

Vueはこんなことをしています👇

1. データを監視する
2. テンプレートで使われた場所を覚える
3. データが変わったら
   → 必要な部分だけ画面を更新する

つまり私たちは
画面更新のことを考えなくていいというわけです。

---

🔰 たとえ話で理解する

📝 メモ帳のたとえ

• 普通のJavaScript
  → メモを書き換えたら、掲示板も自分で貼り替える
• Vue（リアクティブ）
  → メモを書き換えるだけで、掲示板が自動更新される

あなたの仕事は
👉 メモ（データ）を変えるだけ

---

🔰 DOMを直接触るとどうなる？

document.querySelector('p').textContent = '直接書き換えた';

これはおすすめしません。

理由👇

• Vueはその変更を知らない
• 次の更新でVueに上書きされる

👉 VueではDOMを直接触らない

---

🔰 Vue3ではどうなっている？

Vue3では Proxy(プロキシ) という仕組みを使っています。

const state = reactive({ count: 0 });
state.count++;

「値が変わった瞬間」をVueが検知できます。

※ 仕組みの細かい理解は不要です
👉 そういう便利な仕組みがあるでOK

---

🔰 初心者が覚えておくと楽になる一文

「Vueでは、画面を変えるのではなく、データを変える」

これを意識すると👇

• DOM操作したくならない
• Vueの書き方に迷わない
• コードがスッキリする

---

🔰 まとめ

• リアクティブとは
  → データが変わると画面が自動で更新される仕組み
• 開発者がやること
  → データを変えるだけ
• やらなくていいこと
  → DOM操作・手動更新

その他関連記事はこちら→プログラミング備忘録