はじめに
新しいシリーズを始めます。テーマはフロントエンドです。Vue や React、TypeScript、ビルドツール。名前は聞くけれど、中で何が起きているのかは正直よく分からない。そういう状態から抜け出して、モダンなフロントエンドのコードを、根拠を持って読んで直せるところまで、35日かけて一段ずつ上っていきます。
このシリーズは、プログラミングやWebそのものが初めての人、HTML・CSS・JavaScript にまだ不慣れな人も置いていかないように書きます。用語は初めて出てきたところで噛み砕き、前提を飛ばしません。バックエンド編（Go）とは独立して読めます。
この回はブラウザさえあれば始められます。Node.js などの準備はまだ要りません（後の回で Vite というツールを入れます）。メモ帳のようなテキストエディタと、Chrome などのブラウザだけ用意してください。
このシリーズで身につくこと
35本を終えると、次のことができるようになります。
- HTML・CSS・JavaScript が画面の上で何を担っているかを、仕組みから説明できる
- TypeScript で型を付けながら、壊れにくいコードを書ける
- Vue でコンポーネントに分けて画面を組み立て、状態の管理やAPI連携ができる
- テスト・リンタ・ビルドといった、実務のコードベースを支える道具の役割を説明できる
- 新しいコードに出会ったとき「たぶんこうなっている」と見当をつけて読み解ける
目指すのは、チュートリアルをなぞれることではありません。なぜそう動くのかを自分の言葉で説明できる状態です。
なぜ、AIの時代に基礎から学ぶのか
ここで掲げる考えは、姉妹シリーズのバックエンド編（「42日でバックエンドエンジニアの基礎を完全に理解する」）とまったく同じです。向き合う技術がフロントエンドに変わっても、根っこは1ミリも変わりません。あちらを読んだ方は読み飛ばして構いませんが、初めての方のために一度だけ繰り返します。
今はAIに頼めば、それらしく動くコードがすぐ出てきます。だからこそ基礎が要ります。AIが出したコードは「動く」ように見えても、なぜそう書くのか、どこで壊れるのかは、読める人にしか分かりません。基礎がある人はAIを最強の道具にできますが、基礎がない人は出てきたコードが正しいか判断できず、事故に気づけません。このシリーズは、その判断力の土台を作ります。
マーカーの意味はこうです。学習の濃淡をつけるために使います。
- 🔴 覚える：手が覚えるまで繰り返す、毎日使う土台
- 🟡 理解する：丸暗記ではなく、理屈を説明できるようにする
- ⚪ 今は流す：存在だけ知っておけば十分。必要になったら戻る
迷ったら🔴だけ確実にしてください。それだけでも前に進めます。
🔴 ブラウザは「設計図」から画面を組み立てている
私たちが見ているWebページは、最初から画像として届いているわけではありません。ブラウザは 設計図を受け取って、その場で画面を組み立てて います。
大工さんを思い浮かべてください。現場に届くのは完成した家ではなく、設計図です。大工さんは設計図を読み、部屋の位置を決め（レイアウト）、壁を塗って家具を置きます（描画）。ブラウザもこれと同じことを、ページを開くたびに一瞬でやっています。
その設計図が HTML です。そして、設計図を読んで組み立てる流れはこうなっています。
順番に見ます。
- HTMLが届く：サーバーから、文字で書かれたHTMLが送られてきます
- パース（解析）する：ブラウザがHTMLを読んで、意味を理解します
- DOMを作る：HTMLを「木（ツリー）構造」に組み立てます。これがDOMです（後で詳しく説明します）
- レイアウト：どの要素をどこに、どんな大きさで置くかを計算します
- ペイント（描画）：実際に色をつけて画面に描きます
ここまでが、ページを開いた瞬間に起きていることです。
🔴 DOMとは「HTMLを木にしたもの」
DOM（Document Object Model）は、このシリーズで何度も出てくる最重要語です。最初にしっかり掴んでおきます。
DOMとは、ブラウザがHTMLを読み込んで、プログラムから触れる「木構造」に変換したものです。たとえば次のHTMLは、
<body>
<h1>こんにちは</h1>
<p>これは<strong>最初</strong>のページです</p>
</body>
ブラウザの中では、こういう親子関係の木になります。
body
├── h1 「こんにちは」
└── p
├── テキスト「これは」
├── strong 「最初」
└── テキスト「のページです」
body の下に h1 と p がぶら下がり、p の下にさらに文字や strong がぶら下がる。この入れ子が「木」です。そしてここが大事な点です。JavaScript がWebページを動かせるのは、このDOMという木を後から書き換えられるからです。
ボタンを押したら文字が変わる、新しい項目がリストに追加される。あれは全部、JavaScript が DOM の木を操作した結果です。HTMLはあくまで「最初の設計図」で、動きがつくのはDOMを触るからだ、と覚えてください。
HTML・CSS・JavaScript の役割分担も、ここで整理しておきます。
| 言語 | 役割 | 家でいうと |
|---|---|---|
| HTML | 構造（何がどこにあるか） | 間取り・骨組み |
| CSS | 見た目（色・大きさ・配置） | 内装・塗装 |
| JavaScript | 振る舞い（操作への反応） | 照明やドアの自動化 |
🟡 イベントループ：JavaScript は基本「1人で順番に」こなす
もう1つ、最初に知っておくと後がぐっと楽になる仕組みがあります。イベントループです。
JavaScript は、基本的に 1本の処理の流れ（シングルスレッド） で動きます。料理人が1人しかいないキッチンだと思ってください。注文（クリックされた、データが届いた、など）が来たら、その料理人が1つずつ順番にさばいていきます。この「来た順に1つずつ処理する」仕組みがイベントループです。
ここから、大事な結果が導けます。重たい処理を1つ始めると、終わるまで他が何もできなくなるのです。料理人が1つの難しい料理に10秒かかりきりになれば、その間ほかの注文は待たされ、画面はクリックしても反応しなくなります（固まる）。
だからフロントエンドでは、時間のかかる処理（サーバーとの通信など）を「待っている間も他をさばける」書き方にします。その書き方が非同期処理で、#3 でたっぷり扱います。ここでは「JavaScript は1人で順番にこなすから、重い処理で画面が固まることがある」とだけ掴んでおけば十分です。
【手を動かす①】DOMの木を自分の目で見る
実際にブラウザの中のDOMを覗いてみます。次の内容を index.html という名前で保存してください（文字コードはUTF-8で）。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>はじめてのページ</title>
</head>
<body>
<h1 id="greeting">こんにちは</h1>
<p>これは<strong>最初</strong>のページです</p>
</body>
</html>
保存したファイルをブラウザにドラッグ＆ドロップで開くと、「こんにちは」と表示されます。ここで F12キー（または右クリック →「検証」）を押して、開発者ツール（DevTools）を開いてください。
「Elements」（要素）タブを見ると、さきほどのHTMLが木構造として表示されています。body を開くと h1 と p が入れ子になっているのが見えるはずです。これがDOMです。 いま画面に見えているものが、この木から組み立てられていることを確認してください。
【手を動かす②】JavaScript で画面を書き換える
次に、DOMを書き換えて画面が変わることを体験します。DevTools の「Console」（コンソール）タブを開いて、次の1行を入力して Enter キーを押してください。
document.querySelector("#greeting").textContent = "書き換わりました";
画面の「こんにちは」が「書き換わりました」に変わったはずです。何が起きたかを分解します。
-
documentは、いま開いているページのDOM全体を指します -
querySelector("#greeting")は、id="greeting"の要素（さきほどのh1）を木の中から探し出します -
.textContent = "..."で、その要素の文字を書き換えます
HTMLファイル自体は1文字も変えていません。変えたのはブラウザの中のDOMです。JavaScript がDOMを触ると画面が変わる。 これがフロントエンドのいちばんの土台で、Vue のようなフレームワークも、突き詰めればこの「DOMの書き換え」を賢く自動でやってくれる道具です。
確認テスト
知識問題
Q1. ブラウザが、サーバーから届いたHTMLを画面に表示するまでの流れを、途中に出てくる「DOM」という言葉を使って説明してください。
解答を見る
ブラウザはまずHTMLを受け取り、それを解析（パース）して DOM という木構造 に組み立てます。次に、どの要素をどこにどんな大きさで置くかを計算し（レイアウト）、実際に色をつけて描画します（ペイント）。その結果が画面に表示されます。ポイントは、HTMLはそのまま表示されるのではなく、一度DOMという「プログラムから触れる木」に変換されてから画面になる、という点です。
Q2. DOMとは何ですか。HTMLとの違いが分かるように説明してください。
解答を見る
DOMは、ブラウザがHTMLを読み込んで作る、木構造のデータです。HTMLは文字で書かれた「最初の設計図」で、ファイルに書いた時点から変わりません。一方DOMは、ブラウザの中にある「組み立て後の状態」で、JavaScript から後から書き換えられます。ボタンを押すと表示が変わるといった動きは、JavaScript がこのDOMを操作して実現しています。HTML＝静的な設計図、DOM＝触って変えられる実物、と捉えると違いがはっきりします。
Q3. JavaScript は基本的に1本の流れ（シングルスレッド）で動きます。このことから、重たい処理を始めると画面にどんなことが起きますか。理由とあわせて説明してください。
解答を見る
重たい処理が終わるまで、画面が固まって操作に反応しなくなります。JavaScript は料理人が1人のキッチンのように、来たものを1つずつ順番に処理します（イベントループ）。1つの重い処理にかかりきりになると、その間はクリックなど他のイベントを処理できないからです。だからフロントエンドでは、時間のかかる処理を「待っている間も他をさばける」非同期の書き方にします（#3 で扱います）。
Q4. HTML・CSS・JavaScript は、それぞれ画面の何を担当していますか。1つずつ説明してください。
解答を見る
HTML は構造（何がどこにあるか。見出し・段落・ボタンといった中身と骨組み）、CSS は見た目（色・大きさ・配置・余白などのスタイル）、JavaScript は振る舞い（クリックされたら表示を変える、といった操作への反応）を担当します。家でいえば、HTMLが間取り、CSSが内装、JavaScriptが自動照明のような動きにあたります。役割が分かれているので、見た目だけ直したいならCSS、動きを足したいならJavaScript、と触る場所を選べます。
実技問題
Q5. 次のHTMLがあります。ページを開いたあと、コンソールで JavaScript を使って、<p id="msg"> の文字を「完了しました」に書き換えるコードを書いてください。
<p id="msg">処理中</p>
解答を見る
document.querySelector("#msg").textContent = "完了しました";
ポイントは3つです。document でページのDOM全体を指し、querySelector("#msg") で id="msg" の要素を木の中から1つ探し出し、.textContent にその表示文字を入れます。# は「このidの要素」という意味の指定方法です（CSSのセレクタと同じ書き方で、#4以降やVueでも繰り返し出てきます）。HTMLファイルは変えず、ブラウザの中のDOMだけを書き換えているので、画面の文字だけが変わります。
まとめ
- ブラウザはHTML（設計図）を受け取り、DOMという木構造に組み立ててから、レイアウト・描画を経て画面にする
- DOMはJavaScriptから書き換えられる。画面に動きがつくのは、JavaScriptがDOMを操作しているから。Vueのようなフレームワークも、根っこはこのDOM書き換えの自動化
- HTMLは構造、CSSは見た目、JavaScriptは振る舞い、と役割が分かれている
- JavaScriptは基本1本の流れで順番に処理する（イベントループ）。だから重い処理で画面が固まることがある
今日いちばん持ち帰ってほしいのは「HTMLはそのまま表示されるのではなく、DOMになってから画面になる。JavaScriptはそのDOMを書き換えて動かす」という一文です。ここが分かっていると、この先のすべてがつながります。
次回は #2 モダンJavaScript基礎 です。画面を動かす主役である JavaScript そのものを、変数・配列・オブジェクトといった基本から、実務で当たり前に使う書き方まで押さえます。