素のTS/JS（バニラ）— 自分でDOMを動かす
📖 このページのゴール：「バニラ（素のJS/TS）」とは何か、そして自分の手で画面（DOM）を動かす＝命令的とはどういうことかを、小さなコードで腹落ちさせます。あわせて「便利だけど、画面が大きくなると なぜ つらくなるのか」も見ます。だから次章からフレームワークが登場します。 ← 目次・はじめにへもどる
🤖 たとえ：手で人形を動かす
バニラのJS/TSは、操り人形を一本ずつ手で動かすのに似ています。 「右手を上げろ」「口を笑顔にしろ」と、やることを毎回ぜんぶ手順で指示します。
このやり方を 命令的（めいれいてき） と呼びます。「画面をこう変えろ」という手順を、あなたが書くスタイルです。 （次章の React/Vue は逆に「今は“喜び”」と状態だけ書けば、笑顔のUIに勝手になる＝宣言的。そのちがいは 03 で。）
「バニラ（vanilla）」＝アイスのバニラ味のように何もかぶせない“素のまま”、という意味のあだ名です。フレームワークもライブラリも足さない、ブラウザに最初から入っている標準のJavaScript/TypeScriptだけで書く——それがバニラです。
🧩 しくみ：DOMをJSで直接いじる
ブラウザは、表示中のページを DOM（ドム＝Document Object Model）という「画面の部品ツリー」として持っています。見出し・ボタン・文字…が枝分かれした木になっていて、このツリーを書き換えると表示が変わります。
バニラでは、そのDOMをJSで直接つかんで・直接書き換えます。やることは、ほぼこの3つだけ。
| やること | 標準の道具 | ひとことで |
|---|---|---|
| 部品をさがす | document.querySelector('...') |
「このボタンを取ってきて」 |
| 出来事を待つ | 要素.addEventListener('click', ...) |
「押されたら、これをして」 |
| 表示を書き換える | 要素.textContent = '...' |
「中の文字をこれに差し替えて」 |
🟢 小さなコード例：押すと数が増えるカウンター
<button id="btn">クリック</button>
<p>回数：<span id="count">0</span></p>
<script>
let count = 0; // ① 状態（今の値）
const span = document.querySelector("#count"); // ② 表示する場所をさがす
document.querySelector("#btn")
.addEventListener("click", () => { // ③ 押されたら…
count = count + 1; // 値を1ふやして
span.textContent = count; // 画面の文字も自分で書き換える
});
</script>
1行ずつ： ①いまの回数を覚える変数を用意 → ②表示先の <span> を取ってくる → ③ボタンが押されるたび、値をふやして、そのうえで画面の文字も自分の手で更新します。
👀 ここが命令的のキモ：「値をふやす」と「画面を書き換える」を、両方とも手で書くこと。どちらか忘れると、数字と画面がズレます。
👍 バニラが向くとき
- 🟢 小規模・ちょっとした動き：ボタン1個、開閉メニュー、フォーム検証など。
- 🟢 学習に最適：DOM・イベント・状態という土台を、ごまかさず体で覚えられる。
- 🟢 とにかく軽い／依存ゼロ：ダウンロードするJSが無く、初回表示がきわめて速い。
- 🟢 1ファイルで動く：上の例のように
.html一枚で完結。ビルド不要、環境構築いらず。
🌱 だから鉄則は「まず素のHTML/JSで動かす → 必要になってからフレームワーク」。最初から全部盛りにしないこと。
👎 バニラが向かないとき
画面が大きく・複雑になると、命令的のつらさが一気に出ます。
- ⚠️ 状態とUIの同期を“全部手作業”：データを変えるたびに、関係する表示を自分で漏れなく書き換える必要があります。場所が増えるほど、更新忘れ・二重更新のバグが出ます（＝命令的の限界）。
- ⚠️ コードが追えなくなる：「いま画面がこうなっている理由」が、あちこちの手作業の積み重ねに散らばり、全体像を追えなくなります。
- ⚠️ 部品の再利用がしづらい：同じUIを別の場所でも使う、が素のままだと大変。
🔧 この「状態が変わったらUIを自動で追従させたい（＝リアクティブにしたい）」という願いに応えるのが、次章からの React / Vue（宣言的フレームワーク） です。差分の反映をフレームワークが面倒を見てくれるので、あなたは「状態」に集中できます。
🤝 姉妹教材がバニラを選んだ理由
姉妹教材の Twitter クローン / ChatGPT クローンは、あえて素のTS/JSで書かれています。なぜか——
- 🎯 仕組みに集中するため：フレームワーク特有の作法に気を取られず、「DOM・イベント・通信」というWebの本質だけを学べる。
- 🧱 フレームワーク非依存：素のTS/JSで土台を理解しておけば、「React でも Vue でも、同じ考え方で動かせる」。つまり後からどれにでも移れる、つぶしの効く知識になります。
実務では React/Vue が主流です。それでも最初に素で触る価値は、まさにこの「土台が分かる」ところにあります。
🏢 誰が使う？
| 使う人・場面 | なぜバニラ？ |
|---|---|
| 学習者（これから学ぶ人） | 土台（DOM/イベント/状態）をごまかさず身につけられる |
| 小物・小さな機能 | ボタン1個・小さな動き。フレームワークは大げさ |
| 組み込み・既存サイトへの追加 | 1ファイル（スニペット）を貼るだけで効く・依存を増やさない |
| 軽量サイト・LP | JSを極力減らして高速・低コストにしたい |
🟢 ひとことで言うと
バニラ＝何もかぶせない素のJS/TSで、DOM（画面の部品ツリー）を自分の手で直接いじる（＝命令的）やり方です。 小規模・学習・とにかく軽い用途には最適ですが、画面が大きくなると「状態とUIの同期を全部手作業」になって追えなくなります。 だから次章から、その手間を肩代わりしてくれる宣言的フレームワークへ進みます。