前提
| マシーン | ブラウザ | Vue |
|---|---|---|
| macOS Sierra 10.12 | Firefox Quantum | ver. 2.5 |
Documents
Vue.jsの公式マニュアルは完全に日本語化されています 
内容も充実しているので、私は開発時はマニュアルさえあれば大抵困りません。
インストール
今回はCDNにホストされたソースを利用します。つまりインストール作業は必要ありません。中規模以上の開発では主にnpmもしくはyarnを利用しますが、今回のチュートリアルにはCDNで足りるでしょう。
<script src="https://unpkg.com/vue"></script>Hello world
まずは一番シンプルな Hello worldを通して el と data について学びましょう。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
</head>
<body>
<div id="app">
<h1>{{ message }}</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="/app.js"></script>
</body>
</html>var app = new Vue({
el: '#app',
data: {
message: 'Hello world'
}
})
ローカルWebサーバーを起動する方法はこちらの記事を参考にしてください。
ソースコードについて説明していきます。
設定オブジェクト
HTMLのscriptから見ていきましょう。まず、CDNからVueのソースコードを取得しています。そしてJavaScriptロジックは app.js に切り出しています。
次に app.js です。
ここでは、Vueオブジェクトのインスタンスを new で生成しています。Vueオブジェクトのインスタンスが生成されることで、Vueアプリケーションが起動します。Vueオブジェクトを生成するために、コンストラクタに、つまり new Vue() の引数に設定オブジェクトを渡します。
{
el: '#app',
data: {
message: 'Hello world'
}
}この設定オブジェクトによって、Vueはどのように起動するかを知るのです。どのデータ（変数）がDOMのどの要素と関連づけられるのか、どの関数がどのイベントと関連づけられるのか、そういった情報を、この設定オブジェクトから取得するということです。
では設定オブジェクトを見てみましょう。
el
まず一つ目のプロパティは el です。
el: '#app',el には、'#app'のように、DOM要素を指し示すセレクタが指定されます。このプロパティの値は、Vueアプリーケーションの範囲、Vueの管轄領域を表します。今回のHello worldの例では、<div id="app"> タグ内部がVueアプリケーションとして認識されるということです。
data
二つ目のプロパティは data です。
data: {
message: 'Hello world'
}data はVueアプリケーション内で利用できるデータ（変数）を表します。Vueアプリケーション内とはつまり el で指定した範囲内ということです。変数名とその値を組みにしたオブジェクトが指定されます。
ここまでの設定オブジェクトで、Vueは以下の2点を伝えられています。
#appの内部をVueアプリケーションの適用範囲とすることmessageというデータを用いること
テンプレート
さて、HTMLに戻りましょう。
<div id="app">
<h1>{{ message }}</h1>
</div><h1>{{ message }}</h1> に注目してください。
- 二重の波カッコでデータの名前を指定してやることで、データの値が表示されています。
messageというのは、設定オブジェクトのdataプロパティに指定したオブジェクトに含まれていた、あのmessageです。そのためmessageという名前のデータをアプリケーション内で使用できるのです。- そしてその値は "Hello world" とされていたため、Vueインスタンスが起動すると
{{ message }}の部分がHello worldに書き換えられ、<h1>Hello world</h1>というDOMが生成されました。
こうして、画面に「Hello world」が映し出されたのです。
もちろんVueのテンプレートシステムの機能はデータの表示だけではありません。条件分岐やループなどの機能も備わっています。それらの機能は後々記事にするとして、今回はもう少し el と data について説明します。
うまくいかないこと - elの範囲を外れる
HTMLのソースコードを以下のように書き換えてみてください。
<h1>{{ message }}</h1> を <div id="app"> の外に出しています。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
</head>
<body>
<h1>{{ message }}</h1>
<div id="app">
<!-- -->
</div>
<script src="https://unpkg.com/vue"></script>
<script src="/app.js"></script>
</body>
</html>すると、画面の表示はこのようになります。
二重波カッコの部分がデータの値に書き換わっていませんね。これは、{{ message }} が elプロパティで指定した #app の範囲から外れたためです。Vue は el で指定された範囲外については処理しないのです。
うまくいかないこと - データの名前不一致
次に、HTMLのソースコードを以下のように書き換えてみてください。
{{ message }} を {{ xyz }} に書き換えています。
<!DOCTYPE html>
<html>
<head>
<title>Welcome to Vue</title>
</head>
<body>
<div id="app">
<h1>{{ xyz }}</h1>
</div>
<script src="https://unpkg.com/vue"></script>
<script src="/app.js"></script>
</body>
</html>すると、画面の表示はこのようになります。
何も表示されていません。開発者ツールのJavaScriptコンソールをご覧ください。
エラーが表示されています 
Property or method "xyz" is not defined on the instance but referenced during render."xyz"という名前のプロパティまたはメソッドは（Vue）インスタンスには定義されていないが、レンダリング中に参照されている。
確かに、xyz という名前のデータは設定オブジェクトの dataプロパティには指定されていませんでした。設定オブジェクトで渡されていないので、「Vueインスタンスには定義されていない」と言っているのです。
「レンダリング」というのは上で説明したテンプレートの書き換えプロセスのことです。
その値は "Hello world" とされていたため、Vueインスタンスが起動すると
{{ message }}の部分がHello worldに書き換えられ、<h1>Hello world</h1>というDOMが生成されました。
Vueは起動プロセスのなかで、テンプレートのレンダリングを実施します。設定オブジェクトには el: "#app" とあるので、id="#app" の内部を探索します。そして二重波カッコ {{ xyz }} を見つけるとデータxyzの値で書き換えようとします。しかしxyzというデータは見つかりません。dataプロパティに含まれていないのです。
このように、テンプレート（HTML側）と設定オブジェクト（JS側）のデータ名が食い違うとエラーになってしまいます。このエラーはVueではありがちなうっかりミスなのではないでしょうか。
- dataプロパティにデータを書き忘れる
- テンプレートでデータの名前をスペルミスする
などが上記のエラーを引き起こします。
以上、うまくいかない状態をあえてつくることで el と data の機能について説明しました。
まとめ
el
'#app' のように、DOM要素を指し示すセレクタが指定されます。このプロパティの値は、Vueアプリーケーションの範囲、Vueの管轄領域を表します。
data
変数名とその値を組みにしたオブジェクトが指定されます。Vueアプリケーション内で利用できるデータ（変数）を表します。
