役割が三つに分かれている
前回、ブラウザがサーバーからファイルを受け取って画面を描くと述べた。その受け取るファイルがこの三つである。
HTML は何を見せるかを書く。この画面に見出しがあり一覧がありログインボタンがある、という具合だ。CSS はどう見えるかを書く。そのボタンは右上にあり背景は黄色で文字は何ピクセルか、という具合である。JavaScript は押したら何が起きるかを書く。このボタンを押すと動画が再生される、という具合だ。
ブラウザが複数あっても同じ画面が出るのはここに理由がある。Chrome でも Edge でも Firefox でも、この三種類のファイルを受け取れば決められた約束どおりに組み立てて画面にする点は同じだ。かつては同じ CSS がブラウザごとに違って見えることもあったが、今ではほぼなくなった。
HTML — 何があるか
<button class="btn">ログイン</button>
CSS — どう見えるか
.btn { background: #ffcc00; font-size: 16px; }
JavaScript — 押したら何が起きるか
document.querySelector('.btn').addEventListener('click', ...)CSS はなぜ切り出されたのか
よくある説明を一つ正しておく。CSS は HTML がスタイルを表現できないから生まれたのではない。
HTML の中でもスタイルは書ける。タグごとに style 属性を付ければよい。問題は、そうすると文書が手に負えないほど長くなることだ。ボタン一つに色と大きさと余白と枠線を全部書き、そんな要素が数百あれば文書は読めなくなる。
だからスタイルだけを切り出した。何があるかは HTML に、どう見えるかは CSS に置く分離である。同じスタイルを複数の要素で使い回せるという利点も同じ分離から出てくる。
スタイルが効かないとき文法から疑わない
CSS で最初に大きくつまずくのは優先順位である。同じ要素一つに複数の規則が同時にかかりうるからだ。
ボタンを指す方法はいくつもある。タグ名で button と書くこともでき、クラス名で .btn と書くこともでき、button の中の span のようにより狭く書くこともできる。これらが同じ要素に同時にかかると、より狭く指定したほうが勝つ。
だから色が変わらないときに文法の誤りから探すと時間を失う。たいていは文法は正しく、別の場所にあるより狭い規則がすでに勝っている。ブラウザの開発者ツールでその要素をクリックすれば、どの規則が勝ちどれが取り消し線を引かれたかがそのまま見える。
エージェントに直してもらうときもこの区別が役に立つ。「色が変わりません」より「このクラスに与えた背景色が別の規則に負けているようです」のほうがはるかに早く終わる。
| 指し方 | 例 | 狭さ |
|---|---|---|
| タグ名 | button { } | 広い |
| クラス名 | .btn { } | 中間 |
| 関係で絞る | button span { } | 狭い |
TypeScript は JavaScript の別名ではない
JavaScript はもともと画面を動かすために作られたが、プログラミング言語であるためサーバー側の仕事にも使われ始めた。計算でき、値を保存でき、繰り返せれば言語と呼ぶが、JavaScript はその条件を満たす。HTML は画面構成を書くだけなので言語ではなくマークアップと呼ばれる。
ところが扱う仕事が大きくなると問題が表に出た。ある値が数字か文字かを前もって決めていないので、間違った値が入っても実行するまで誰も気づかない。
そこで上に規則を一枚重ねた。この値は数字だ、この値は文字だと釘を刺しておき、食い違えば実行前に捕まえる。それが TypeScript である。別の言語を新しく学ぶのではなく、JavaScript に形の宣言を足したものだ。
バイブコーディングで生まれるプロジェクトの多くが TypeScript なのもこのためである。人ではなくエージェントがコードを書くほど、実行前に食い違いを捕まえる仕掛けの価値は上がる。