Vue.jsには仮想DOMという概念があります。

DOMとは、画面を表示するまでに解釈したHTML/CSS/JavaScriptによって構築されたツリーを指します。

DOMは、ChromeやSafariなどのブラウザ上で、Webページを描画するために構築されます。

JavaScriptオブジェクトを使って差分のみをDOMに反映する処理を行います。


仮想DOMは、情報を受け取ってもすぐにはブラウザの描画を行わず、まずはバーチャルなDOM（プログラム的に作成された仮のDOM）を構築することを指します。

そして、構築された仮想DOMの内容をもとにHTMLを作成し、実際のDOMに同期させます。

このプロセスは「差分検出処理」とよばれます。


仮想DOMを利用することで、ページ変更前と変更後の仮想DOMを比較、情報が変化した部分だけを素早く見つけ出し、変更差分だけDOMに反映するため、変更が最小限に抑えられるという仕組みです。

アプリケーションの構造には「Model」「View」「Controller」の3つの機能で分割されたMVCモデルがあります。

Vue.jsは、その中のひとつ「View」つまり見た目を扱うのが得意なフレームワークです。

Vue.jsは、MVCモデルから派生したMVVMモデルを採用したフレームワークで「Model」「View」「ViewModel」の3つの機能で設計されています。


Modelはデータの管理や保存、外部との入出力や内部的な操作などのロジックに関わる処理を担い、Viewはユーザーの入力や操作を受け付けて、画面表示などに関わる処理を担うものです。

そして、ViewModelはModelとViewの状態を監視しています。

このようなロジックとユーザーインターフェースを分離して状態を監視しながら処理が行えるのは仮想DOMによるものです。

Vue.jsは、ひとつのファイルにHTML、CSS、JavaScriptを記述できるvueファイルを扱うことが可能です。

ブラウザはvueファイルをそのままでは扱うことはできないので、コンパイラを通してHTMLファイルやCSSファイル、JavaScriptファイルなどに変換させます。

この仕組みのことを「単一ファイルコンポーネント」といいます。


単一ファイルコンポーネントをブラウザ上で簡単に試すことができるサービス「オンラインプレイグラウンド」があるので、体験してみるといいかもしれません。

Vue SFC Playground

Vue.jsはシングルページアプリケーションの開発に向いています。

シングルページアプリケーションとは、初回の表示でWebサーバから情報を読み込んでJavaScriptで表示した後、ページ遷移を行わずに更新が必要な部分だけを再描画する仕組みを持ったアプリケーションのことです。

つまり、Webサーバの通信コストを抑えて高速に画面を切り替えることができます。

Vue.jsはHTMLに近い記述ができることから、比較的理解しやすいと感じる方も多いでしょう。

また、日本語で書かれたドキュメントから動画コンテンツなどの、学習を支援する教材が豊富です。


さらに、Vue.jsの公式サイトに記載されているCDN（コンテンツ・デリバリー・ネットワーク）を利用すれば、すぐにVue.jsを始められます。

Vue.jsは習得しやすいといわれるように、初めてでも学びやすいフレームワークといえると思います。