概要： Web画面が動的に変わる裏側で、プログラムが何を操作し、どうやってデータをやり取りしているのか。Web開発の基礎となる2大要素（DOMとJSON）の正体を解剖します。
WebサイトやWebアプリを開発しようとしたとき、必ず耳にするのが「HTML」「CSS」「JavaScript」という言葉です。そして、データを扱うようになると「DOM」や「JSON」という謎のアルファベットが登場し、初心者をつまずかせます。
第1回目となるこの記事では、フロントエンド（画面側）がどのような仕組みで動き、裏側でどのようにデータを運んでいるのか、その超基本を分かりやすく解説します。
1.1 Webページを形作る3大要素の役割分担
Webページは、主に3つの言語の組み合わせでできています。それぞれの役割を「家づくり」に例えると、非常にシンプルに理解できます。要素役割家づくりでの例えHTML構造・骨組みの定義建物の基礎、柱、床、壁CSS装飾・レイアウト・見た目壁紙、インテリア、外壁の塗装JavaScript (JS)動的な処理・頭脳・命自動ドア、電気のスイッチ、水道どんなに美しいデザイン（CSS）のボタンがあっても、JavaScriptがなければ「押しても何も起きないだだの絵」です。JavaScriptが命を吹き込むことで、初めてWebページは「動くアプリケーション」へと進化します。
1.2 DOM（Document Object Model）とは？
JavaScriptを使って画面を動かす際、JSは直接HTMLのテキストを書き換えているわけではありません。ここで登場するのがDOM（ドキュメント・オブジェクト・モデル）です。
DOMの正体: ブラウザがHTMLを読み込んだ際に内部で自動生成する「画面の設計図（ツリー構造）」のことです。
JSとの関係: JavaScriptは、このDOMという設計図にアクセスし、「ここの文字の色を変えて」「ここに新しいボタンを追加して」と命令を出します。
動く仕組み: JSがDOMを書き換えると、ブラウザがそれを検知して、瞬時に実際の画面の見た目をアップデートします。
つまり、DOMは「プログラム（JS）が画面（HTML）を操作するための専用リモコン」のようなものだと覚えておきましょう。
1.3 JSON（JavaScript Object Notation）とは？
画面の操作方法（DOM）が分かったら、次は「データ」の扱い方です。現代のWeb開発において、データのやり取りに欠かせないのがJSON（ジェイソン）です。
JSONの正体: インターネットの電線をとおってデータを送受信するための「テキストの共通ルール」です。
特徴: 中括弧 {} や角括弧 [] を使い、「キー」と「値」のペアでデータを表現します。
メリット: 人間が見ても構造が読みやすく、同時にプログラム（特にJavaScript）にとっても一瞬で処理できる、非常に効率的なデータ形式です。
データベースから情報を取り出したり、外部のAPIと通信したりする際、データはほぼ間違いなくこのJSONという形式に変換されて運ばれてきます。
1.4 決定的な違い：部屋（DOM）と荷物（JSON）の例え
「DOM」と「JSON」。どちらもJavaScriptと深く関わる言葉ですが、役割は明確に異なります。「引っ越し」に例えて、この2つの決定的な違いを整理しましょう。
DOMは「部屋（空間）」: 家具をどこに配置するか、壁紙をどうするかという「目に見える構造」そのものです。
JSONは「引越し用の段ボール箱（荷物）」: 部屋に運び込むための「中身（データ）」を、運びやすいように規格化してパッキングしたものです。
【一連の流れ】
インターネットという道路を通って、JSONという段ボール箱（データ）が運ばれてきます。JavaScriptがその箱を開け、中身を取り出し、DOMという部屋の適切な場所（表の中やリストの上など）に飾り付ける。これが、現代のWebアプリが動く基本的なメカニズムです。
1.5 【歴史コラム】JavaScript誕生のドラマ
最後に、私たちが当たり前のように使っている「JavaScript」の数奇な歴史をご紹介します。
10日間で作られた言語: 1995年、当時の覇権ブラウザを開発していたネットスケープ社のブレンダン・アイク氏によって、JavaScriptの原型はわずか10日間で書き上げられました。
「Java」との大人の事情: 実は、プログラミング言語の「Java」と「JavaScript」は全くの別物です（メロンとメロンパンくらい違います）。当時大流行していたJavaの人気にあやかるため、マーケティング上の理由で急遽「JavaScript」という名前に変更されたという歴史があります。
世界標準規格「ECMAScript」へ: その後、MicrosoftのInternet Explorerなどとの激しい「ブラウザ戦争」の中で、各社が独自の機能を追加し大混乱に陥りました。これを解決するため、現在では「ECMAScript（エクマスクリプト）」という世界共通の標準規格としてルールが統一され、進化を続けています。
次回の【第2ページ】では、今回登場した「JSON（段ボール箱）」を、サーバーとフロントエンドの間でどのように安全かつ正確に届けるのか。現代Web通信の要である「REST API」の成り立ちと構造に迫ります！