こんにちは、フロントエンド初心者のエンジニアです。
RFCやW3C勧告については、今まで何度か耳にしたことはあったのですが、今回初めて生のW3C勧告に辿り着いて(と言っても日本語翻訳ですが)、テンションが上がったので、その経緯についてまとめてみます。
※ フロントエンド初心者が解釈したものなので、間違い等もたくさんあるかと思います。まさかり怖い。
経緯
- 仕事で初めてちゃんとjQueryを使う必要が出てきた。
- jQueryは、論理的に「あれがそうだから、こう動く」ではなく、「ああしたらこう動く」という暗記ばかりで面白くなかった。
- そのせいか、使い方を全然覚えれなかった。
- 本格的にjQueryを使うからには、「HTMLがなぜJavaScriptで操作できるのか」などの疑問を解消した上で開発したい。
最初の疑問
- ブラウザ上で動くJavaScriptはHTMLドキュメントに対して、なぜgetelementbyidなどの操作が可能なのか？
- そもそもただの文字列であるHTMLをどうして操作することができるのか？
JavaScriptはDOMを操作している？
とりあえず手当たり次第調べてみた。わかったことは下記のような感じ。
- JavaScriptはDOMというものを操作することでHTMLを操作しているらしい。
- DOMって何？？Document Object Model？？DOM API？？？
- DOMはHTMLをツリー構造に整理したもの。HTMLのタグや値はノードと呼ばれているらしい。意味わからん。
ブラウザとDOMはどういう関係？
DOMの詳細に入る前に、HTML・ブラウザ・DOMの関係を整理してみた。
- そもそも、HTMLというただのテキストで書かれたものが、Chromeなどのブラウザで綺麗に表示されるのはなぜ？？どうやってるの？？
HTMLの内容を解析して、ブラウザに描画するものが必要じゃない？
-
調べてみると、その解析・描画機はレンダリングエンジンと言われていて、Chromeなどはそのエンジンを搭載しているらしい。
そもそもブラウザって何だろう？ PCなどからWebページをみるための便利な道具？
ブラウザって、テキストエディタや地図アプリと同じように、単なる「アプリケーション(ソフトウェア)」じゃない？
詳細に言うと、URLを指定してリクエストを投げて、帰ってきたHTMLなどを解析して画面に描画するGUIアプリケーションじゃない？？
DOMの実装
どうやらDOMは、GUIアプリケーションたるブラウザが、HTMLを操作する為に必要な何からしい。DataBaseにおける、SQLみたいな立場なのかな？
- じゃあそのDOMって何で作られているんだろう？？
- 「DOM 実装」でググってみる。
- MDNのDOM紹介ページにこんなことが書かれていた
- 「W3C DOM および WHATWG DOM 標準は、現代のブラウザーのほとんどで実装されています」 DOM の紹介 - DOM | MDN
- 文脈的にDOMは、ブラウザを作る際に必要な一つの仕様のようなもの？？
DOMの仕様
DOMの実装の詳細はわからなかったが、DOMは仕様のようなものであることはわかった。どう言う仕様なのかを調べる。
- 「DOM 仕様」でググってみる
- WikiPediaのページがヒットしたので、中身を見てみる。(というかどうして最初に見なかったんだ...) Document Object Model - Wikipedia
- 「仕様」と言う項目の中に、W3C勧告のリンクがあったので飛んでみる DOM1仕様書
- DOMを実装する際の仕様がいろいろ書かれている。こ、ここ、これだああああ！！！
まとめ
以下の最初の疑問に答えてみる。
- ブラウザ上で動くJavaScriptはHTMLドキュメントに対して、なぜgetelementbyidなどの操作が可能なのか？
- そもそもただの文字列であるHTMLをどうして操作することができるのか？
- Chromeなどのブラウザから送信されたリクエストの結果として、ローカル端末に帰ってきたHTML文書は、再びブラウザに届けれる。
- 送られてきたHTML文書などを元に、ブラウザのレンダリングエンジンはHTML文書の文字列を解析し、画面に描画する。
- ブラウザは、W3C勧告で規程されたDOMの仕様を実装しており、HTMLを操作する仕組みを備えている。
- そのため、JavaScriptのメソッドなどをブラウザで実行することで、HTML文書に対して、要素の取得や変更・削除などの特定の動作の実行が可能になっている。
感想など
- フロントエンドの技術って、丸暗記+絵描きだと思っていたのですごい苦手意識あったけど、ゴリゴリのロジカルな技術の世界のようで少し好きになった。
一応
- 素人の仮説なので間違いが多いと思いますが、間違いが酷かった場合は優しくコメントしてもらえると嬉しいです。