Reactのドキュメントが、読み進め方によってはすごく初歩的なところから学習できるようになっています。 その１つがHTMLとDOMです。
「わかるようでわかっていない。私は雰囲気でやっている」と思ったので、自分なりの言語化を試みてみます。
HTMLとは
Hyper Text Markup Language。 「言語」です。 WEBページを構造的に作るためのもの。
主な参照元：HTML: HyperText Markup Language | MDN
DOMとは
DOMはJSをはじめとしたプログラミング言語とWEBページをつなぐAPIであり、どの言語からでもDOMを操作可能なように作られています。 ノードとオブジェクトでドキュメントを構成します（木構造というやつ）。 DOM自体はドキュメントをオブジェクト指向で表現したもので、オブジェクトでありプログラミング言語ではありません。
主な参照元：Introduction to the DOM - Web APIs | MDN
HTMLとDOM
HTMLは”元々の”WEBページの情報を持っています。 ここからDOMが何も変更なければHTMLとDOMは一致します。 けれどJSなどによって何かしら変更を加えられるとDOMが更新（削除含む）されるので、差異が発生します。 この時点ではHTMLは元々のままだけれどDOM”最新の”WEBページの情報を持っていることになります。
主な参照元: Get started with viewing and changing the DOM - Chrome Developers
最後に
ご覧の通りすごくざっくりとした言語化で、あんまり細かく追求していないけれど、「DOMはインターフェースなのだ」という理解が欠損していたことが今回調べていてわかりました。 フロントエンドと言えばJSと思っていたけど、どの言語でも操作可能なように設計されているというのが面白いなと思って、それでもJSが主流な現状の背景や経緯が気になりました。複雑でインタラクティブなモダンUIのためにはJSが一番勝手が良いのでしょうか... 少しスコープの広い話をすると、wasmを活用するともっと早い処理や複雑な処理が可能になるというし、WEBページをどのように捉えどんな言語でどういうことをするのかという選択肢は今度もっと広がる一方なのかも知れません。 そう考えると「HTMLとDOMの違いがよくわかりません」とか言ってる場合じゃない気もしますが、わからないなと思ったら今後も素直に立ち止まって調べてみようと思います。
