①なぜ、あなたの作った画面は「動く」のか？

はじめに：なぜ、あなたの作った画面は「動く」のか？

普段私たちが何気なくスマートフォンやPCで閲覧しているWebサイト。ボタンをクリックするとポップアップが表示されたり、ページを再読み込み（リロード）していないのに新しいタイムラインが次々と表示されたりします。

この「リロードなしで画面がスムーズに切り替わる」というモダンな体験の裏側では、ブラウザの内部で2つの決定的な主役が休むことなく働き続けています。それが「DOM（ドム）」と「JSON（ジェイソン）」です。

本記事では、フロントエンドエンジニアとして絶対に避けては通れない、しかし独学では最も泥沼にはまりやすいこの2大要素の正体を、具体的なソースコードと「部屋と荷物」という分かりやすい比喩、そして思わず人に話したくなる歴史のドラマを交えて、徹底的に解剖していきます。

これを読み終える頃には、あなたが何気なく書いているJavaScriptが、ブラウザの中でどのように命を吹き込まれ、どのように外部のサーバーと通信しているのかが、手に取るように理解できるようになるはずです。

1.1 Webページを形作る3大要素の役割分担

まずは大前提となる、Webページを構成する「3大要素」の役割をおさらいしておきましょう。よく「建築」や「人間」に例えられますが、この役割分担が頭に染みついているかどうかが、この後のDOMの理解度を左右します。

要素名役割人間に例えると役割の本質
HTML (HyperText Markup Language)構造の定義骨組み・臓器「ここに文字がある」「ここにボタンがある」という配置を決める
CSS (Cascading Style Sheets)装飾・デザイン服・髪型・メイク色、サイズ、レイアウト、アニメーションなどの見た目を整える
JavaScript (JS)動的な制御・ロジック頭脳・神経・命ユーザーの操作に応じて計算し、骨組みや見た目を変化させる

なぜJavaScriptだけが「特別」なのか

HTMLとCSSは、基本的に「静的（スタティック）」な言語です。一度ブラウザに読み込まれたら、自力で自分の形を変えることはできません。

そこに「動的（ダイナミック）」な変化をもたらす唯一の存在がJavaScriptです。JavaScriptは、ユーザーの「クリックした」「スクロールした」「キーボードを叩いた」というイベント（行動）を検知し、それに応じてHTMLの文字を書き換えたり、CSSのクラスを付け外したりします。

では、JavaScriptはどうやって、ただのテキストファイルであるHTMLを自由自在に操っているのでしょうか？その秘密のインターフェースこそが「DOM」です。

1.2 DOM（Document Object Model）とは？：ブラウザが管理する「画面の設計図」

DOMの正体は「巨大なツリー構造」

DOM（Document Object Model）を一言で表現するなら、「ブラウザがHTMLを読み込んだときに、内部で作り出す『画面の設計図（オブジェクトの家系図）』」です。

私たちが書くHTMLは、以下のような単なるテキストデータに過ぎません。

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>マイアプリ</title>
</head>
<body>
    <main id="app">
        <h1 class="title">こんにちは！</h1>
        <button id="change-btn">文字を変える</button>
    </main>
</body>
</html>

しかし、ブラウザはこのテキストをそのまま画面に映しているわけではありません。このHTMLを上から順番に読み込み、以下のような「ツリー構造（木構造）」のデータに変換してメモリ上に展開します。

Plaintext

 └─ html
     ├─ head
     │   └─ title ("マイアプリ")
     └─ body
         └─ main (id="app")
             ├─ h1 (class="title", テキスト: "こんにちは！")
             └─ button (id="change-btn", テキスト: "文字を変える")

このツリーの節（ふし）のひとつのことを「ノード（Node）」または「要素（Element）」と呼びます。

JavaScriptは、このメモリ上に展開されたツリー構造に対してアクセスし、「h1のテキストを書き換えろ」「buttonがクリックされたらイベントを起こせ」という命令を下しているのです。

【実践】JavaScriptでDOMを操作する

具体的なコードで見てみましょう。上記のHTMLのボタンをクリックしたときに、タイトル（h1）の文字を「システムを起動しました」に書き換えるJavaScriptは以下のようになります。

JavaScript

