Warning: Undefined array key "HTTP_USER_AGENT" in /home/c8065576/public_html/make-a-living-as-a-se.com/wp-content/themes/the-thor/inc/parts/is_mobile.php on line 22
Warning: Undefined array key "HTTP_USER_AGENT" in /home/c8065576/public_html/make-a-living-as-a-se.com/wp-content/themes/the-thor/inc/parts/is_mobile.php on line 22
Warning: Undefined array key "HTTP_USER_AGENT" in /home/c8065576/public_html/make-a-living-as-a-se.com/wp-content/themes/the-thor/inc/parts/is_mobile.php on line 22
「Webページに、動きやインタラクションを追加するにはどうすればいいの？」
「DOMっていう言葉が出てきたけど、これって一体何のこと？」
JavaScriptを学び、Webページに「動き」を与えようとしたとき、すべての開発者が最初に出会う、最も基本的で、最も重要な概念。それが**「DOM（ドム）」**です。
一言でいうと、DOMとは**「HTMLやXML文書を、JavaScriptなどのプログラミング言語から、自由に操作（追加、削除、変更）できるようにするための『設計図』であり、『通訳』のようなもの」**です。
この記事では、プログラミング初心者の方でも、このDOMという、少し抽象的で分かりにくい概念の本質がスッキリと理解できるように、わかりやすく、徹底的に解説していきます。
-
DOMが生まれた背景と、その役割
-
DOMの構造を「家系図」に例えて徹底解説
-
JavaScriptを使った、具体的なDOM操作の方法
-
なぜ、DOMの理解がフロントエンド開発の「土台」なのか
DOMの正体：HTMLを、JavaScriptが理解できる「オブジェクト」に変換する
まず、HTMLとJavaScriptの関係を考えてみましょう。
-
HTML：Webページの**「構造」**を定義するマークアップ言語。
-
JavaScript：Webページに**「動き」**を与えるプログラミング言語。
この2つは、全く異なる役割を持つ、別の言語です。
私たちが書いた<h1>こんにちは</h1>というHTMLのコードは、そのままでは、ただの「テキスト（文字列）」でしかありません。JavaScriptは、このただのテキストを、どうやって「見出し」として認識し、「中の文字を書き換える」といった操作をすれば良いのでしょうか？
Webブラウザは、HTMLファイルを読み込むと、その内容を解析し、JavaScriptが理解できるような「オブジェクト（モノ）」の集まりとして、メモリ上に再構築します。
この、HTML文書の構造を、オブジェクトの階層構造（ツリー構造）で表現したモデル、それこそがDOMなのです。
【DOMの役割を、外国語の翻訳に例える】
-
HTML文書：あなたが読みたい、外国語で書かれた、一冊の本。
-
Webブラウザ：その本を、一語一句、丁寧に解析してくれる**「超優秀な翻訳家」**。
-
DOM：翻訳家が、あなたの母国語で、本の登場人物や、章立て、段落の関係性を、**わかりやすい「家系図（ツリー構造）」**として、書き起こしてくれたもの。
-
JavaScript（あなた）：あなた（JavaScript）は、外国語（HTML）そのものを直接読むことはできません。しかし、この翻訳された**「家系図（DOM）」**を見れば、「ああ、この登場人物（<h1>）は、この章（<body>）の子供なんだな」と、文書の構造を完全に理解し、**家系図に新しい人物を書き加えたり（要素の追加）、名前を書き換えたり（内容の変更）**することができます。
DOMの構造：「家系図（ツリー構造）」で理解しよう
DOMは、HTMLの入れ子構造を、**「ツリー（木）」**のような階層構造で表現します。これは、親子関係を表す「家系図」をイメージすると、非常に分かりやすいです。
【例となるHTMLコード】
<!DOCTYPE html>
<html>
<head>
<title>私のページ</title>
</head>
<body>
<h1>ようこそ！</h1>
<p>これはサンプルです。</p>
</body>
</html>【家系図の読み解き方】
-
頂点（ご先祖様）：すべての始まりは**document**オブジェクトです。
-
親と子：<html>はdocumentの子。<body>は<html>の子。<h1>と<p>は、<body>の子供たちです。このような関係を**「親子関係」**と呼びます。
-
兄弟：同じ親を持つ<h1>と<p>は、**「兄弟関係」**にあります。
-
ノード (Node)：ツリーを構成する、一つひとつの要素（<html>や<body>、テキストなど）のことを**「ノード」**と呼びます。
「プログラミングを始めたいけど、何から手をつければいい？」「Webサイトって、どうやって作られているの？」 Web制作の世界への第一歩を踏み出そうとするとき、誰もが最初に出会う、最も基本的で、最も重要な言語。そ[…]
JavaScriptによるDOM操作：家系図を書き換える
JavaScriptを使って、実際にDOMを操作してみましょう。DOMを操作するための一連の命令群は**「DOM API」と呼ばれ、ブラウザに標準で備わっています。
すべての操作の起点となるのが、先ほどのご先祖様、documentオブジェクト**です。
1. 要素を取得する（家系図から、特定の人を探し出す）
DOM操作の第一歩は、「どの要素を操作したいのか」を、DOMツリーの中から見つけ出すことです。
-
IDを指定して取得：document.getElementById()
Generated html
<p id="message">こんにちは</p>Generated javascript
const pElement = document.getElementById('message'); // id="message"の要素を取得 -
タグ名を指定して取得：document.getElementsByTagName()
Generated javascript
const allParagraphs = document.getElementsByTagName('p'); // すべての<p>タグを取得 -
CSSセレクタで取得：document.querySelector() / querySelectorAll()
CSSでスタイルを指定するときと同じ書き方（セレクタ）で、要素を取得できる、非常に強力でモダンな方法です。Generated html
<div class="content"> <p>最初の段落</p> </div>Generated javascript
const contentDiv = document.querySelector('.content'); // class="content"の最初の要素を取得 const firstParagraph = document.querySelector('.content p'); // class="content"の中の最初のpタグを取得
2. 要素の内容や属性を変更する（人物の名前やプロフィールを書き換える）
要素を取得できたら、その中身を自由自在に書き換えることができます。
-
テキストを書き換える：.textContent
Generated javascript
// id="message"の要素のテキストを「こんばんは」に変更 pElement.textContent = 'こんばんは';
-
HTMLを書き換える：.innerHTML
Generated javascript
const divElement = document.getElementById('main'); // id="main"のdivタグの中に、<h1>タグを丸ごと挿入 divElement.innerHTML = '<h1>新しい見出し</h1>';
-
属性を変更する：.setAttribute()
Generated javascript
const image = document.querySelector('img'); // imgタグのsrc属性を、'cat.jpg'に書き換える image.setAttribute('src', 'cat.jpg');
3. 要素を新しく作成・追加する（家系図に、新しい家族を追加する）
DOMでは、HTMLに書かれていない要素を、JavaScriptで動的に生成し、好きな場所に追加することができます。
Generated javascript
// 1. 新しい<li>要素を作成
const newLi = document.createElement('li');
// 2. <li>要素のテキスト内容を設定
newLi.textContent = 'ぶどう';
// 3. id="fruits-list"の<ul>要素を取得
const ulElement = document.getElementById('fruits-list');
// 4. <ul>要素の子として、作成した<li>要素を追加
ulElement.appendChild(newLi);このコードを実行すると、ページのフルーツリストの末尾に「ぶどう」が追加されます。
なぜ、DOMの理解がフロントエンド開発の「土台」なのか？
現代のフロントエンド開発では、ReactやVue.jsといった、DOM操作を便利にしてくれる**「JavaScriptフレームワーク/ライブラリ」**を使うのが当たり前になっています。
これらのフレームワークは、**「仮想DOM（Virtual DOM）」**という技術を使い、私たちが直接DOMを操作する手間を、裏側で肩代わりしてくれます。
これにより、開発者は、より効率的に、そしてバグ少なく、複雑なUI（ユーザーインターフェース）を構築できるようになりました。
しかし、これらの便利なフレームワークも、その根底では、この記事で解説した、基本的なDOMの仕組みの上で動いています。
-
なぜ、仮想DOMは速いのか？
-
フレームワークでパフォーマンス問題が起きたとき、どこがボトルネックになっているのか？
-
フレームワークを使わずに、ちょっとしたUIを作りたいとき。
これらの場面で、DOMという「土台」の知識があるかないかで、あなたの問題解決能力と、技術的な引き出しの多さに、天と地ほどの差が生まれます。
まとめ
DOMは、一見すると抽象的で、目に見えない、分かりにくい概念かもしれません。
しかし、その本質は、静的なHTML文書を、JavaScriptという魔法使いが、自由に操れる「動的なオブジェクトの家系図」へと変身させる、Webの根幹をなす、偉大な仕組みです。
-
DOMは、HTML文書の構造を、JavaScriptが理解できるオブジェクトのツリーとして表現したもの。
-
JavaScriptは、documentオブジェクトを起点に、DOMを操作（取得・変更・追加・削除）する。
-
このDOM操作によって、Webページは、ユーザーのアクションに応じて、動的に変化することができる。
あなたがJavaScriptを学び、document.getElementById()という呪文を初めて唱え、Webページの文字を自分の手で書き換えることに成功したとき。
その瞬間、あなたは、ただのHTML/CSSコーダーから、Webページに「命」を吹き込むことができる、フロントエンド開発者としての、大きな一歩を踏み出すことになるのです。
フロントエンドエンジニアって実際どういう事をする人なの？ 具体的に何をつくっている人なんだろう 転職サイトでシステムエンジニアを検索するときの条件に「フロントエンド」や「バックエンド」といった言葉を目にし[…]
