フロントエンド開発における技術用語の使い方 - DOM を例に考える • AQZ Tech Chronicles

前回、reactの記事の中で、次のような表記がありました。

「パフォーマンスが良い（DOMの更新が最小限）」

これがずーっと、のどに刺さった小骨のように引っかかってるんです。いや、靴の中に入った小石でしょうか. それとも電源メニューにWindows Updateが含まれた時の気分？

まあ、とにかくもやもやしてるんです。

DOMとは何か

なぜもやもやしていたか？今さらですが、AIにDOMについて質問しました。

DOMについて説明させていただきます。

DOM (Document Object Model) とは、HTMLやXMLドキュメントをツリー構造として表現し、JavaScriptからアクセス・操作できるようにするためのインターフェースです。

簡単な例で説明しましょう:

<html>
	<body>
		<div id="container">
			<h1>タイトル</h1>
			<p>こんにちは</p>
		</div>
	</body>
</html>

このHTMLは、DOMでは以下のようなツリー構造として表現されます:

document
  └── html
       └── body
            └── div (id="container")
                 ├── h1
                 │    └── "タイトル"（テキストノード）
                 └── p
                      └── "こんにちは"（テキストノード）

JavaScriptからDOMを操作する代表的な例:

// 要素の取得
const container = document.getElementById('container')
const heading = document.querySelector('h1')

// 新しい要素の作成と追加
const newParagraph = document.createElement('p')
newParagraph.textContent = '新しい段落です'
container.appendChild(newParagraph)

// 要素の内容を変更
heading.textContent = '新しいタイトル'

// イベントリスナーの追加
heading.addEventListener('click', () => {
	alert('クリックされました！')
})

DOMの主な特徴と利点:

ページの動的な更新が可能
ユーザーの操作に応じてコンテンツを変更できる
JavaScriptからHTMLの要素やスタイルを操作できる
イベント処理（クリック、キー入力など）が可能

DOMを理解することは、モダンなWeb開発において非常に重要です。何か具体的な操作について知りたい部分はありますか？

そう、APIなんです。

「DOMの再読み込み」という表現の問題

なのに「DOMの再読み込み」なんて書いてあると「APIの再読み込み？？？」となります。意味不明です。混乱します。頭痛が痛いです。高熱で意識がもうろうとするなか、妻に解熱剤を渇望するがごとく、私はAIに救いを求めます。

DOMはインターフェースですよね？なのに「DOMの再読み込み」とか表現されるので、？？？となります…

なるほど、とても良い質問ですね！

確かにDOMは「インターフェース（仕様・取り決め）」なのですが、実際の開発の文脈では「DOMツリー」（実際のメモリ上に構築された要素の木構造）のことを指して「DOM」と呼ぶことが多いんです。

例えば：

「DOMの再読み込み」と言うとき：

// 実際には「DOMツリーの再構築」を意味します
location.reload() // ページを再読み込み

「DOMの更新」と言うとき：

// 実際には「DOMツリーの構造やコンテンツの変更」を意味します
element.innerHTML = '新しい内容'

つまり：

DOM（仕様としての）：W3Cが定めた、文書にアクセスするための標準的なインターフェース定義
DOM（実装としての）：ブラウザのメモリ上に構築された、実際の要素のツリー構造

「DOMの再読み込み」という表現は、厳密には「DOMツリーの再構築」や「DOMの状態の更新」という意味で使われています。少し技術的な厳密さを犠牲にして、開発者間での分かりやすさを重視した言い方になっているんですね。

これは技術用語がよく経る変化で、正式な定義と実務での使われ方が少しずつ変化していく例の一つと言えます。

この回答に私は安堵しました。

技術用語の使い分けについて

よくわかりました。私自身はDOMという単語を使わずに「ページの再読み込み」と表現するので、混乱していたのですね…

AIの解説は続く。

はい、その通りです！

「ページの再読み込み」という表現の方が実際にユーザーから見て何が起こるのかが分かりやすいですね。一方で「DOMの再読み込み」という表現は、より技術的な文脈で、特にJavaScriptのフレームワークやライブラリの文脈でよく使われます。

例えば：

ユーザー向けの表現：「ページを再読み込みする」
開発者向けの表現：「DOMを再構築する」「DOMを更新する」

同じ動作を指していても、誰に対して説明するかによって適切な表現が変わってくるというわけですね。あなたの「ページの再読み込み」という表現の方が、一般的なコミュニケーションではより明確で分かりやすいと思います！

技術用語は時として、その正式な定義と実務での使われ方に違いが生まれることがあります。DOMもその一例で、文脈や対象者によって適切な表現を使い分けることが重要です。

「ページの再読み込み」のような明確で分かりやすい表現を使うことで、技術者以外とのコミュニケーションがよりスムーズになることもあります。一方で、技術的な文脈では「DOMの更新」という表現が一般的に使われており、どちらも正しい表現として状況に応じて使い分けることが推奨されます。

技術的な表現	ユーザーフレンドリーな表現
DOMの再構築	ページの再読み込み
DOM要素の追加	新しい項目の追加
DOMツリーの更新	画面の更新

このように、対象者や状況に応じて適切な表現を選択することで、より効果的なコミュニケーションが可能になります。

再び新たな疑念と不安が渦巻き始めた。なぜ再構築はページで、更新は画面なのだ？画面ってなんだ？それは食べ物か？うまいのか？ああ、訳が分からない。カオスだ。

まだまだ苦難は続くのであった。

まとめ

DOMは仕様と実装の2つの意味で使われる
文脈や対象者によって適切な表現は変わる
チーム内での共通認識が重要

次回予告：「ページ」と「画面」の違いについて

最後に出てきた新たな疑問。この混乱を解きほぐすため、次回は「ページ」と「画面」という言葉の使い分けについて考えていきます。