// 1. DOMツリーから、操作したい要素を「探して取得する」
const titleElement = document.querySelector('.title');
const buttonElement = document.getElementById('change-btn');

// 2. ボタンに「クリックされたら動く処理」を登録する（イベントリスナー）
buttonElement.addEventListener('click', () => {
    
    // 3. タイトル要素の「中身（テキスト）」を書き換える
    titleElement.textContent = 'システムを起動しました！';
    
    // 4. ついでにCSSのスタイルもDOM経由で直接変更してみる
    titleElement.style.color = '#ff4757';
    
    console.log('DOMが書き換わりました。');
});

なぜDOMという仕組みが必要なのか？

もしDOMがなかったら、JavaScriptはHTMLのテキストファイルから「書き換えたい場所」を文字列検索（正規表現など）で無理やり探し出し、テキストを置換して、ページ全体を丸ごと再読込（リロード）しなければならなくなります。これでは動作が極めて重く、使い物になりません。

DOMという「ツリー構造の設計図」がブラウザのメモリ上にあるからこそ、JavaScriptは「ピンポイントで、その要素だけを、ミリ秒単位の爆速で書き換える」ことができるのです。

⚠️ シニアの手引き：DOM操作の「重さ」に注意せよ

DOMの書き換えは、ブラウザにとって非常にエネルギーを使う処理です。画面の要素が1つ書き換わると、ブラウザは「画面全体のレイアウトの再計算（Reflow）」や「再描画（Repaint）」を行う必要があるからです。

現代のReactやVue.jsといったモダンフロントエンドフレームワークが「仮想DOM（Virtual DOM）」という技術を採用しているのは、この生のDOM操作を最小限に抑えて高速化するためです。基礎として「DOM操作はコストが高い」という感覚を身につけておきましょう。

1.3 JSON（JavaScript Object Notation）とは？：インターネットを流れる「データの引越し用段ボール」

画面の形を変える仕組みがDOMなら、その画面に表示するための「中身（データ）」はどこからやってくるのでしょうか？大抵の場合、それは外部のサーバーやデータベースから送られてきます。

そのデータ通信の標準規格として、世界中で使われているテキストルールがJSON（JavaScript Object Notation）です。

なぜ、ただの「テキスト」である必要があるのか？

データベースの中にあるデータ（ユーザー情報、商品の在庫数など）は、そのままの状態ではインターネットの電線（光ファイバーやWi-Fiの電波）を通ることができません。電線を通すためには、すべてのデータを一度「ただの1行の文字列（テキスト）」に変換する必要があります。

JSONは、そのテキスト化するときの「世界共通のフォーマット（書き方ルール）」です。

JSONの書き方ルール

JSONの構造は非常にシンプルで、JavaScriptの「オブジェクト（連想配列）」の書き方をベースにしています。

JSON

{
  "userId": 1024,
  "userName": "山田太郎",
  "isAdmin": true,
  "skills": ["HTML", "CSS", "JavaScript"],
  "profile": {
    "age": 28,
    "location": "東京"
  }
}

❌ 絶対にやってはいけない！JSONの文法ミス

JSONはルールが非常に厳格です。JavaScriptの感覚で書くとエラーになり、通信が失敗します。以下のポイントは必ず暗記してください。

  1. キー（属性名）は必ずダブルクォーテーション（"）で囲む。 シングルクォーテーション（'）は不可。
  2. 文字列の値も必ずダブルクォーテーション（"）で囲む。
  3. 末尾のカンマに注意。 最後の要素の後ろにカンマを付けてはいけない（JavaScriptでは許されますが、JSONでは一発アウトです）。
  4. 扱えるデータ型： 文字列、数値、オブジェクト、配列、真偽値（true/false）、null のみ。※JavaScriptの「関数」や「undefined」は送れません。

【実践】JavaScriptでのJSONの変換処理

実務では、サーバーから届いた「JSON文字列」を、JavaScriptで扱える「オブジェクト」に変換したり、逆に送信するために変換したりする作業が頻出します。

JavaScript

// 1. サーバーから届いたと仮定した「JSON形式のただの文字列」
const jsonString = '{"productName": "高性能キーボード", "price": 24800}';

// 2. 【デシリアライズ（解析）】文字列からJavaScriptのオブジェクトに変換する
const productObj = JSON.parse(jsonString);

