はじめに
こんにちは！
ガク@Necono_Engineerと申します！
プログラミングスクールRUNTEQで現在Ruby on Railsを中心に学んでいます。今回はjavascriptやReactを学ぶ中で出会ったDOMという概念についてまとめてみました！
("ドム"と読みます)
概要
この度、PF作成のためにReactを学び始めたところ仮想DOMという言葉を知りました。
仮想....
というかまず、"DOM"ってなんなんだ？
そんな疑問を解消するためにJavaScript初心者がゼロから少しずつ学んだことを共有していきたいと思います。
プログラミング初学者のため、内容に誤りがある可能性がございます。
もし間違いがあればご指摘いただけると幸いです。
DOMとは?
DOM（ Document Object Model ）はWeb API( Application Programming Interface )の1つです。
API（ Application Programming Interface ）は、Interface(接合部)つまり、ApplicationとProgrammingを繋ぐ橋渡し役のことを言います。
ということは...
DOMも何かと何かを繋いでいるのでしょうか？
そうです！DOMはHTML、XML、CSSなどの「マークアップ言語」を「スクリプト言語」であるJavascriptと繋いでいます!
マークアップ言語
マークアップ言語では文章の意味を「タグ」と呼ばれる要素で記述し、装飾(マークアップ)を行います。(divタグ・pタグなど)
スクリプト言語
アプリケーションソフトウェアを作成するための簡易的なプログラミング言語のことを指します。以下のようなものがスクリプト言語に当たります。
- PHP
- Ruby
- Python
- Java
JavaScript
WebブラウザはDOMで構成されています。
HTMLドキュメントを読み込むと、各構成要素をそれぞれDOM化して画面表示を行います。
以下のHTMLコードを見てください ↓
<!DOCTYPE html>
<html>
<head>
<title>My document</title>
</head>
<body>
<div>
<h1>Header</h1>
<p>Paragraph</p>
</div>
</body>
</html>
上記HTMLはブラウザでは以下のDOMに変換されます。
DOM( Document Object Model)という名前の通りドキュメントをオブジェクト化したものです。オブジェクトの各要素はノード（節）と呼ばれ、階層的な構造を成します。
DOMの階層構造はツリー(木)に似ているため"DOMツリー"と呼ばれます。
-
<Document>「根本」Webページ全体を表すオブジェクトです。 -
<html>タグ「幹」🌲: この木の「幹」は、<html>タグです。全てのHTMLページにはタグが存在しています。ここがルートになり、他の要素が展開されます。 -
<head>・<body>タグ🪵: HTMLの重要な部分、例えば<head>や<body>タグは大きな「枝」として考えられます。これらは<html>タグに直接つながり、🍃であるp,aタグの出発点になります。🪵 -
**
<h1>・<p>タグ**🍃: HTMLの細かな要素、例えば<p>（段落）、<a>（リンク）、など、ユーザーの目に触れる部分を形作ります。🍃
オブジェクト化することで本来は操作できないはずのマークアップ言語をプログラミング言語(Javascript)で操作することが可能になります。
具体的なコード( getElementById )について
Javascriptでよく見る → getElementByIdという書き方。
Get Element By Id
日本語に直すとidの要素を取得という意味になります。
例えば、Javascriptのコードで以下のようなものがあります。
const button = document.getElementById('the-button');
このdocumentとは
DOMにおいて全体の根本であるDocumentにあたります
つまり、全体の始まりであるdocumentから派生した要素の中でidがthe-buttonの値のものを取得するという意味のコードになります。
<!DOCTYPE html>
<html>
<head>
<title>Button Example</title>
</head>
<body>
<button id="the-button">Click Me</button>
<script>
const button = document.getElementById('the-button');
// ここで button に対する操作を追加できます
</script>
</body>
</html>
上記HTMLは以下のDOMを構築します。
Document
│
├─ Head
│ └─ Title: "Button Example"
│
└─ Body
│
├─ Button: id="the-button"
│
└─ Script
└─ JavaScriptコード
const button = document.getElementById('the-button');
// ボタンがクリックされたときに実行される関数
button.addEventListener('click', function() {
alert('クリック!クリック！');
});
そして、button関数を使用し、イベントリスナー(addEventListener)を追加することで指定した要素(今回はid="the-button")に動的な機能を実装することができるようになります！
このようにDOMを理解することでJavascriptのコードが"何を実行しようとしているのか？"、"何を指定しているのか？"がよりわかりやすくなります。
まとめ
DOMの勉強をすることで苦手だったJavascriptへ少しだけ近づけたような気がします。これからも学習を進めJavascriptやWebの基礎知識を深めていこうと思えました。
参考文献