Help us understand the problem. What is going on with this article?

筋トレしながらわかる💪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と筋トレの世界に足を運んで見てください。

BooookStore
このアカウントで発信する内容は個人検証に基づくものであり、現在所属する会社の公式見解を示すものではありませんし、特定のジムトレーニングを推奨するものでもありません。
https://booookstore.github.io/index.html
tis
創業40年超のSIerです。
https://www.tis.co.jp/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした