Vue.jsはDOM操作問題を解消　学習メモ

Vue.jsはJavaScriptのフレームワーク。DOM操作が簡単なことが他のJavaScriptのフレームワークと比較した際の強み。

ブラウザは読み込まれたHTMLをツリー状のデータ構造としてメモリ上に保存する。これをDOM(Document Object Model)と呼び、ツリーの節に相当するHTML要素のことをノードと呼ぶ。

画面描画の変更などをJavaScript上で行うためには、処理をしたいノードに適切にアクセスする必要がある。

生のJavaScriptでは適切なノードにアクセスする為のDOM操作が初心者には難しいため、シンプルな構文でDOM操作やイベント処理などを実装できるjQueryなどのJavaScript フレームワークが広く使われるようになった。

生のJavaScriptと比較しjQueryは構文がシンプルだが、階層構造を持ったノードの集合としてHTMLを捉えることに慣れていない者は、DOM操作のロジックを組み立てることは難しい。

上記の2段階の処理を書かなければならないのは生のJavaScriptもjQueryも同様。

Vue.jsは、DOM操作を行う必要がほとんどないため、ややこしいDOM操作をユーザーは考慮しないで済む。

Vue.jsのアプリケーションでは、ページの描画内容をHTML形式のテンプレートで定義し描画に使うデータをJavaScriptで定義する。

JavaScriptでデータを更新すれば、Vue.jsが自動的にDOMを更新してページの表示が変わるという仕組みになっている。

データ更新をトリガーに表示や動作が変わるアプリケーション設計の考え方を、データ駆動と呼ぶ。

Vue.jsはJavaScriptのデータとDOMが自動的に繋がるため、煩雑なDOM操作から解放される。

学習教材
Vue.jsのツボとコツがゼッタイにわかる本
発行日　2019年 3月28日第1版第1刷
著者　　中田　享
発行所　株式会社　秀和システム