🟢 1.1 JavaScript + TypeScript だけで DOM 操作すると何が大変？

✅ 【要点】

• 画面に何か表示するだけでも、毎回 DOM を手作業でいじる必要がある
• 状態（データ）と DOM（見た目）がバラバラで管理されてしまう
• → 書くコードが増える、バグも増える、変更も大変！
• → Vue や React などのフレームワークはここを自動化してくれる
• → 「データが変わったら勝手に画面が変わる」を実現できる

🟠 【具体例で見てみよう】

🎯 普通の TypeScript でカウンターを作る場合

<!-- index.html -->
<div id="app">
  <p id="count">0</p>
  <button id="btn">+</button>
</div>

// main.ts (TypeScript)
let count: number = 0;

// DOM を取得
const countElement = document.getElementById('count')!;
const buttonElement = document.getElementById('btn')!;

// ボタンクリックでカウントを増やす
buttonElement.addEventListener('click', () => {
  count += 1;
  countElement.textContent = count.toString(); // ← 毎回手で更新
});

🔥 【ここが大変！】

1. DOM をいちいち手で取得 (getElementById)
2. textContent を自分で更新しないといけない
3. データ（count）と DOM（countElement）がバラバラで管理されている
4. もし表示形式を変えたい時（例: 0 回クリックされました と表示したい時） → また書き直し
5. 状態が複雑になるほど if 文や for 文が増える