関連記事

前提

マシーン ブラウザ Vue
macOS Sierra 10.12 Firefox Quantum ver. 2.5

Documents

Vue.jsの公式マニュアルは完全に日本語化されています :ledger: :flag_jp:
内容も充実しているので、私は開発時はマニュアルさえあれば大抵困りません。

インストール

今回はCDNにホストされたソースを利用します。
つまりインストール作業は必要ありません。
中規模以上の開発では主にnpmもしくはyarnを利用しますが、今回のチュートリアルにはCDNで足りるでしょう。

<script src="https://unpkg.com/vue"></script>

Hello world

まずは一番シンプルな Hello worldを通して eldata について学びましょう。

index.html
<!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>
app.js
var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello world'
  }
})

Screenshot
:bulb: ローカルWebサーバーを起動する方法はこちらの記事を参考にしてください。

ソースコードについて説明していきます。

:one: 設定オブジェクト

HTMLのscriptから見ていきましょう。
まず、CDNからVueのソースコードを取得しています。
そしてJavaScriptロジックは app.js に切り出しています。

次に app.js です。
ここでは、Vueオブジェクトのインスタンスを new で生成しています。
Vueオブジェクトのインスタンスが生成されることで、Vueアプリケーションが起動します。
Vueオブジェクトを生成するために、コンストラクタに、つまり new Vue() の引数に設定オブジェクトを渡します。

{
  el: '#app',
  data: {
    message: 'Hello world'
  }
}

この設定オブジェクトによって、Vueはどのように起動するかを知るのです。
どのデータ(変数)がDOMのどの要素と関連づけられるのか、
どの関数がどのイベントと関連づけられるのか、
そういった情報を、この設定オブジェクトから取得するということです。

では設定オブジェクトを見てみましょう。

:two: el

まず一つ目のプロパティは el です。

  el: '#app',

el には、'#app'のように、DOM要素を指し示すセレクタが指定されます。
このプロパティの値は、Vueアプリーケーションの範囲、Vueの管轄領域を表します。
今回のHello worldの例では、<div id="app"> タグ内部がVueアプリケーションとして認識されるということです。

:three: data

二つ目のプロパティは data です。

  data: {
    message: 'Hello world'
  }

data はVueアプリケーション内で利用できるデータ(変数)を表します。
Vueアプリケーション内とはつまり el で指定した範囲内ということです。
変数名とその値を組みにしたオブジェクトが指定されます。

ここまでの設定オブジェクトで、Vueは以下の2点を伝えられています。

  • #app の内部をVueアプリケーションの適用範囲とすること
  • message というデータを用いること

:four: テンプレート

さて、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のテンプレートシステムの機能はデータの表示だけではありません。
条件分岐やループなどの機能も備わっています。
それらの機能は後々記事にするとして、今回はもう少し eldata について説明します。

:five: うまくいかないこと - elの範囲を外れる

HTMLのソースコードを以下のように書き換えてみてください。
<h1>{{ message }}</h1><div id="app"> の外に出しています。

index.html
<!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>

すると、画面の表示はこのようになります。

Screenshot

二重波カッコの部分がデータの値に書き換わっていませんね。
これは、{{ message }} が elプロパティで指定した #app の範囲から外れたためです。
Vue は el で指定された範囲外については処理しないのです。

:six: うまくいかないこと - データの名前不一致

次に、HTMLのソースコードを以下のように書き換えてみてください。
{{ message }}{{ xyz }} に書き換えています。

index.html
<!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>

すると、画面の表示はこのようになります。

Screenshot

何も表示されていません。
開発者ツールのJavaScriptコンソールをご覧ください。

Screenshot

エラーが表示されています :warning:

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プロパティにデータを書き忘れる
  • テンプレートでデータの名前をスペルミスする

などが上記のエラーを引き起こします。

以上、うまくいかない状態をあえてつくることで eldata の機能について説明しました。

まとめ

:round_pushpin: el

'#app' のように、DOM要素を指し示すセレクタが指定されます。
このプロパティの値は、Vueアプリーケーションの範囲、Vueの管轄領域を表します。

:package: data

変数名とその値を組みにしたオブジェクトが指定されます。
Vueアプリケーション内で利用できるデータ(変数)を表します。

Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account log in.