Edited at
TISDay 21

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

More than 1 year has passed since last update.

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と筋トレの世界に足を運んで見てください。