Vue.js概要解説

### 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など先行するフレームワークの方が適しています。

```text:SPAとは
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のファイルをダウンロードする
<table>
  <caption>ファイルをダウンロードしてscriptタグ（要素）で読み込む</caption>
  <thead>
    <tr>
      <th>項目</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td>ダウンロード先</td>
    <td>1、Vue.jsの公式サイト<br>
        2、「3. CDNを利用する」の各サイト
    </td>
  </tr>
  <tr>
    <td>読み込み書き方</td>
    <td>
&lt;html&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="red"><strong>&lt;script src="project/vue/scripts/vue.js"&gt;&lt;/script&gt;</strong></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="app"&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ message }}<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var app = new Vue({<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el: '#app',<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message: 'Hello Vue!'<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;<br>
&lt;/html&gt;
</td>
  </tr>
</table>

---
##### 2\. NPMを利用する
　NPM（Node Package Manager）を使用するにはNode.jsがインストールされている必要があります。

　※Node.jsのインストールについては、以下の記事を参考にしてください。
　[Node.jsのダウンロードとインストール（セットアップ）](https://johobase.com/node-js-install-setup/)
<table>
  <caption>NPMを利用して、VUEをインストールする</caption>
  <thead>
    <tr>
      <th>項目</th> <th>説明</th>
    </tr>
  </thead>
  <tr>
    <td>コマンド</td>
    <td>npm install vue
    </td>
  </tr>
  <tr>
    <td>使い方</td>
    <td>
&lt;html&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;head&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<font color="red"><strong>&lt;script src="./node_modules/vue/dist/vue.js"&gt;&lt;/script&gt;</strong></font><br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/head&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;body&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;div id="app"&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ message }}<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&lt;/div&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/body&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;script&gt;<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;var app = new Vue({<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;el: '#app',<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;data: {<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;message: 'Hello Vue!'<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;}<br>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})<br>
&nbsp;&nbsp;&nbsp;&nbsp;&lt;/script&gt;<br>
&lt;/html&gt;
</td>
  </tr>
</table>

---
##### 3\. CDNを利用する
　CDNを利用することで、簡単にVue.jsをWebアプリケーションに組み込むことができます。
```text:CDNとは
　CDNとは「Content Delivery Network（コンテンツ・デリバリー・ネットワーク）」の略で、<br>
Webコンテンツ（デジタルコンテンツ）をインターネット経由で配信するために最適化された<br>
ネットワークのことです。コンテンツ配信網と呼ばれることもあります。
　CDNでは大容量のコンテンツを大量配信することが可能です。<br>
またスピーディーに配信することが可能です。
　コンテンツ配信用にネットワークを最適化することによって、<br>
アクセスが集中したりコンテンツが大容量化したりしても、
コンテンツの配信に問題が起こらないようになっています。
```

---
　Vue.jsはUNPKGから参照することができます。
```javascript:
<script src="https://unpkg.com/vue@next"></script>
```
　バージョンを指定する場合は、「@next」の部分を「@バージョン番号」にします。
例えばバージョンが「3.0.0」であれば、以下のように指定します。
```javascript:
<script src="https://unpkg.com/vue@3.0.0"></script>
```

---
　Vue.jsには「開発モード」と「本番モード」の2種類のファイルが存在しますので、開発中は開発モードを参照し、本番環境では本番モードのパスを指定することもできます。

---
> 開発モードの参照パス（URL）
```javascript:
// 最新バージョンの場合
<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）
```javascript:
// 最新バージョンの場合
<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参照は可能です。
```javascript:
<script src="https://cdn.jsdelivr.net/npm/vue@3.0.0"></script>
```

---
###### 補足
　scriptタグ（要素）はheadタグ（要素）内など、Vue.jsを利用した処理を行う前に記述してください。
　headタグ（要素）内に記述する場合の例
```javascript:
<head>
  <script src="https://unpkg.com/vue@next"></script>
</head>
```