【Vue.js入門】Vue.jsとは?その特徴やメリットを丁寧に解説します!

今回の記事は、

  • 最近よく聞くけど、Vue.jsってなに?
  • これからVue.jsを始めてみたい
  • Vue.jsの特徴やメリットが知りたい

というお悩みをお持ちの方に向けた記事になっています。

ReactやAngular、そしてVue.jsと、今やJavascriptフレームワークの戦国時代でもありますが、その中でもVue.jsは近年人気が急上昇しており、今後もしばらくこの傾向は続くことが見込まれます。

Javascript初心者の方や、これからVue.jsを始めてみたいという方にぴったりの内容になっていますので、ぜひ最後まで読んでみてくださいね。

この記事の前半では、「Vue.jsの概要や特徴」についてご紹介しつつ、後半では「Vue.jsのメリット」について解説していきます。

それでは参りましょう!

Vue.jsとは?

Vue.jsとは、Evan You氏が中心となって開発が進められているJavascirptフレームワークであり、MVCの派生種である、GUIライブラリに適したMVVMを設計基盤として採用し、構築されています。

MVVMとは?

MVVMとは、「Model」「View Model」「Model」であり、それらを管理するコントローラ(Controller)は存在するものの黒子のような存在でユーザからは隠蔽されているためコードを書く際に意識する必要はありません。

「Model」「View Model」「Model」はそれぞれ以下の通りご認識いただければと思います。

名称説明
ModelModelは古典的なプログラマが担当する範囲を指し、ビジネスロジックやデータが該当します。プログラマが担当する範囲なので、かなり広いです。WEBアプリケーションならプレーンなjsオブジェクトがメインですが、そのオブジェクトを作るために利用するHTTPなどで通信した先も含みます。
View ModelViewModelはModelをViewに変換する役割です。Webアプリケーションだと、プレーンなjsオブジェクトを HTMLやDOMに変換するものです。
ViewViewは直訳すれば「見た目」で単語の通りで、表示するものです。入力フォームも含みます。Webアプリケーションだと、HTMLやブラウザが該当します。

MVVMの特徴としては、ユーザーが入力した情報格納したデータデータバインディングにて自動的に連携/処理していくことが挙げられ、Vue.jsでもこのデータバインディングを活用してアプリ開発を進めていきます。

データバインディングに対応したMVVMはControllerがModelを監視するMVCに比べて、ユーザーが入力したものを素早くデータを書き換えられるというメリットがあります。

データバインディングとは?

ここで出てきた「データバインディング」というのは、ViewとView Modelを結び付ける仕組みのことです。

データの値を結び付けるため「データバインディング」と呼ばれており、その特徴は、ViewとModelどちらかで値が書き変われば、それに伴ってViewとModel両方の値が変更されるという点になります。

それはつまり、ユーザーが画面上で何らかの処理した場合であれ、コンピューター上やサーバ上で何らかの処理があった場合であれ、ViewとModelそれぞれにその変更が反映されるということです。

Vue.jsの特徴

Vue.jsの特徴としては、大きくは以下の3つが挙げられます。

  • 1. 再利用性の高いコンポーネント思考
  • 2. リアクティブなデータバインディング
  • 3. 仮想DOMによる高速なレンダリング

それぞれ順番に解説させて頂きます。

Vue.jsの特徴その1 再利用性の高いコンポーネント思考

まず最初の特徴は、「再利用性の高いコンポーネント思考」です。

Webページは、ヘッダー、サイドバー、ボディ、フッターなど様々な要素で構成されており、Vue.jsではこれら各々の要素をコンポーネント(部品)として考えます。

そして更に細分化していくと、ヘッダーにはロゴ、サイドバーにはナビゲーションというように、それぞれでまた別の要素、つまりコンポーネントを持ちます。

このように要素を可能な限り分割し、コンポーネント化することでWebページを構成していく手法をコンポーネント指向といいます。

Vue.jsでは、基本的にVueファイル(拡張子が.vueとなっているファイル)一つで一つのコンポーネントを構成し、Vueファイルは以下の3編から構成されています。

  • 1. templateタグ:コンポーネントのhtml要素を埋め込む
  • 2. scriptタグ:javascriptを記載する
  • 3. styleタグ:cssを記載する

Vueファイルのイメージ

<template>
  <div class="container">
    <h1 class="title">タイトル</h1>
  </div>
</template>

<script>
export default {
  mixin: ['test']
}
</script>

<style>
.container {
  background-color: gray;
}
</style>

これらを合わせて一つの部品としてコンポーネントを作成し、それらを組み合わせて1つのWebページを作るのがVue.jsの大枠の考え方です。

Vue.jsの特徴その2 リアクティブなデータバインディング

続いての特徴は、「リアクティブなデータバインディング」です。

「データバインディング」については先ほどご紹介したところですが、この「リアクティブ」とは何でしょうか?

「リアクティブ」は英語では「reactive」とされ、直訳としては「反応的な」という意味になります。

さすがにそのままの意味ではあまり意味が分かりませんので、ここでの意味は「何かの変更が一瞬で反映される」という風に認識しておいていただければ問題ありません。

つまり、「リアクティブなデータバインディング」とは、「ViewとModelどちらかで値が書き変われば、即座に両方の値が変更される」ということになります。

先ほどの解説と重複してしまいますが、ユーザーが画面上で何らかの処理した場合であれ、コンピューター上やサーバ上で何らかの処理があった場合であれ、ViewとModelそれぞれにその変更が反映されるということです。

