できるだけシンプルに始めるVue.js - babel/webpackを使わずにVue.jsを導入する

# はじめに
Vue.jsは、jsフレームワークの中では学習コストが低いフレームワークですが、
一般的なチュートリアルでは、

- webpack/babelの使用が前提になっている
- ES2015以降の新しい文法を使用している

など、前提となっている知識が多く、
初学者、特にjQueryをメインで使用していたHTMLコーダーには敷居が高い部分があります。

複雑なUIに対して、部分的な導入をするだけでも、Vue.jsのメリットは大きいため、
既存のwebページの一部だけで、Vue.jsを使ったパーツを実装するための手順をまとめました。

## 注意点
本チュートリアルは、初学者のVue.js導入の敷居をできるだけ下げること目的としています。
導入する規模が大きくなると、メンテナンスがしづらくなりますので、実際の案件では、導入のメリットと、メンテナンスのしやすさを検討したうえでご使用ください。

# 前提条件
- webpack/babelを使用しない
- サポートブラウザは、IE11、Chrome最新、Firefox最新
- Vue.js : v2.5.16
- Bulma v0.7.1

# 目次
- 事前準備
- Vue.jsの読み込み
- Vueインスタンスの作成
- templateの追加
- コンポーネントの作成
- コンポーネントの分割

# 事前準備
[こちら](https://github.com/shibe23/training-vue-es5)からリポジトリをclone、またはzipでダウンロードしてください。

Vue.jsをローカルで起動するには、ローカルサーバが必要となります。
今回は[こちら](https://blogs.msdn.microsoft.com/osamum/2015/05/29/web-node-js-web/)の記事で紹介されている簡易サーバを使用させて頂きました。

コマンドプロンプトまたはターミナルを開き、

```
cd [設置したディレクトリのpath]
node web
```
でサーバが起動します。表示されたURLにアクセスしてください。
`index.html`の中味が表示されていればOKです。

## Vue.jsの読み込み
https://jp.vuejs.org/v2/guide/installation.html
こちらの「`<script>` 直接組み込み」からファイルを取得してください。

| version  | 特徴   | size| 
|:--|:--|:--|
| 開発ver  | dev toolが有効 / 警告表示あり / ファイルサイズ大 | 283KB |
| 本番ver  | dev tool無効 / 警告表示なし / ファイルサイズ小 | 85KB |
開発中は、[Vue.js devtools](https://chrome.google.com/webstore/detail/vuejs-devtools/nhdogjmejiglipccpnnnanhbledajbpd?hl=es) を使用することができるため、開発verの使用をお勧めします。
ただし、ファイルサイズが3倍以上変わるため、**本番環境では、必ず本番verを使用してください**

任意のディレクトリにファイルを設置し、
`</body>`タグの前に、下記のコードを追加します。

```html
<script src="./js/vue.dev.js"></script>
```

## Vueインスタンスの作成
Vue.jsを始めるには、まずVueインスタンスを作成する必要があります。
今回は`#app`をVue.jsの管理下に置きます。

```html:index.html
<div id="app"></div>
````
```js:index.html
<script>
    // vueインスタンスを作成
    var vm = new Vue({
      el: "#app"
    });
</script>
```
## templateの追加
`#app`内のHTMLをtemplateに記述することができます。
VueでHTMLを取り扱う方法にはいくつかありますが、

- 非フロントエンドエンジニアでも読みやすい
- IE11ではES2015のテンプレートリテラルが使用できない

という理由から、今回は`x-template`形式を使用します。

```html
<script type="text/x-template" id="テンプレート名"></script>
```
上記タグで囲めば、その中で、v-forなどのVue.jsの記述を使用することができます。
注意点として、templateは、**Vueインスタンスより前**に記述する必要があります。

下記のコードを、`<script src="./js/vue.dev.js"></script>`の直後に入れます

```html:index.html
<script type="text/x-template" id="sample-template">
  <div>
    <div class="content">
      <a class="button is-primary">Click!</a>
    </div>
    <div class="box">
    	<div class="field">
    	  <label class="label">Message</label>
    	  <div class="control">
    	    <input class="input" type="text" placeholder="Please Enter Message">
    	  </div>
    	</div>
    	<div class="content">message</div>
    </div>
  </div>
</script>

<script>
  // vueインスタンスを作成
  var vm = new Vue({
    el: "#app", // カンマも忘れずに追加
    template:'#sample-template', // テンプレートのIDを追加
  });
</script>
```

## コンポーネントの作成

このままでは、Vueインスタンスの中にすべてのHTMLが書かれた状態となります。
パーツが複数ある場合、適切な単位でコンポーネントとして区切ると、見通しが良くなります。

今回は、作成したtemplateの一部を、VueSampleというComponentに切り出します。

VueSampleという変数を定義し、'template:'の中に、Vueインスタンスで指定していたIDを追加します。
Componentの定義も、テンプレートと同様、**Vueインスタンスより前**に記述する必要があります。

Vueインスタンスの`components:`内にも、先ほど定義したComponentの変数を追加しておきます。

```js:index.html
// Component
var VueSample = {
  template: '#sample-template'
}

var vm = new Vue({
  el: "#app",
  components: {
    'vue-sample': VueSample
  }
});
```

定義したコンポーネントを、`#app`の中に追加します。

```html
<div id="app">
  <vue-sample></vue-sample>
</div>
```

ブラウザで確認し、先ほどと同じように、templateの内容が表示できていればOKです。

## コンポーネントの分割

分割する準備ができたので、分割したい単位でtemplateの中にHTMLを記述します。
最初に記述していたHTMLは、全体をclass名のないdivで囲んでいましたが、
これは、Vue.jsのルールで、「コンポーネントの大元(root)は、1つのタグで囲まれていなくてはならない」ためです。

コンポーネントを分割する場合は、分割したコンポーネントごとにそのルールが守られていればOKです。
下記のコードでは、全体を囲っていた`<div>`を削除したうえで、コンポーネントを分割しています。

```html:index.html
<​script type="text/x-template" id="sample-template">
  <div class="box">
  	<div class="field">
  	  <label class="label">Message</label>
  	  <div class="control">
  	    <input class="input" type="text" placeholder="Please Enter Message">
  	  </div>
  	</div>
  	<div class="content">message</div>
  </div>
</script>
```

```html:index.html
<div id="app">
  <div class="content">
    <a class="button is-primary">Click!</a>
  </div>
  <vue-sample v-show="isBoxShow"></vue-sample>
</div>
```
以上で、コンポーネントの分割は完了です。
Componentを増やしたい場合は、

- テンプレートを作成
- Componentを定義し、使用するテンプレートのIDを指定
- Vueインスタンスの`components`に作成したComponentを追加

という手順で増やしていけばOKです。

あとは、他のネット上にあるチュートリアルと同様、v-modelやv-onなどを利用して、
画面を作りこむことができます。

`sample.html`に、画面の表示制御など、簡単なサンプルを載せていますので、
こちらも参考にしてみてください。

## おわりに
Vue.jsを使うことで、これまでjQueryで処理していた部分も楽に実装できるようになるので、
積極的に活用して、Vueに慣れ親しんでください！