Vue.jsとは何か?その特徴と導入するメリットを解説

2021年7月12日

Vue.jsの概要

Vue.jsは、見た目に特化したオープンソースのフレームワークで、MVVMアーキテクチャを採用しています。MVVMとは、Model-View-ViewModelの略です。Modelはビジネスロジックやデータの取得を担当します。Viewは見た目、レイアウトです。ViewModelはModelの呼び出しやViewに表示するデータの管理を行います。

Webアプリケーションのフロントエンド開発にはJavaScriptは欠かせません。中でもjQueryは長い間JavaScriptのライブラリとして多大な人気を誇っていました。しかし、近年主流となってきたSPA(Single Page Application)での開発において、jQueryはその存在感を発揮できずにいます。

SPAの登場に伴い主流となってきたのが、Vue.jsをはじめとするJavaScriptフレームワークです。Vue.js以外のフレームワークといえば、Facebookの開発したReact、Googleを中心として開発されたAngularが有名です。

SPA(Single Page Application)

従来のWebアプリケーションは一回の操作ごとにリクエストとレスポンスが発生していました。画面遷移のたびにページ読み込みが発生するため、ユーザーには若干の待ち時間が生じます。SPAでは、初回ロード時にJavaScriptやCSSを含む必要な情報をすべて読み込みます。そうすることによって、画面遷移などの動的な処理を単一のページで実現します。

SPAについては、下記の記事もご参照ください。

Vue.jsのメリット

情報が豊富

公式ドキュメントも日本語で記述されているのはもちろんですが、技術ブログなどの日本語の情報も充実しています。Vue.jsは非常に人気のあるフレームワークだからです。困ったことがあっても情報には困らないでしょう。

学習コストが低い

ReactやAngularに比べて学習コストが低いと言われています。HTMLの記法に似ていることもあり、JavaScriptやjQueryの基礎知識さえあれば比較的容易に習得することができるでしょう。使用するにもCDNでスクリプトを読み込むだけです。

再利用性が高い

コンポーネント(UI:ユーザーインターフェース)を作成すれば、他の箇所からでも呼び出し可能です。コンポーネントの再利用を行うことで、開発の効率向上につながったり、保守性を高めたりすることができるでしょう。

既存のプロジェクトにも適用しやすい

Vue.jsは小規模なプロジェクト向けです。そのため、既存のプロジェクトに対して小さく適用していくことができます。逆に大規模なプロジェクトを一から始めるとなった場合は、Angularなどのフレームワークの方が向いています。

参考