console.log(productObj.productName); // 出力: 高性能キーボード
console.log(productObj.price);       // 出力: 24800（数値として計算可能）

// 3. 【シリアライズ（直列化）】オブジェクトを、送信用のJSON文字列に変換する
const newOrder = {
    orderId: 5501,
    status: "shipping"
};

const sendData = JSON.stringify(newOrder);
console.log(sendData); // 出力: '{"orderId":5501,"status":"shipping"}'

1.4 決定的な違い：部屋（DOM）と荷物（JSON）の例え

ここで、初心者や非エンジニアが最も混同しやすい「DOM」と「JSON」の違いを、完全に脳内に定着させるための例え話をしましょう。

あなたのWebサイトを、引越し先の「新しい部屋」だと想像してください。

Plaintext

【部屋（DOM）】                  【荷物（JSON）】
  ├─ 押し入れ（配列構造）          ├─ お皿（データ：文字列）
  ├─ テレビ台（オブジェクト）      ├─ 本（データ：数値）
  └─ 冷蔵庫（要素）               └─ 服（データ：真偽値）
        │                                │
        └────────── [ 格納 ] ────────────┘
               JavaScriptの役割
  • DOMは「お部屋の家具の配置（枠組み）」です。「ここに冷蔵庫（div）がある」「ここにクローゼット（ul）がある」という、物理的な空間や収納そのものです。
  • JSONは、トラックで運ばれてきた「引越しの段ボール箱（データ）」です。段ボール箱の中には、服や食器、本（名前、年齢、価格などのデータ）がコンパクトにパッキングされて入っています。

2つが組み合わさる瞬間（モダンWeb開発の真髄）

あなたがWebアプリを開いたとき、最初は「空っぽの家具の枠組み（DOM）」だけが用意されています。

その後、背景でサーバーから「データが詰まった段ボール（JSON）」が届きます。

JavaScriptの仕事は、「届いた段ボール（JSON）を開封し、中の荷物を取り出して、部屋の適切な家具（DOM）の中に1つずつ並べていくこと」です。

応用：動的なユーザーフォームの処理

この関係性を理解するために、少し高度な「ユーザー登録フォーム」の実装例を見てみましょう。

HTML（DOM）から入力値を受け取り、それをJSONに加工して、再び画面に反映する一連の流れです。

HTML

<form id="user-form">
    <input type="text" id="input-name" placeholder="お名前を入力">
    <button type="submit">登録</button>
</form>

<div id="result-badge" style="display: none;">
    登録ユーザー: <span id="display-name"></span>
</div>

JavaScript

// JavaScriptによる部屋（DOM）と荷物（JSON）のコントロール
const form = document.getElementById('user-form');
const resultBadge = document.getElementById('result-badge');
const displayName = document.getElementById('display-name');

form.addEventListener('submit', (event) => {
    event.preventDefault(); // ページのリロードを防ぐ
    
    // 1. DOMからユーザーが入力したテキスト（生データ）を回収する
    const inputNameValue = document.getElementById('input-name').value;
    
    // 2. 回収したデータを、通信用の「荷物の構造（オブジェクト）」に整える
    const userData = {
        createdAt: new Date().toISOString(),
        name: inputNameValue,
        status: "active"
    };
    
    // 3. これをサーバーに送るためにJSON化する（今回はシミュレーション）
    const jsonPayload = JSON.stringify(userData);
    console.log('サーバーに送信するJSON荷物:', jsonPayload);
    
    // 4. サーバーから「登録成功」のレスポンスが返ってきたと仮定して、
    //    再びDOMを操作して画面を動的に書き換える（部屋に荷物を飾る）
    displayName.textContent = userData.name;
    resultBadge.style.display = 'block'; // バッジを表示状態にする
});

この「DOMから値を引っこ抜く ➔ JSONにして送る ➔ 返ってきたJSONをDOMに流し込む」というサイクルこそが、現代のあらゆるWebアプリケーション（Twitter、LINE、Amazonなど）が例外なく行っている基本動作なのです。

1.5 【歴史コラム】JavaScript誕生のドラマ：10日間の奇跡と大人の事情

今や世界で最も使われているプログラミング言語の1つとなったJavaScriptですが、その誕生の歴史は、驚くほどのドタバタ劇と大人のマーケティング事情に満ちています。

