🟢
1.4 Vue の役割と設計思想 → 状態管理・コンポーネント・再利用
✅ 【要点】
Vue の役割は
「データ（状態）」と「見た目（DOM）」を自動でつなぐこと
アプリを「小さな部品（コンポーネント）」に分けて作る
再利用できる部品として設計できる → 保守がしやすくなる
状態（データ）を正しく管理するしくみも Vue が用意している（リアクティビティ / Vuex / provide/inject）
→ Vue は
「状態の変化を画面に反映する仕事」と「部品化して作る設計」をセットで提供する
。
🟠 【そもそもアプリ開発で何が大変？】
データ（状態）が変わったら、画面も変わらないといけない
同じパーツ（ボタン、リスト表示）を何回も作りたくない
1箇所を変えたら他のところも壊れる、というのを防ぎたい
状態がどこにあるかわからないとバグになる
→ この4つを解決するために Vue がある。
🟣 【Vue が解決すること：3つの柱】
Vue の考え方
役割
どう助けてくれる？
状態管理（reactivity）
データと画面を自動で結びつける
ref
,
reactive
を変えるだけで DOM が更新される
コンポーネント
アプリを小さな部品に分ける
1つ作った部品をいろんな場所で再利用できる
再利用可能なロジックの分離
ビジネスロジックを関数でまとめる
composable (
useXxx
) でロジック共有
🟡 【状態管理（リアクティビティ）のイメージ】