了解しました！

ここでは 第5章：Vueインスタンスとリアクティブデータ の中の中心トピック、

「リアクティブな挙動とは？」について、コードを交えて一行ずつ丁寧に解説します。

✅ 要点まとめ

• *リアクティブ（reactive）**とは、データの変化に応じて画面（DOM）が自動で更新される仕組みのこと。
• Vueは、ref() や reactive() で作られたデータを監視していて、値が変わった瞬間に表示も変えてくれる。
• 手動でDOMを操作しなくてもよくなる＝コードがシンプルで安全になる。

💡 例：名前と年齢をリアクティブに管理

📄 ファイル名：ReactiveExample.vue

（Vue 2.7 + <script setup> + TypeScript）

<template>
  <!-- ユーザー名を入力 -->
  <input v-model="user.name" placeholder="名前を入力" />
  <p>こんにちは、{{ user.name }}さん</p>

  <!-- 年齢を +1 -->
  <button @click="increaseAge">年齢を1つ増やす</button>
  <p>{{ user.name }}さんは {{ user.age }} 歳です</p>
</template>

<script lang="ts" setup>
// reactive をインポート（オブジェクト全体をリアクティブにする）
import { reactive } from 'vue';

// ユーザー情報をリアクティブなオブジェクトとして定義
const user = reactive({
  name: '',
  age: 20
});

// 年齢を1増やす処理
const increaseAge = () => {
  // user.age を直接書き換えると、表示も自動で更新される
  user.age++;
};
</script>

🧩 一行ずつの解説

<template> 部分

<input v-model="user.name" placeholder="名前を入力" />

• user.name にリアクティブバインディング。
• 入力フォームの内容が user.name に直接反映される（双方向バインディング）。

<p>こんにちは、{{ user.name }}さん</p>