1995年、ネットスケープ社のブレンダン・アイクが「10日間」で開発

1990年代半ば、世界初の商用Webブラウザ「Netscape Navigator」を開発していたネットスケープ社は、大きな課題を抱えていました。当時のWebページは完全に静的なHTMLだけで、文字と画像が表示されるだけの「ただの書類」だったのです。

「画面上で簡単な計算をさせたり、ボタンをクリックしたらアニメーションが動くような、ブラウザ用の軽量なスクリプト言語が欲しい」

そう考えた同社の天才エンジニア、ブレンダン・アイク（Brendan Eich）は、なんとわずか10日間でJavaScriptの原型（当時の開発コードネームは「Mocha」、その後に「LiveScript」）を設計・開発してしまいました。

10日間という突貫工事で作られたため、初期のJavaScriptにはいくつかの奇妙な仕様（例えば、有名な typeof null が "object" になってしまうバグなど）が残ることになりましたが、このスピード開発がなければ、今のWebの歴史は全く違うものになっていたでしょう。

「Java」と「JavaScript」は全くの別物という大人の事情

未経験者が100%抱く疑問、「JavaとJavaScriptって何が違うの？」。

結論から言うと、「インドとインドネシア」「メロンとメロンパン」くらい全くの別物です。

ではなぜ、こんなに紛らわしい名前になったのでしょうか？そこには当時の「マーケティング上の大人の事情」がありました。

1995年当時、サン・マイクロシステムズ社が開発した「Java」という言語が、IT業界で空前の大ブームを巻き起こしていました。これに便乗したネットスケープ社の経営陣が、サン・マイクロシステムズ社と業務提携を結び、LiveScriptという名前だった自社言語を「JavaScript」に改名したのです。

「Javaの弟分みたいな名前を付ければ、知名度が上がって流行るだろう」という、今で言えば少し強引なバズ狙いのネーミングでした。結果としてこの戦略は大成功を収めますが、後世の学習者を永遠に混乱させる原因となったのです。

ブラウザ戦争を経て世界標準規格「ECMAScript（エクマスクリプト）」へ

JavaScriptが登場すると、ライバルであるマイクロソフト社も黙っていませんでした。彼らはInternet Explorer（IE）に、JavaScriptをリバースエンジニアリングして真似た「JScript」という独自の言語を搭載します。

ここから、NetscapeとIEによる激しい「ブラウザ戦争」が勃発します。タチが悪かったのは、それぞれのブラウザでJavaScriptの仕様やDOMの構造が微妙に異なっていたことです。エンジニアたちは、「Netscape用」と「IE用」で別々のコードを書かされるという、暗黒の時代を過ごすことになりました。

「これではWebが崩壊する」と危機感を抱いた業界は、国際標準化機関である「ECMAインターナショナル」に仕様の標準化を依頼します。こうして生まれたJavaScriptの共通規格（共通の取扱説明書）が「ECMAScript（エクマスクリプト）」です。

現在、私たちが使っている「ES6（ES2015）」やそれ以降のモダンなJavaScriptは、すべてこのECMAScriptという厳格な世界共通ルールに基づいてブラウザに実装されているため、私たちはどのブラウザでも同じように動くコードを書くことができるのです。

第1ページのまとめ

  • HTML/CSS/JSの役割： HTMLは骨組み、CSSは見栄え、JavaScriptは「命（動き）」を与える。
  • DOM： ブラウザがHTMLを元に作成する「画面の設計図（ツリー構造）」。JSはこれを書き換えて画面を動かす。
  • JSON： ネットワークを流れる「共通のテキストデータ形式」。厳格なダブルクォーテーションのルールを持つ。
  • 役割の違い： DOMはデータを飾る「部屋（家具）」であり、JSONはデータを運ぶ「段ボール箱」。

フロントエンドの基本である「画面操作」と「データ形式」をマスターしたあなた。次は、このJSONという荷物を、インターネットを超えてサーバーやデータベースとどのように安全に、かつ美しくやり取りするのかという「通信のルール」を学ぶ必要があります。

次回【第2ページ】では、現代のWeb通信の絶対王政である「REST API」の成り立ちと構造、そしてかつて世界を支配したデータ形式「XML」から「JSON」への政権交代のドラマに迫ります。お楽しみに！