コピペだけ！ Vue.js を最短で動かして入門しよう

2017/10/26 カテゴリ - JavaScript,フロントエンド,技術情報

AngularJS などに並ぶ JavaScript フレームワークの１つに Vue.js があります。
Vue.js はバインディングあり・軽量・低学習コスト・拡張可能な MVVMフレームワークです。

手っ取り早く理解するために、コピペで動く７つのサンプルを用意して、各サンプルに対して説明します。ブラウザとテキストエディタがあれば動きますので、入門のハードルを極力下げました。

なにはともあれ、動くサンプルを見て、最短で Vue.js を動かしてみましょう！

サンプル作成

動作は MacOS で、ブラウザは Google Chrome で確認しています。
ソースコードは、以下の２ファイルで構成されています。
・ main.html （ HTML ）
・ script.js （ JavaScript ）
これらのファイル名で同じディレクトリにファイル作成し、以下のソースをコピペしてください。

↓ main.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/vue@2.4.4/dist/vue.min.js"></script>
  </head>
  <body>
    <h1>Vue入門</h1>

    <div id="sample01">
      <h2>サンプル01：v-text</h2>
      <p>二重中括弧で変数を囲う：{{text}}</p>
      <p>属性で変数を指定する：<span v-text="text"></span></p>
    </div>

    <div id="sample02">
      <h2>サンプル02：v-model</h2>
      <input v-model="num" type="number">
      <p>v-modelで指定した変数： {{num}}</p>
      <p>変数に対して2を掛ける： {{num * 2}}</p>
    </div>

    <div id="sample03">
      <h2>サンプル03：v-on</h2>
      <input v-model="input" type="text">
      <button v-on:click="output">入力文字列を反映</button>
      <p>ボタンを押すと入力値をtext変数に代入：{{text}}</p>
    </div>

    <div id="sample04">
      <h2>サンプル04：v-html</h2>
      <div v-html="html"></div>
    </div>

    <div id="sample05">
      <h2>サンプル05：v-show、v-if</h2>
      <input type="checkbox" v-model="checked">
      <p v-show="checked">v-showの属性を持つ要素</p>
      <p v-if="checked">v-ifの属性を持つ要素</p>
    </div>

    <div id="sample06">
      <h2>サンプル06：v-for</h2>
      <ul>
        <li v-for="item in items">{{item.content}}</li>
      </ul>

      <ul>
        <li v-for="(item, index) in items">{{index + 1}}. {{item.content}}</li>
      </ul>
    </div>

    <div id="sample07">
      <h2>サンプル07：v-bind</h2>
      <input type="radio" value="red" v-model="picked">赤色
      <input type="radio" value="blue" v-model="picked">青色
      <p v-bind:style="{color: picked}">サンプルテキスト</p>
    </div>

    <script src="script.js"></script>
  </body>
</html>

↓ script.js

new Vue({
  el: '#sample01',
  data: {
    text: 'サンプルテキスト'
  }
});

new Vue({
  el: '#sample02',
  data: {
    num: '0'
  }
});

new Vue({
  el: '#sample03',
  data: {
    input: 'サンプルテキスト',
    text: ''
  },
  methods: {
    output: function (){
      this.text = this.input;
    }
  }
});

new Vue({
  el: '#sample04',
  data: {
    html: '<p>サンプルHTML</p>'
  }
});

new Vue({
  el: '#sample05',
  data: {
    checked: true
  }
});

new Vue({
  el: '#sample06',
  data: {
    items: [
      { content: 'アイテムA'},
      { content: 'アイテムB'},
      { content: 'アイテムC'}
    ]
  }
});

new Vue({
  el: '#sample07',
  data: {
    picked: 'blue'
  }
});

ファイル作成できたら、main.html のパスをブラウザのアドレスバーに入力すると、Vue.js の７つのサンプルが表示されます。

サンプル01：v-text

v-textサンプル

main.html

<p>二重中括弧で変数を囲う：{{text}}</p>
<p>属性で変数を指定する：<span v-text="text"></span></p>

script.js

new Vue({
  el: '#sample01',
  data: {
    text: 'サンプルテキスト'
  }
});

v-text のような、追加機能はディレクティブ（日本語訳：指令）と呼ばれます。v-text のサンプルでは、script.js で定義した変数が、main.html で参照されていることがわかります。

JavaScript では、 Vue のインスタンスを生成して、オブジェクト形式で el と data を定義しています。
el は対象の要素を指定し、 data は変数定義を行います。data には、使用したい変数を自由に定義します。
ここでは、text という変数に文字列を宣言しています。

HTML では、変数を参照しています。
参照の方法は２種類あります。
・二重中括弧（Mustache 構文）
・ v-text 属性で、変数を指定

サンプル02：v-model

v-modelサンプル
main.html

