JavaScriptを理解するまでのプロセス
前書き
昨年ぐらいからようやくまともにJavaScript（以下、JS）を触るようになってきてそこで学んできたこと、どのように理解を進めてきたのかという点を中心にまとめようと思います。
というのも自分自身HTMLでclassをつけてそのクラスに対してスタイルを構築していくという、HTMLやCSSを書いていくところまでは直感的に理解できたのですがJSを学び始めるとき
Element.innerText = "Hoge"のようにJSを記述していくことでなぜHTMLの状態（≒ブラウザ上での表示）が変化するのかという部分が分かるまでに時間がかかってしましました。
その後Typescriptを使ってみたり、JSでClassなどを使ってみたりしてようやくDOMというものが何なのか、自分が今まで書いてきたコードにどういった意味があるのかという部分が分かるようになってきました。
気付いたときには非常にすんなりと理解できたのですが、JSを勉強するもっと早い段階でDOMとは何なのかなどを理解できていればもっとスムーズに勉強できたのになぁという思いがありこの記事を書くことにしました。
対象読者
- コピペコードなら何となくJSを動かせる
- JSの基本操作は何となく分かるがどのようにコードを組み立てていくのか分かっていない人
- HTMLやCSSの勉強ができてこれからJSを触り始めたい人
HTMLとDOM
まずはじめにJSから操作を行う場合ではマークアップに対しての捉え方を変える必要があります。
というのもJSで操作するのは「HTMLではなくDOMである」という点が異なります。
なぜ上記のような説明したかというと、下記のようなコードで取得した要素の中のテキストを変更する場合を例に解説をしていきます。
<div id="app">ここの文章を変更</div>
// getElementByIdで要素（DOM）を取得
const element = document.getElementById("app");
// innerTextを変更して表示されている文を変更する
element.innerText = "Hoge";
このようなコードを書くことで内部の文字を変更できます。
elementの部分は変更したい要素を取得してきていることが1行目のコードから分かりますが、なぜelement.innerText = "Hoge";という記述のinnerTextにHogeという文字列を代入することで文字が変わるのでしょうか。
HTMLではなくDOMとしてマークアップを理解する
DOMとは何か
HTMLはブラウザに解釈される段階でDOMに変換される
DOM = Document Object Model
とはよく書かれていますが、ブラウザはHTMLを読み込んだ際に文字列としてのHTMLではなく、HTMLを解釈してからDOMに変換を行います。
その名の通りDOMはドキュメント（HTML）をオブジェクトとして扱いますのでJSのオブジェクトのように下記のような構造を持ちます。
{
hoge: "piyo",
// 入れ子になったりもする
object: {
key1: "aaa",
key2: 0
},
array: [1, 2, 3]
}
このDOMというオブジェクトは前述したHTMLの記述を元に作成されています。
HTMLでは属性値としてclassやidなどを定義できますがそれらの情報は変換される過程でDOMに反映されています。
開発者ツールなどで一度もDOMの情報を見たことがない人は下記の手順で実際にDOMを確認してみると理解が進むと思います。
開発者ツールで手軽にDOMの状態を確認する方法
- 開発者ツールを開く
- Elementsタブから確認したい要素を選択状態にする
- consoleタブを開く
-
{$0}もしくは[$0]を入力して選択中の要素をオブジェクトとして展開[1]
上記の手順で開発者ツールで任意の要素がどのようなDOMとして解釈されているかが確認できる。
実際には画面に収まらないほど多くのプロパティが存在している
JavascriptでDOMを操作する
ではここで冒頭で書いていた
JSで操作するのは「HTMLではなくDOMである」
という一節を振り返ってみましょう。
そうすると、最初に書いたコードはどのような操作を行っているといえるのでしょうか。
<div id="app">ここの文章を変更</div>
// getElementByIdで要素（DOM）を取得
const element = document.getElementById("app");
// innerTextを変更して表示されている文を変更する
element.innerText = "Hoge";
elementはDOMを取得していると記載されています。
そのためinnerTextと続いている部分はDOMのプロパティ（オブジェクトでいうKey）を取得している状態です。
そこへ文字列を代入することによりappというidを持つ要素が本来持っていたここの文章を変更という文字列はHogeという文字列に置き換えられます。
そのためブラウザ上での表示もここの文章を変更からHogeに変更されます。
このようにブラウザが解釈しているオブジェクト自体を変更することでDOM操作を行うことができ、エンジニアはこのような処理を行うことを「DOM操作を行っている（行う）」と言っています。
もちろんDOMはinnerText以外にも様々なプロパティを持っているため（スタイルの定義や子要素の情報など）それらの情報を操作することで動的な処理を行っていくことが可能になります。
あとがき
JSでは主に今回紹介したDOMの操作と合わせて各種条件分岐やEventなどを駆使して動的なページを作成していきます。
Eventについては重要な要素ですのでまた改めて解説を出したいと思いますが
ひとまず「DOMとは何か」が分かるとJSで何を行っているのかわかりやすくなります。
自分自身もJSにおいてオブジェクトを基準にして様々なものを捉えるという考え方ができるようになってきて、一気に理解が進んだので過去の自分に教えるような気持ちでこの記事を書いてみました。
記事について間違っている点やよりよい表現などの提案などありましたらコメントにてご指摘いただけると幸いです！
Discussion