TECHNOLOGY Minato

Vue.js超入門【Vue.jsの基本的な使い方②】

こんにちはMinatoです。

前回、Vue.jsの導入方法からデータを画面に表示するところまで、基本的な流れをご紹介しました。

今回は、条件分岐や繰り返しなど、Vue.jsに何らかの指示を行う仕組み「ディレクティブ」と、再利用できるUI部品を定義する「コンポーネント」について、基本的な利用方法をご紹介します。

Vue.jsの読み込み方法など、基本的な使い方を知らない方は先に前回の記事を確認してください。

Vue超入門_1

Vue.js超入門【Vue.jsの基本的な使い方】

2021年5月27日

本記事は、以下のような初心者の方を対象としています。

本記事が対象とする読者
  • これからWebエンジニアを目指したい
  • jQueryからモダンなフレームワークへ移行したい
  • HTML&CSS&JavaScriptの基本的知識がある

ディレクティブの概要と代表的なディレクティブ

まず、ディレクティブについて、簡単に説明します。

ディレクティブは v- から始まる特別な属性のことで、Vue.jsに何らかの指示を行う仕組みと言えます。
例えば、v-ifを利用することで、特定の条件に応じて、要素を出し分けることができます。

ディレクティブには、多くの種類がありますが、代表的なディレクティブは以下の通りです。

代表的なディレクティブ
  • v-bind
  • v-if
  • v-show
  • v-for
  • v-on
  • v-model

v-bind

HTMLの属性にデータをバインドするには、v-bindを利用します。

以下の例では、VueインスタンスのmessageプロパティをHTML<input>タグのvalue属性にバインドしています。

v-bind:{属性名}="{プロパティ名}"とすることで、データをバインドできます。

index.htmlをブラウザで開くと、テキストフィールドにmessageプロパティに指定した、「hello, world」が表示されます。

以降の例では、index.html内のVueのルートテンプレート配下以外は省略して記載します。

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title>Hello Vue.js!!</title>
  </head>
  <body>
    <div id="app">
        <input type="text" v-bind:value="message" />
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>
new Vue({
  el: '#app',
  data: {
      message: 'hello, world',
  }
})

v-if

要素の切り替えをを行うための、条件分岐を定義するには、v-ifディレクティブを利用します。

v-ifディレクティブに条件を指定することで要素を出し分けます。
以下の例では、プロパティdisplayがtrueの場合に「hello, world」を表示します。

値をfalseに書き換えると、非表示となることを確認します。

<div id="app">
  <p v-if="display === true">hello, world</p>
</div>
new Vue({
  el: '#app',
  data: {
      display: true
  }
})

v-show

データの表示・非表示を切り替えるには、v-showディレクティブを利用します。

v-ifディレクディブでも同様に、表示・非表示の切り替えを行うことができるのですが、頻繁に表示・非表示を切り替える場合、v-showを利用することで描画コストを抑えることができます。

v-ifとv-showの違いは、v-ifではHTML上要素が削除されるのに対し、v-showでは、CSSのdisplayのON・OFFを切り替えることによって表示と非表示を切り替えています。（HTML上要素が消えるわけではない）

<div id="app">
  <p v-show="display">hello, world</p>
</div>
new Vue({
  el: '#app',
  data: {
      display: true
  }
})

displayプロパティをfalseにすると、要素にstyle="display: none;"が付与されます。
ブラウザの検証機能を利用して、要素の変化を確認してください。

v-for

v-forを利用することで、要素の繰り返しを定義することができます。

以下の例では、「Red、Green、Blue」の文字列をリスト形式で表示しています。

v-for="color in colors"の部分でcolorsプロパティから値を一つずつ取り出し、color変数に格納しています。そしてMustache構文で変数を展開しています。

<div id="app">
  <ul>
    <li v-for="color in colors" >{{ color }}</li>
  </ul>
</div>
new Vue({
  el: '#app',
  data: {
      colors: ['Red', 'Green', 'Blue']
  }
})

v-for=”(値, キー) in プロパティ”とすることで、値だけでなく、キーを取り出すことができます。

<div id="app">
  <ul>
    <li v-for="(color, index) in colors" >{{ index }} : {{ color }}</li>
  </ul>
</div>

オブジェクトの繰り返しを行う場合も基本は配列の場合と同じです。

<div id="app">
  <ul>
    <li v-for="(value, key) in user" >{{ key }} : {{ value }}</li>
  </ul>
</div>
new Vue({
  el: '#app',
  data: {
      user: {
        firstName: 'Taro',
        lastName: 'Yamada',
        age: 20
      }
  }
})

v-on

イベント処理を扱うにはv-onディレクトリを利用します。

以下の例では、ボタンをクリックした際に、現在の時刻を表示しています。

v-on:click="getNow"の指定で、クリック時にgetNowメソッドを呼び出しています。

getNowメソッドは、Vueインスタンスのmethodsプロパティで定義します。

<div id="app">
  <button v-on:click="getNow">ボタン</button>
  <p>
    {{ now }}
  </p>
</div>
new Vue({
  el: '#app',
  data: {
      now: ''
  },
  methods: {
    getNow: function () {
      this.now = new Date().toLocaleString()
    }
  }
})

v-model

双方向にデータバインディングを行うには、v-modelディレクティブを利用します。
双方向データバインディングは以下のようなイメージです。

  • データオブジェクトの値変更 → テンプレートの値変更
  • テンプレートの値変更 → データオブジェクトの値変更

次の例では、dataオブジェクトのtextプロパティを「hello, world」で初期化し、二つのテキストボックスそれぞれにv-modelを用いてデータバインディングしています。

デバッグ用にdataの内容を表示しています。

いずれかのテキストボックスの内容を書き換えるとtextプロパティの値が書きかわり、同時に表示も変更されることが確認できます。

<div id="app">
  <input type="text" v-model:value="text" />
  <input type="text" v-model:value="text" />
  <pre>{{ $data }}</pre>
</div>
new Vue({
  el: '#app',
  data: {
      text: 'hello, world'
  },
})

コンポーネント

コンポーネントは、ページを構成するUI部品のことで、テンプレートとそのロジックで構成されています。
よく使う機能をコンポーネント化することで、再利用が可能となりコードの管理がしやすくなります。結果的に開発効率がよくなります。

次の例では、「hello, world」と表示するコンポーネントを3つ再利用して、表示しています。

<div id="app">
  <hello-component></hello-component>
  <hello-component></hello-component>
  <hello-component></hello-component>
</div>
Vue.component('hello-component', {
  template: '<p>hello, world</p>>'
})

new Vue({
  el: '#app',
})

Vueインスタンスの作成の前にコンポーネントを定義しておきます。
コンポーネントは以下の形式で定義します。

Vue.component('コンポーネント名', {
  template: 'テンプレートの内容'
})

まとめ

「いかがでしたでしょうか？」
何となくディレクティブとコンポーネントの使い方について、理解いただけたかと思います。

ディレクティブを利用することで、様々な制御を簡単に定義できます。
また、コンポーネントを利用することで、再利用性が高まり、コードの見通しがよくなります。

次回は、より実践的な内容として、ここまでの知識を用いて簡単なTODOアプリの実装を行いたいと思います。
興味のある方はぜひご確認ください。

この記事が、「面白いな」、「勉強になったな」という方は、ぜひ、SNSでシェアしていただけると嬉しいです。

RECOMMENDこちらの記事も人気です。