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

メニューボタン閉じるボタン

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

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

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

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

スポンサーリンク

サンプル作成

動作は MacOS で、ブラウザは Google Chrome で確認しています。
ソースコードは、 以下の2ファイルで構成されています。
・ 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 の7つのサンプルが表示されます。

サンプル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 では、変数を参照しています。
参照の方法は2種類あります。
・ 二重中括弧(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 の入門のとっかかりにしていたらければと思います。


03-6441-3336

いますぐ無料で
お試しください。

SiTestの革新的な機能を、
1か月間無料でお試しいただけます。

お名前【必須】
メールアドレス【必須】
電話番号【必須】

利用規約はこちら