HTML・CSS・JavaScriptって何？── バイブコーダーのための最低限の知識

覚える必要はない。知っているだけでいい

バイブコーディングではコードを書く必要はない。でも「Web技術にはどんなものがあるか」をざっくり知っていると、AIへの指示の精度が格段に上がる。

レストランのメニューを知らなくても食事はできるが、メニューを知っていれば的確に注文できる──そんなイメージ。

---

3つの言語の役割

言語	役割	レストランで例えると
HTML	構造（何を表示するか）	料理の材料
CSS	見た目（どう見せるか）	盛り付け・食器
JavaScript	動き（何をするか）	シェフの技（調理）

HTML = 骨組み

<h1>こんにちは</h1>
<p>これは段落です</p>
<img src="photo.jpg" alt="写真" />
<a href="https://example.com">リンク</a>

知っておくと便利な知識: 「h1は見出し」「pは段落」「imgは画像」「aはリンク」──これだけ。

CSS = デザイン

h1 {
  color: blue;      /* 文字色 */
  font-size: 32px;  /* 文字サイズ */
  margin: 20px;     /* 余白 */
}

知っておくと便利な知識: 「colorは色」「font-sizeは文字サイズ」「marginは余白」──AIに「余白を広げて」「色を変えて」と言える。

JavaScript = 動き

button.addEventListener("click", () => {
  alert("クリックされました！");
});

知っておくと便利な知識: 「ボタンを押したら何かする」「データを保存する」「APIからデータを取る」──こういうことができる。

---

よく聞く用語

用語	意味	一言で
フレームワーク	開発を楽にするツール	料理キット
React	Meta製のフレームワーク	人気No.1の料理キット
Astro	静的サイト用フレームワーク	ブログ向き料理キット
Tailwind CSS	CSSを楽に書くツール	調味料セット
npm	パッケージ管理ツール	食材の配達サービス
API	外部サービスとの接続口	出前の注文窓口

---

これを知っているとAIへの指示が変わる

Before（知識なし）

いい感じのサイトを作って

After（ざっくり知っている）

Astro + Tailwind CSSでブログサイトを作って。
h1は青色で、カードのmarginは20pxくらいで。
ボタンをクリックしたらモーダルが開くようにして。

コードは書かなくていい。でも「何があるか」を知っているだけで、AIと格段にうまくコミュニケーションできる。