【Angular】DOMとデータバインディング【気付き】
※下記の内容に不備がありましたら、コメント頂けると幸いです。また、下記の内容をご使用頂ける場合は自己責任でお願いします。
【目次】
背景
以前Reactで個人アプリを作っていた際にDOMについて調べました。
Reactを使う前まではjQueryを使っていたわけですが、ReactでHTMLをそのままいじれる快適さに感動し「仮想DOMのおかげでスムーズに非同期実装できるな〜」なんてことを思っていました。
現在Angularを使っているのですが、「AngularもReactと同じようなものやし仮想DOM使ってるやろ〜」とか考えてたら、それは大きな間違いであることが分かりました。。。
今回はそれを記事にします。
内容
AngularとDOMについて
上記でも書きましたが、Angularでは仮想DOMを使っていません。
直接？DOMを操作しています。
1つのコンポーネントが1つのDOM要素と結びついています。
React vs Angular 2ガチ対決！エキスパートたちによるハイレベル対談 (2 / 2) ー TechFeed Live#2レポート | HTML5Experts.jp
AngularはReactの仮想DOMと同等のものを持っていますか？ - コードログ
ReactとAngular、使うならどっち？ JavaScriptギークが6つの視点で徹底比較 - エンジニアHub｜若手Webエンジニアのキャリアを考える！
コンポーネントでDOMを操作しても、動作速度はあまり変わっていない気がします。
(それほど大きな開発をしたことはありませんが・・・)
javascript - 仮想DOMを使うと早くなる理由がいまいちわかりません - スタック・オーバーフロー
これはブラウザ側のDOMの高速化が進んでいるため、以前よりも仮想DOMと処理速度が変わらなくなったからなんだそうです。
・・・仮想DOMってなんだったんだ？笑
ただ一応これでも仮想DOMの方が若干速いんだそうです。
データファーストの考え方
ものすごい分かりやすい記事があったので、載せておきます。
データファーストなAngularプログラミング - Qiita
Angularではデータバインディングが採用されています。
これは私の見解ですが、ブラウザ側のDOMの高速化が進みDOMをあまり気にしなくてよくなった結果、データ重視の考え方ができるようになったのではないかと思っています。
そして、データバインディングが採用されたことでデータファーストの考え方も重要になってきたようです。
今後に向けて
かなり主観が入った記事になってしまいました。
間違えている可能性大。。。
とりあえず私は今までDOM操作の考え方だったので、データファーストの書き方も早く学んでいきたいと思います。