<input v-model="num" type="number">
<p>v-modelで指定した変数： {{num}}</p>
<p>変数に対して2を掛ける： {{num * 2}}</p>

script.js

new Vue({
  el: '#sample02',
  data: {
    num: '0'
  }
});

v-model は、 HTML からの変数の入力を可能にします。
サンプルでは、初期値0で数値入力可能な input 要素があります。この数値を変更すると、その下の p 要素の数値が動的に変わります。数値に対して、計算処理を html 側で定義できます。

サンプル03：v-on

v-onサンプル
main.html

<p><input v-model="input" type="text"></p>
<button v-on:click="output">入力文字列を反映</button>
<p>ボタンを押すと入力値をtext変数に代入：{{text}}</p>

script.js

new Vue({
  el: '#sample03',
  data: {
    input: 'サンプルテキスト',
    text: ''
  },
  methods: {
    output: function (){
      this.text = this.input;
    }
  }
});

このサンプルでは、input 要素に文字列を入力した後にボタンを押すと、その文字列が別要素で参照されます。
v-on では、click のイベント発生時に output メソッドを実行するように指定しています。メソッド定義は、Vue のインスタンスに methods として定義します。

サンプル04：v-html

v-htmlサンプル
main.html

<div v-html="html"></div>

script.js

new Vue({
  el: '#sample04',
  data: {
    html: '<p>サンプルHTML</p>'
  }
});

v-html は、HTML そのものを入れることができます。
v-html 属性を指定している要素の innerHTML を操作することになります。

サンプル05：v-show、v-if

v-showとv-ifサンプル
main.html

<input type="checkbox" v-model="checked">
<p v-show="checked">v-showの属性を持つ要素</p>
<p v-if="checked">v-ifの属性を持つ要素</p>

script.js

new Vue({
  el: '#sample05',
  data: {
    checked: true
  }
});

v-show と v-if は、要素の表示・非表示を操作できます。チェックボックスのオン・オフで、要素が見え隠れするのがわかります。
動作の違いは、 DevTools で要素を見るとわかりますが、v-if は要素の存在自体を操作し、v-show は要素の見た目上の表示・非表示を操作します。

サンプル06：v-for

v-forサンプル
main.html

<ul>
  <li v-for="item in items">{{item.content}}</li>
</ul>

<ul>
  <li v-for="(item, index) in items">{{index + 1}}. {{item.content}}</li>
</ul>

script.js

new Vue({
  el: '#sample06',
  data: {
    items: [
      { content: 'アイテムA'},
      { content: 'アイテムB'},
      { content: 'アイテムC'}
    ]
  }
});

v-for は、HTML で foreach のような機能が使えます。script.js でオブジェクトの配列を定義し、それらを一つずつ取り出して参照できます。
取り方次第で、index を使用することもできます。

サンプル07：v-bind

v-bindサンプル
main.html

<input type="radio" value="red" v-model="picked">赤色
<input type="radio" value="blue" v-model="picked">青色
<p v-bind:style="{color: picked}">サンプルテキスト</p>

script.js

new Vue({
  el: '#sample07',
  data: {
    picked: 'blue'
  }
});

このサンプルでは v-bind を使って、要素の文字色を動的に変更しています。この他にも、class や id など、v-bind は色んな使い方ができます。
v-bind が他のディレクティブと少し異なのは、class のような予約されている属性に対して使えることです。また、省略形として、「v-bind:style」は「:style」のように、コロンを付けるだけで使用することもできます。

最後に

Vue.js には、説明した機能以外にも様々な機能が含まれています。また、欲しい機能を自分で選択して拡張することも可能です。

ドキュメントも公式サイトに日本語で充実しています。
Vue.jsの公式サイト

学習コストを抑えて実装効率を上げる機能が充実しています。素晴らしいフレームワークだと思いますので、この記事を Vue.js の入門のとっかかりにしていたらければと思います。

お問い合わせ

SiTest の導入検討や
他社ツールとの違い・比較について
弊社のプロフェッショナルが
喜んでサポートいたします。
コンサルティング

ヒートマップの活用、ABテストの実施や
フォームの改善でお困りの方は、
弊社のプロフェッショナルが
コンサルティングいたします。
今すぐお気軽にご相談ください。

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

今すぐお気軽に
ご相談ください。

0120-315-465

（平日 10:00~19:00）

グラッドキューブは
「ISMS認証」を取得しています。

認証範囲：
インターネットマーケティング支援事業、インターネットASPサービスの提供、コンテンツメディア事業

「ISMS認証」とは、財団法人・日本情報処理開発協会が定めた企業の情報情報セキュリティマネジメントシステムの評価制度です。

コピペだけ！ Vue.js を最短で動かして入門しよう｜ SiTest (サイテスト) ブログ