HTMLとDOM

Reactのドキュメントが、読み進め方によってはすごく初歩的なところから学習できるようになっています。 その１つがHTMLとDOMです。

「わかるようでわかっていない。私は雰囲気でやっている」と思ったので、自分なりの言語化を試みてみます。

HTMLとは

Hyper Text Markup Language。 「言語」です。 WEBページを構造的に作るためのもの。

主な参照元：HTML: HyperText Markup Language | MDN

DOMとは

Document Object Model。

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の違いがよくわかりません」とか言ってる場合じゃない気もしますが、わからないなと思ったら今後も素直に立ち止まって調べてみようと思います。

ギターハンガーを買いました

私は1本だけ自分のアコギを持ってます。Art&Lutherierというカナダのメーカーのamiという製品です。 amiはもう製造終了してるみたいなんですが、アコギの中では小型のギターで、数種類のカナダ産木材で製造されていて、ウッドチェリーな色とカントリーな装飾がマジで可愛いです。1本目は絶対「これ好き！」って直感で思ったギターを買おうって決めていて彷徨っていた中出会った1本で、いまだに愛してます。ちなみに名前は「Anne」です。「赤毛のアン」のアンと同じAnneだよ。物語がわかる人には由来がわかるのでは。 私は音楽の中でも洋物のガールズカントリーな曲がめちゃくちゃ好きなので、このギターの音色はドストライクです。

ということでこのAnne用にフックを買いました。スタンドはAnneには味気ないので似合うアイテムを使いたかったのと、せっかくの自室なのでインテリアとしても充実させたいという思いからの購入です。 買ったのはこちら。 www.amazon.co.jp

ギターハンガーの様子

隣にラックが写っていますが、申し訳程度にアルゴリズム本がある以外将棋や小説なのがいいですね。（別室に巨大本棚があるので技術書含め本自体はもっといっぱいあるよ。という言い訳） 二段下にギター入門の緑の本がありますが、これは自分が 「ながら」を許容して毎日継続する - ねこものがたり でちょっと触れたように、数年ぶりにギターに再入門したのですが、せっかくなのでほんとの初歩の初歩からやり直してます。意外と覚えてるなーって感じだけど、ギター使わずリズム練習もやるようになってて本格的なので感性が研ぎ澄まされる感じがします。これからギター始めたい人がいたらおすすめの1冊です。