Vue.jsとは
Vue.jsはWebアプリケーションのUI部分などを開発する際に使われる、オープンソースのJavaScriptフレームワーク※です。JavaScript用のフレームワークは他にも数多くの種類がありますが、Vue.jsはその中でも特に高い採用率を誇ります。
Vue.jsを開発したのは、Googleの元エンジニアであるエヴァン・ヨー氏です。氏はAngularという別のUI用JavaScriptフレームワークを使っていましたが、「より効率的に使えるフレームワークが欲しい」と考えVue.jsを開発しました。
Vue.jsの主な特徴・メリット
Vue.jsはなぜ多くの企業に採用されているのでしょうか。以下、Vue.jsの特徴や主なメリットをみていきましょう。
・手軽に使い始められる
Vue.jsはHTMLに似た文法で覚えやすい上に、他フレームワークと比べシンプルに設計されています。またVue.jsは、scriptタグを1行追加するだけでよいことから、手軽に使い始められる点は大きなメリットです。
・シンプルな設計で拡張性が高い
Vue.jsはシンプルに設計されている上に柔軟性が高く、他ライブラリと組み合わせて使うことも可能です。他のライブラリを使って開発中のUIに足りない部分があるときに、Vue.jsを使って補うこともできます。
・覚えるべき知識が少なく、学習コストをおさえられる
Vue.jsはフレームワークとしては規模が小さく設計がシンプルであることから、新しく覚えなくてはならない知識が少なくてすみます。そのため他のフレームワークより学習に時間がかかりません。
・「DOM操作」を自動化できる
DOM（Document Object Model）とは、HTMLデータをJavaScriptなどから使うための技術です。WebブラウザでJavaScriptを動作させるときは、HTMLデータがDOMというツリー形式のデータに変換（パース）されます。DOM操作とは、文字通りDOMを操作（編集）することです。
たとえばよく使われるJavaScriptライブラリ「jQuery」を採用して開発を行う際は、DOM操作を手動で行わなくてはなりません。一方、Vue.jsはHTMLとJavaScriptのデータ・イベントの関連付けを自動で行います。（DOM操作が自動化される）
その分、開発の負荷が少なくなる上に、jQueryよりコードを分かりやすく記載できるようになるのです。
Vue.jsを使うときの注意点
Vue.jsを使うときは、どのような点に注意すべきでしょうか。以下主な注意点を1つずつ解説します。
・規模の大きな開発には不向き
Vue.jsが得意としているのはSPA※のようなシンプルで小規模な開発です。一方で、大規模な開発向けには適していません。大規模開発向けには、Angularなど先行するフレームワークの方が適しています。
SPAはSingle Page Applicationの略で、単一のページで全ての機能を完結できるタイプのWebアプリケーションのことです。
SPAの代表例としてGoogle MapやFacebookがあげられます。
・ネイティブアプリ開発用としては遅れをとっている
Vue.jsはSPAのようなWebアプリケーションの開発に適したライブラリです。一方、スマートフォンのネイティブアプリ開発用としては、他の人気フレームワークから遅れをとっているのは否めません。今後の進化が期待されるところです。
Vue.jsのインストール方法
Vue.jsをインストールしてWebアプリケーションを開発をする方法としては、大きく分けて以下の3つがあります。
1. Vue.jsのファイルをダウンロードする
2. NPMを利用する
3. CDNを利用する
1. Vue.jsのファイルをダウンロードする
| 項目 | 説明 |
|---|---|
| ダウンロード先 | 1、Vue.jsの公式サイト 2、「3. CDNを利用する」の各サイト |
| 読み込み書き方 |
<html> <head> <script src="project/vue/scripts/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </html> |
2. NPMを利用する
NPM（Node Package Manager）を使用するにはNode.jsがインストールされている必要があります。
※Node.jsのインストールについては、以下の記事を参考にしてください。
Node.jsのダウンロードとインストール（セットアップ）
| 項目 | 説明 |
|---|---|
| コマンド | npm install vue |
| 使い方 |
<html> <head> <script src="./node_modules/vue/dist/vue.js"></script> </head> <body> <div id="app"> {{ message }} </div> </body> <script> var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) </script> </html> |
3. CDNを利用する
CDNを利用することで、簡単にVue.jsをWebアプリケーションに組み込むことができます。
CDNとは「Content Delivery Network（コンテンツ・デリバリー・ネットワーク）」の略で、<br>
Webコンテンツ（デジタルコンテンツ）をインターネット経由で配信するために最適化された<br>
ネットワークのことです。コンテンツ配信網と呼ばれることもあります。
CDNでは大容量のコンテンツを大量配信することが可能です。<br>
またスピーディーに配信することが可能です。
コンテンツ配信用にネットワークを最適化することによって、<br>
アクセスが集中したりコンテンツが大容量化したりしても、
コンテンツの配信に問題が起こらないようになっています。
Vue.jsはUNPKGから参照することができます。
<script src="https://unpkg.com/vue@next"></script>
バージョンを指定する場合は、「@next」の部分を「@バージョン番号」にします。
例えばバージョンが「3.0.0」であれば、以下のように指定します。
<script src="https://unpkg.com/vue@3.0.0"></script>
Vue.jsには「開発モード」と「本番モード」の2種類のファイルが存在しますので、開発中は開発モードを参照し、本番環境では本番モードのパスを指定することもできます。
開発モードの参照パス（URL）
// 最新バージョンの場合
<script src="https://unpkg.com/browse/vue@next/dist/vue.global.js"></script>
// バージョン3.0.0の場合
<script src="https://unpkg.com/browse/vue@3.0.0/dist/vue.global.js"></script>
// バージョン3.0.7の場合
<script src="https://unpkg.com/browse/vue@3.0.7/dist/vue.global.js"></script>
本番モードの参照パス（URL）
// 最新バージョンの場合
<script src="https://unpkg.com/browse/vue@next/dist/vue.global.prod.js"></script>
// バージョン3.0.0の場合
<script src="https://unpkg.com/browse/vue@3.0.0/dist/vue.global.prod.js"></script>
// バージョン3.0.7の場合
<script src="https://unpkg.com/browse/vue@3.0.7/dist/vue.global.prod.js"></script>
Vue.jsの公式ドキュメントに記載されていたCDNのパス（URL）が、バージョンが2.Xの時は、「JSDelivr」になっていましたが、V3.xから「UNPKG」になりました。
「JSDelivr」のパスでもCDN参照は可能です。
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0"></script>
補足
scriptタグ（要素）はheadタグ（要素）内など、Vue.jsを利用した処理を行う前に記述してください。
headタグ（要素）内に記述する場合の例
<head>
<script src="https://unpkg.com/vue@next"></script>
</head>