Vue.jsの概要

Vue.jsはJavaScriptのフレームワークの一つです。

JavaScriptは主にフロントエンドアプリケーション開発に利用されるプログラミング言語で、ほぼすべてのブラウザで動作します。そのため多くの開発現場で使用され、多種多様な用途でフレームワークやライブラリが作られてきました。Vue.jsはその中でも、トップクラスに人気のあるフレームワークです。

JavaScriptのライブラリの中でもっとも有名なものはjQueryです。jQueryは導入も簡単なため、多くの人に利用されています。しかし、jQueryはDOM操作の記述を自分で行わなくてはならないという弱みがあります。

DOMとは「Document Object Model」の略で、プログラムからHTMLやXMLを自由に操作するための仕組みです。アプリケーション開発では、規模が大きくなるにつれてDOM操作が複雑になります。

そこで、Vue.jsをはじめとするDOM操作を自動化できるフレームワークが登場しました。jQueryよりも簡潔に分かりやすくコードを書けることや、使える場面が多いことからVue.jsの人気は高まっています。

Vue.jsの特徴

Vue.jsを使用する上で、その特徴をきちんと理解しておくと、有効的に活用できます。ここではVue.jsの特徴について解説します。

Vue.jsの特徴

Vue.jsの特徴や代表的な機能として、以下のようなものがあります。

リアクティブなデータバインディング

Vue.jsではデータが変化すると、変化した内容が即座にDOMに反映されます。この仕組みを「リアクティブシステム」と呼びます。また、データをDOMと結び付けることを「データバインディング」と呼びます。Vue.jsは2つの要素が相互に更新しあう「双方向データバインディング」に対応をしています。

対象となるDOM要素にバインディングを指定することで、Vue.jsがそのデータの変更を検出する度に、自動で表示内容を更新します。これがリアクティブなデータバインディングで、この特徴によりVue.jsを使用することで同期作業が自動化され、開発効率を大きく上げられます。

再利用できるコンポーネント

コンポーネントとは、プログラムの一部を切り取って、その内容を簡単な記述で呼び出せる部品のようなものです。各部品を組み立てておいて必要な時に再利用することができるので、1からプログラムを書くよりも労力や作業時間を削減でき、整合性を保つこともできます。

高速なレンダリング

高速なレンダリング (表示処理）も特徴です。Vue.jsでは実際のDOMと同じ構造の仮想DOMを用意し、仮想DOMに対して処理を行います。その結果生まれた差分のみを実際のDOMに反映することで、高速なレンダリングを可能にしています。

拡張性が高い

Vue.jsでは必要に応じてプラグインを利用し、機能を拡張できます。多くのプラグインが用意されており、目的に合わせて追加できます。また、他のフレームワークの処理を入れ込んだり、画面の一部だけをVue.jsで記述したりなど、非常に柔軟に使うことができます。

軽量でシンプルな構成

Vue.jsは容量が非常に小さいため、外部のサーバーから読み込む形でも十分に機能し、動作も高速です。ムダな機能がないため、シンプルな構成で開発ができます。ページの表示速度が速いことは、SEOの観点からも有利となります。

Vue.jsの使い方

では、実際にVue.jsを使ってみましょう。ここでは、WindowsにVue.jsの環境を構築する方法と、Vue.jsの基本的な使い方について解説します。

Vue.jsの環境構築

1. Node.jsをインストール

Vue.jsをインストールするには、npmというパッケージ管理システムが必要です。
Windowsの場合、Node.jsをインストールすることでnpmもインストールされるため、まずはNode.jsをインストールしましょう。

Node.js公式サイトのダウンロードページからWindowsのLTS（推奨版）をダウンロードします。ダウンロードしたインストーラーを起動し、インストールしましょう。

Macを使用する場合も同様にMacOSのLTSを選択しダウンロード、インストールします。

2. Vue.jsをインストール

次に、Vue.jsをインストールします。インストール方法には以下の2つがあります。

今回はvue-cliを利用する方法を紹介します。

2-1. コマンドプロンプトを開き、「npm install -g @vue/cli」と入力します。

2-2. インストール完了後、「vue --version」と入力し、インストールを確認します。

2-3. 「@vue/cli ◯.◯.◯（バージョン番号）」と表示されれば、正しくインストールされています。

3. Vue.jsの動作確認

3-1. 『sample』という名前のプロジェクトを作成します。コマンドプロンプトへ「vue create sample」と入力します。

3-2. いくつかの選択肢が表示されますが、デフォルトでかまわないのでEnterを押して進めます。

3-3. 3-1で作成したプロジェクトの配下へ移動します。コマンドプロンプトへ「cd sample」と入力します。

3-4. プロジェクトを起動します。「npm run serve」と入力します。

3-5. 「DONE Compiled successfully」と表示されれば、正常に起動しています。

3-6.ブラウザで「http://localhost:8080/」にアクセスします。以下のページが表示されれば、正常に起動しています。

Vue.jsの基本的な使い方

基本的なvue.jsを使った記載の仕方、オプションについて紹介します。

[HTML]

<div id="app">
  {{ message }}
</div>

[JavaScript]

var app = new Vue（{
  el: '#app',
  data: {
    message: 'Hello World!'
  }
})

ブラウザで確認すると、「Hello World!」と表示されているはずです。
上の例で使用されているVue.jsのオプションについて解説します。オプションはVueインスタンス内で使用する、オブジェクトで定義されたデータやメソッドのことです。コンポーネントオプションとも呼ばれます。

el

elは、どのHTML要素にVueを適用するか指定するオプションです。例では#appを指定しているため、#appとその子要素にVueが適用されます。

data

dataは、インスタンスが持つデータを指定します。例ではmessageというデータが指定されており、画面に表示されています。

まとめ

今回はVue.jsの特徴や使い方について解説しました。Vue.jsはシンプルで自由度が高く、開発効率を上げるための機能が豊富です。

シンプルな分、比較的容易に習得できるというメリットもあります。フロントエンド開発を担当するエンジニアなら、最初の選択肢としてVue.jsの習得を検討してみてはいかがでしょうか。