MVVMとは、アプリケーション開発における設計手法の一つです。

Model,View,ViewModelという３つの要素で構成されており、それぞれに固有の役割があります。

以下に固有の役割についてまとめておきます。

■Model

・ドメイン領域を担っています。

ドメイン領域とは、ビジネスロジックやデータを格納するクラス、DAOなどの処理を担当する部分となります。

■View

・簡単に説明するとレイアウトのことを言います。

UIの外観と構造などを定義して、幾分かのプレゼンテーション・ロジックなども含みます。
　　　

■View Model

・ビューに表示するイベント処理に必要なデータの取得やビジネスロジックの呼び出しやデータ管理などをします。

View Modelはプレゼンテーション・ロジックとステートを含みます。


上記のような特徴があります。

Vue.jsでは、HTMLとJavaScript間で値やイベントなどの紐づけが自動的に行われています。

そのため、DOMの操作するコードの記述量を少なくすることができ可読性も向上するため、メンテナンスがしやすく管理が簡単になります。

上記に関しては、Vue.jsにDOM操作を可能にするディレクティブという機能があるためです。

Vue.jsにはリアクティブという、ユーザーがブラウザで入力した値に対して表示画面を即座に反映する機能があります。

これによりユーザーにとって使用しやすいWebページの開発や、開発者にとっても処理が簡潔で可読性が向上し、メンテナンス等も簡単になります。

また、セレクタを使用しないため階層構造を気にせず使用することができます。

Vue.jsは拡張性が高く、Angular.jsやReactと同じようにSPAでの開発に使用されます。

SPAはページ全てを更新することがなく、単一ページでコンテンツ単位で更新ができるWebアプリのことを言います。


ブラウザの処理をJavaScriptで行うことでサーバーとの通信料を最小限に抑えることができ、ページ遷移の際に差分だけを更新するため、更新速度が高速になりユーザーにストレスフリーなWebページを開発することができます。

SPAはサーバーへの通信料を減らせるので、サーバーの不可も軽減できるというメリットもあります。

仮想DOMを使用していない場合は、直接DOMを書き換えてページ全体を再読み込みを行うので表示に時間がかかってしまいます。

Vue.jsでは仮想DOMを使用しているので更新前と更新後の構造を比較することで、差分のみを反映することができます。

そのため、更新する際の処理速度が速くなり読み込む時間が少なくなります。

Vue.jsはコンポーネント指向のフレームワークであり、Vueインスタンス内でカスタム要素として使用できるため、重複作業などをへ減らすことで開発工数を減らすことができます。

コンポーネントとは、機能を部品ごとに分けることによって、同一の機能が必要な場合に再利用できる仕組みになります。

また、Vue.jsで記述されていない既存のWebサイトの一部分にVue.jsのコンポーネントを組み込むこともできます。

Vue.jsはHTMLと文法が似ており、構造がシンプルで直感的に理解しやすいため、覚えることが少ないので学習コストが少なく済みます。

使用環境の作成でも、CDNでファイルを読み込み、Scriptタグを１行書き込めば追加始められます。


また、日本でも需要と人気が高いので、参考資料が豊富なので学習がしやすいのもメリットになります。

Vue.jsはシンプルに設計されている上に柔軟性が高く、他ライブラリと組み合わせて使用することも可能になります。

他ライブラリを使用して開発中のUIに不足がある場合は、Vue.jsを使用して補うこともできます。


Vue.jsは独自の規約やルールが少ないため比較的自由にアプリ開発をすることが可能となっています。

ですが、独自のルールや規則がなく自由度が高すぎるため、あらかじめルールなどを定めておかなければ中規模以上の開発は厳しくなります。

それでも、Vue.jsを使用するのであればNuxt.jsなどのVue.jsはから拡張したフレームワークをあわせて使用すル必要があります。


その反面に規模が大きくないアプリケーション開発や既存の開発に対して、組み合わせる場合などは相性が良いです。

Vue.jsはシンプルな構造のため、他のライブラリに組み合わせる作業が簡単です。