JavascriptやjQueryであれば、イベントを監視して、「イベントが発生すれば〇〇のデータも書き換える」というトリガーをこちら側で設定する必要がありましたが、Vue.jsでは「watcher」というインスタンスがコンポーネントを監視しており、関連しているデータの変更があれば即座にコンポーネントが再描画され、それによってデータ変更が自動的に関連箇所へ派生していってくれるのです。

Vue.jsの特徴その3 仮想DOMによる高速なレンダリング

最後にご紹介する特徴は、「仮想DOMによる高速なレンダリング」です。

仮想DOMについてご紹介する前に、まずはDOMについて少し整理しておきましょう。

DOMというのは「Document Object Model」の略で、簡潔に申し上げると、「HTMLを構築する木構造データ」を指します。

通常、WebブラウザはDOMからHTML構造を解析することでWebページをレンダリングし、素のJavascriptやjQueryによってこのDOMが操作されることとなります。

この操作でHTML構造が変わった場合、DOMは再度更新され、Webブラウザがその変化後のDOMから新たなHTML構造を解析し、ページを再描画します。

DOMを直接操作してしまうと、その度に上記のサイクルが繰り返されるため、ブラウザ側の負担が大きく、再描画にも時間がかかってしまうのです。

これを解決するのが、「仮想DOM」という技術です。

仮想DOMはJavascriptのオブジェクトで、その名の通り、JavascriptのオブジェクトでリアルDOMを仮想的に作った上で、以下のようにDOMを操作します。
(※仮想DOMと比較するために、通常のDOMをリアルDOMと表記します)

  • 1. 仮想DOMを二つ用意
  • 2. 一方の仮想DOMをJavascriptで操作(一般的にリアルDOMを操作するより速い)
  • 3. 変更前後の仮想DOMの差分を比較
  • 4. 差分だけをリアルDOMに反映
  • 5. 反映されたリアルDOMをブラウザがレンダリング

通常、リアルDOMを操作する場合は、リアルDOMが変更されるたびにブラウザがHTMLを解析してレンダリングするのでコストが高いのですが、仮想DOMを使うとレンダリングコストを低くすることができ、その他にも以下のようなメリットが享受できます。

  • 1. UIとロジックを分離できる
  • 2. 状態の管理を簡略化できる
  • 3. UIとロジックを繋ぐ処理が簡単になる

Vue.jsのメリット

さて、続いてはVue.jsを導入することによるメリットを見ていきましょう。

Vue.jsのメリットとしては、以下の4つが考えられます。

  • 1. 気軽に始められる
  • 2. 学習コストが低い(日本語ライブラリが豊富)
  • 3. シンプルかつ自由度の高いフレームワーク

それぞれ順番に解説させて頂きます。

Vue.jsのメリットその1 気軽に始められる

Vue.js はjQueryと同様に、CDNを使ってscriptタグを1行書くだけで使い始めることができます

そのため、まずはこのページだけで使ってみようみたいなスモールスタートも可能です。

その後、使用範囲を徐々に広げていき、徐々に既存のjQueryをVue.jsに置き換えていくということも可能です

さらには、素のJavascriptの書き方に慣れていればすぐにVue.jsを始められるという点も魅力の一つだと思います。

なお、Vue.jsと並列で語られることの多いAngularはTypeScriptという別の言語を学ぶ必要がありますし、ReactはJSXという書き方に慣れる必要があります。

Vue.jsのメリットその2 学習コストが低い(日本語ライブラリが豊富)

JavaScriptには、Vue.jsのほかにもAngularやBackbone.jsなど、多くのフレームワークがあり、開発現場ごとに新しい技術を習得しなければいけないことも珍しくありません。

その中でもVue.jsは格段に学習コストが低く、初心者、経験者問わず、すぐに開発に使用することができるという特徴があり、AngularやReactと比較してもフレームワークの規模が小さく、覚えることも少なくて済みます

また、Vue.js自身の人気上昇に伴い、日本語での技術ブログや記事も充実していますので、不明点があった時も情報が充実しているためすぐに調べることができるというのも魅力の一つです。

Vue.jsのメリットその3 シンプルかつ自由度の高いフレームワーク

Vue.jsはHTMLベースの簡潔なVueテンプレート構文を使用したり、また他のライブラリとも自由に組み合わせを選べるため、シンプルかつ自由度の高いことが大きなメリットの一つです。

また、実際にWEBアプリケーションを開発する際には、HTMLやCSSを中心に実装を進めることもできるため、Javascriptの深い知識が無くとも手軽かつ簡潔にDOMを操作することができます

さらには、一つのVueファイルでそのファイルに必要なHTML/JavaScript/CSSをまとめて記述でき、他のファイルとは完全に区別して管理できるため、複雑な構造のWebアプリケーションであっても開発する側にとってはそれほど負担なくシンプルな開発を進めることができます。

上記の理由によりファイル毎に開発を進めることができるため、開発チームが大きくなってきた場合にも他の開発者との干渉を最小限に抑えることができ、この点は開発者にとっても非常に大きなメリットではないでしょうか?

最後に

さて、ここまでVue.jsの概要や特徴、そしてそのメリットについて解説してきましたがいかがでしたか?

今回ご紹介した通り、他のフレームワークと比べても、Vue.jsはとても簡単に始めることができ、またその学習コストも非常に低くなっています

近年はその人気も不断に上昇しており、今後もその傾向はしばらく続いていくことが見込まれます。

Javascript初心者の方にとってもそれほど難しくない内容になっていますので、ぜひこの機会にVue.jsを始めてみてはいかがでしょうか?

このブログを通じて少しでも「傍(はた)を楽(らく)にする」ことができていれば嬉しく思います。

最後まで読んで頂きありがとうございました。