JavaScript
vue.js
フロントエンド
OriginalTISDay 21

筋トレしながらわかる💪Vue.js入門

bodybuilding-311351_640.png

Vue.jsとは?

Vue.jsは多機能で、少しずつ適用していくことが出来るクライアント側のJavaScriptフレームワークです。これは筋トレも同じ。筋トレも多機能(様々な鍛え方がある)で、日常にトレーニングを少しずつ組み入れていくことができます。

こんな似ているモノ同士を同時に説明し、相乗効果(?)を高めて見ようという画期的な試みがこの記事です。

何を説明するのか?

Vue.jsには様々な機能がありますが、コア&基本となる以下の3つを取り上げます。

  • リアクティブ
  • リストレンダリング
  • イベントハンドリング

リアクティブ

Vue.jsはデータとDOMが関連付けられリアクティブになっています。これは筋肉に例えると腹直筋です。体の中心に位置し、体を支える重要な筋肉の様にリアクティブであることはVue.jsにとってとても重要です。Vue.jsはリアクティブによって成り立ち、故に便利なのです。腹直筋が何処の筋肉かわからない?ググって、どうぞ。

簡単な例を用いて説明しましょう。以下は、単純に「プロテイン」と画面に表示する例です。

index.html
<div id="app">
  {{ message }}
</div>
vue.js
const app = new Vue({
  el: '#app',
  data: {
    message: 'プロテイン'
  }
})
結果
プロテイン

Vue.jsを使うにはまず、Vue関数でVueインスタンスを作成するところから始まります。Vue関数の引数は様々なものがありますが特に重要なものがeldataです。elは、Vueインスタンスがバインドする(紐づく)DOM要素を指定し、dataはVueインスタンスのプロパティを指定します。

  • el : VueインスタンスがバインドするDOM要素
  • data : Vueインスタンスが持つプロパティオブジェクト

一方html側では、VueインスタンスにバインドされているDOM要素以下で、{{ message }}のように書きVueインスタンスのmessageプロパティの値を描画できます。

Vue関数のdataによって渡されたオブジェクトは、すべてリアクティブになっています。なので、dataの内容を書き換えるとそれに反応してビューが再レンダリングされ、最新の値を表示してくれます。

例えば、messageの値をランニングに変えると次の瞬間ビューではランニングと表示されています。

index.html
<div id="app">
  {{ message }}
</div>
Console
app.message = 'うますぎる!'
結果
うますぎる!

ちなみに、dataで指定するものはオブジェクトなので、複数のプロパティを指定することができます。例えばこんな感じです。

index.html
<div id="app">
  <p>{{ menu1 }}</p>
  <p>{{ menu2 }}</p>
  <p>{{ menu3.name }} : {{ menu3.speed }}</p>
</div>
vue.js
const app = new Vue({
  el: '#app',
  data: {
    menu1: '腹筋',
    menu2: '腕立て伏せ',
    menu3: {
      name: 'ランニング',
      speed: '8.0km/h'
    }
  }
})
結果
腹筋

腕立て伏せ

ランニング : 8.0km/h

リストレンダリング

リストレンダリングとは名前から想像がつく様に、リストのデータをHTMLへレンダリングする機能です。つまり、上腕二頭筋を鍛えると重いものを軽々と運べる様に、リストレンダリングは反復作業を楽に処理できます。

皆さん会社の帰りにジムメニューを考えていると思います(ですよね?)。そうした時には以下の様なデータ構造とメニュー内容を思いつくと思います。

vue.js
const app = new Vue({
  el: '#app',
  data: {
    todayMenu: [
      'アブドミナル',
      'ラットプルダウン',
      'バックエクステンション',
      'チェストプレス'
    ]
  }
})

todayMenuに文字列がリストで格納されています。それぞれをHTML出力するには以下の様に書きます。

index.html
<div id="app">
  <div v-for="menu in todayMenu">
    {{ menu }}
  </div>
</div>
結果
アブドミナル
ラットプルダウン
バックエクステンション
チェストプレス 

リアクティブの時とほとんど変わっていませんが、 v-forという属性があります。これが、Vue.jsでのリストのレンダリング方法です。 v-for="menu in todayMenu"という部分でVueインスタンス内のtodayMenuリストの一つ一つの要素を順に取り出し、menuという一時変数に格納しています。そして、取り出した要素分v-for属性が付与されたDOM要素以下を繰り返しレンダリングします。

リストの要素が単純な型でなかったとしても、Vue.jsを使えばとても簡潔な方法でレンダリングできます。例えば、それぞれのメニューに負荷を加えたいとしましょう。すると、この様になります。

vue.js
const app = new Vue({
  el: '#app',
  data: {
    todayMenu: [
      {label:'アブドミナル', weight: 45},
      {label:'ラットプルダウン', weight 40},
      {label:'バックエクステンション', weight: 50},
      {label:'チェストプレス', weight: 50}
    ]
  }
})
index.html
<div id="app">
  <div v-for="menu in todayMenu">
    {{ menu.label }}({{ menu.weight }})
  </div>
</div>
結果
アブドミナル(45)
ラットプルダウン(40)
バックエクステンション(50)
チェストプレス(50) 

イベントハンドリング

日々のトレーニングでも瞬発力が大切ですが、Vueの世界でも同様(?)にイベントの処理は大切です。Vue.jsではDOMイベントの購読とそれに紐づいたJavaScriptを発火する事は非常に簡単です。以下の例では、ボタンがクリックされた時に表示を更新する単純な例です。

<div id="app">
  <button v-on:click="changeMsg">change message</button>
  <p>{{ message }}</p>
</div>
const app = new Vue({
  el: '#app',
  data: {
    message: 'プロテイン'
  },
  methods: {
    changeMsg: function () {
      this.message = 'うますぎ'
    }
  }
})

ボタンとプロテインという文字が表示され、ボタンをクリックするとプロテインうますぎに変わります。

一体何が起こったのでしょうか?Vue.jsでは タグにv-on:DOMイベントと記述する事でDOMイベントの購読をすることができます 。なので上記の例ではbuttonタグにv-on:clickと記述されているため、ボタンクリックのイベントを購読しています。

さらにVue関数にmethodsというプロパティを渡すことで関数をVueインスタンスに渡すことができます。この例ではchangeMsgという名前で関数をVueインスタンスに登録しています。その関数を、ボタンがクリックされた時に発火するようにv-on:click="changeMsg"と書いて指定しています。

v-onでは、様々なDOMイベントを指定することが出来ます。例えば、マウスがボタンに被さったイベントを拾いたければv-on:mouseenterのように書けます。

おわりに

ここで紹介したことはVue.jsのほんの一部です。他にもVue.jsには様々な機能があります。

様々な機能の中でも特に私が注目しているのが以下です。

また、これらの他にも様々なサードパーティライブラリが続々登場中です。

皆さんも是非Vue.jsと筋トレの世界に足を運んで見てください。