【フロントエンド】Vue.jsの特徴について解説
Vue.jsとは、ユーザーインターフェースの構築のためのJavaScriptフレームワークです。
発音は「view」と同様です。
HTML、CSS、JavaScriptを土台とするプログラミングモデルです。
実際に多くの有名なサービスでVue.jsが採用されているため、フロントエンドエンジニアを目指す人は積極的に習得したいスキルといえます。
本記事では、Vue.jsの特徴を解説します。
1. Vue.jsとは
Vue.jsはWebアプリケーションのUI部分などを開発する際に使われる、オープンソースのJavaScriptフレームワークです。
（フレームワークとは、アプリケーション開発の土台となる枠組みのことです。）
JavaScript用のフレームワークは他にも数多くの種類がありますが、Vue.jsはその中でも特に高い採用率を誇ります。
アプリケーションは、リリースされた後も開発が続けられることが一般的です。
段階的な仕様変更や新しい機能の追加が繰り返されると、最初に採用していたフレームワークでは対応が難しくなってくることがあります。
そのようなとき、Vue.jsを採用すれば、既存のアプリケーションへの導入も簡単にでき、要件に合わせた機能を追加でき、アプリケーションを拡張できます。
2. Vue.jsの特徴
2-1. 仮想DOMによる高速化
Vue.jsには仮想DOMという概念があります。
DOMとは、画面を表示するまでに解釈したHTML/CSS/JavaScriptによって構築されたツリーを指します。
DOMは、ChromeやSafariなどのブラウザ上で、Webページを描画するために構築されます。
JavaScriptオブジェクトを使って差分のみをDOMに反映する処理を行います。
仮想DOMは、情報を受け取ってもすぐにはブラウザの描画を行わず、まずはバーチャルなDOM（プログラム的に作成された仮のDOM）を構築することを指します。
そして、構築された仮想DOMの内容をもとにHTMLを作成し、実際のDOMに同期させます。
このプロセスは「差分検出処理」とよばれます。
仮想DOMを利用することで、ページ変更前と変更後の仮想DOMを比較、情報が変化した部分だけを素早く見つけ出し、変更差分だけDOMに反映するため、変更が最小限に抑えられるという仕組みです。
2-2. データの変更を自動で画面に反映する
アプリケーションの構造には「Model」「View」「Controller」の3つの機能で分割されたMVCモデルがあります。
Vue.jsは、その中のひとつ「View」つまり見た目を扱うのが得意なフレームワークです。
Vue.jsは、MVCモデルから派生したMVVMモデルを採用したフレームワークで「Model」「View」「ViewModel」の3つの機能で設計されています。
Modelはデータの管理や保存、外部との入出力や内部的な操作などのロジックに関わる処理を担い、Viewはユーザーの入力や操作を受け付けて、画面表示などに関わる処理を担うものです。
そして、ViewModelはModelとViewの状態を監視しています。
このようなロジックとユーザーインターフェースを分離して状態を監視しながら処理が行えるのは仮想DOMによるものです。
2-3. 機能ごとにファイルを分ける
Vue.jsは、ひとつのファイルにHTML、CSS、JavaScriptを記述できるvueファイルを扱うことが可能です。
ブラウザはvueファイルをそのままでは扱うことはできないので、コンパイラを通してHTMLファイルやCSSファイル、JavaScriptファイルなどに変換させます。
この仕組みのことを「単一ファイルコンポーネント」といいます。
単一ファイルコンポーネントをブラウザ上で簡単に試すことができるサービス「オンラインプレイグラウンド」があるので、体験してみるといいかもしれません。
Vue SFC Playground
2-4. シングルページアプリケーションのの開発に向いている
Vue.jsはシングルページアプリケーションの開発に向いています。
シングルページアプリケーションとは、初回の表示でWebサーバから情報を読み込んでJavaScriptで表示した後、ページ遷移を行わずに更新が必要な部分だけを再描画する仕組みを持ったアプリケーションのことです。
つまり、Webサーバの通信コストを抑えて高速に画面を切り替えることができます。
2-5. 学習コストを抑えて学べる
Vue.jsはHTMLに近い記述ができることから、比較的理解しやすいと感じる方も多いでしょう。
また、日本語で書かれたドキュメントから動画コンテンツなどの、学習を支援する教材が豊富です。
さらに、Vue.jsの公式サイトに記載されているCDN（コンテンツ・デリバリー・ネットワーク）を利用すれば、すぐにVue.jsを始められます。
Vue.jsは習得しやすいといわれるように、初めてでも学びやすいフレームワークといえると思います。
3. Vue.jsを導入している企業・サービスの例
Vue.jsはGoogleやAppleなど、世界の名だたる企業が利用しています。
日本でも、ZOZOやDMM、一休.com、任天堂といった企業・サービスがVue.jsを採用している状況です。
また、東京都の「新型コロナウイルス感染症対策サイト」や「note」でVue.jsが使われています。
これからもVue.jsを採用する企業・サービスは増えると考えられ、最も有力なJavaScriptフレームワークの1つといえるでしょう。
4. まとめ
Vue.jsはWebアプリケーションのユーザーインターフェースに適した、シンプルで使いやすいJavaScriptフレームワークです。
数あるJavaScriptフレームワークの中でも高い採用率を誇り、世界的な企業に利用されています。
他のフレームワークに比べて覚える知識が少なく、学習コストが少なくて済むことや、仮想DOMがある点もメリットです。
興味のある方は、Vue.jsを使ったWebサイトが紹介されている「Vue.js Projects」といった、コンポーネントのソースコードが紹介されているものも見てみるのもいいかもしれません。
https://vuejsprojects.com/