SPA開発の定番！Vue.jsの特徴やメリットまとめ

Vue.jsとは？

Vue.jsは、UI（ユーザーインターフェース）を構築するためのJavaScriptフレームワークです。

Webアプリケーション構築のためのフルスタックフレームワークであるAngularと比較すると、view層のみに焦点を当てたシンプルなフレームワークのため、他のライブラリと組み合わせて使ったり、既存のプロジェクトと統合したりと自由度が高い点が特徴です。

自由度が高いので、まずはVue.jsを使ってみて、開発の状況に合わせてその後他のフレームワークに切り替えるということも比較的簡単にできるので、迷ったらまずはVue.jsという選択もアリです。

本格的なWebアプリケーションの構築から、簡単な一部の機能実装まで幅広く適用可能なフレームワークと言えます。

シンプルな設計に加えて、Vue.js独自の規格やルールも少ないため、導入時の学習コストも比較的少なくて済みます。
また、人気が高いフレームワークなので日本語のブログや記事が充実している点もおすすめポイントの一つです。

Vue.jsの特徴

Vue.jsには以下のような特徴があります。

MVVM
Virtual DOM（仮想DOM）
コンポーネント

1つずつ、詳しく解説していきます。

MVVM

Vue.jsではMVCの派生種である、GUIライブラリに適したMVVM（Model(M)-View(V)-ViewModel(VM)）モデルを採用し、構築されています。

「Model（データ）」「View（画面）」「ViewModel（メイン処理）」に分けて開発を行います。
MVVMモデルでは、View(画面)と表示するデータおよびデータを操作するView Model間でデータ連携を行います。

HTMLの要素にディレクティブ(Directive)と呼ばれるVie.jsの独自属性を付与し、ディレクティブを通じてView Modelと連携させることで、View ModelのデータをViewに反映させます。

Virtual DOM（仮想DOM）

Vue.jsでは、Reactでも導入されている、「仮想DOM」という考え方を導入しています。

仮想DOMは更新が必要な箇所を自動的に計算して実際のDOMを更新する役割を果たします。
差分だけを更新するので、全更新と比較して、無駄な再描画をしなくていい分高速に実行可能です。
エンジニアは常に仮想DOMに対して全更新をかけるだけでいいので簡単でミスが少なくなります。
あとは仮想DOMが自動で差分計算、DOMに差分を適用します。

Vue.jsでは、Directive(ディレクティブ)という、Viewの要素に付加できる独自属性を利用することで、DOMの操作をします。