もがき系プログラマの日常

もがき系エンジニアの勉強したこと、日常のこと、気になっている技術、備忘録などを紹介するブログです。

Vue.js入門 基礎から実践アプリケーション開発までを読んだ vol.2

はじめに

こんにちは。

Kojirockの1人アドベントカレンダー Advent Calendar 2018の2日目の記事です。

以下の本を読んで勉強できたことを記載していきます。

今回は第2章です。

Vue.js入門 基礎から実践アプリケーション開発まで

Vue.js入門 基礎から実践アプリケーション開発まで

2章 Vue.jsの基本

目次

2.1 Vue.jsでUIを構築する際の考え方

2.2 Vue.jsの導入

2.3 Vueオブジェクト

2.4 Vueインスタンスのマウント

2.5 UIのデータ定義(data)

2.6 テンプレート構文

2.7 フィルタ(filters)

2.8 算出プロパティ(computed)

2.9 ディレクティブ

2.10 ライフサイクルフック

2.11 メソッド(methods)

2.1 Vue.jsでUIを構築する際の考え方

ここでは、旧来のjQueryによるUI構築と、Vue.jsでのUI構築の差が述べられていました。

実際、イベントや要素が少ない場面では、jQueryとVue.jsに大きな差は生まれないのですが、複数のイベントによる複雑な要素変更があるページでは、jQueryによる構築だと辛い場面が出てきます。

こちらの要素は非表示にして、こちらの要素は表示して、こちらの要素はこのinputフォームをdisabledにして...と多種多様な要素の変更があった場合、各イベントリスナーからそれらの要素の変更を追加・削除などをしていく必要があります。

簡単にメンテナンス性が失われてしまうようになります。

実際昔から動いているjQuery中心のwebアプリケーションとかまさに↑の状態なんじゃないでしょうか。

「ここのイベントいらなそうだけど、、、でも消したら要素変わっちゃいそう。。。」

とかおっかなびっくり触りつつみたいなことも経験あると思います(自分はありました)

Vue.jsによるUI構築は、イベントと要素の間に「状態」が挟まる形になるということです。

前述したとおり、要素数やイベント数が少ない場合は恩恵が感じられないかもしれないですが、多くなってきたときに効果が実感できるということです。

実際のコードなどはこのあと出てくると思いますが、現段階での自分の認識では、jQueryでの運用は、各イベントと要素が密接につながっているため、どちらも切り離せず各々を考慮しながら開発しなければいけないが、Vue.jsでの運用は、「状態」が間に挟まることにより、各イベント(アクション)と、要素の各変更を分けて考えることができるというところにとどめておきます。

2.2 Vue.jsの導入

このブロックからは実際にコードを打ちつつ進めていく形になります

一番簡単な導入方法としてscriptタグで読み込む手法が紹介されています。

以下がその例です。

<script src="https://unpkg.com/vue@2.5.17"></script>

jsFiddleでやったのはこちら。

f:id:kojirooooocks:20181201034748p:plain

上記の例はあくまでテストとして、紹介されています。

以下のようなscriptタグでの読み込みは、SPAのような複雑なwebアプリケーションを構築する場合では使われず、今回のような学習用や、一部のページのみに適用したい場合に使用されるようです。

実際にサイト全体に適用する場合は、前回の記事でも紹介した Vue CLIなどを使用して周辺ツールを一緒にインストールしたほうが懸命です。

2.3 Vueオブジェクト

前述したscripttタグでの読み込みで、グローバル変数Vueが使用可能になります。

実際に使用する際は、以下のような形になります。

var vm = new Vue({

})

コンストラクタの引数には、オブジェクトとしていろいろな設定値を渡します。

本書で紹介されているものは、主要なものとして以下を紹介してくれています。

オプション名 内容
data UIの状態・データ
el Vueインスタンスをマウントする要素
filters データを文字列と整形する
methods イベントが発生したときなどの振る舞い
computed データから派生して算出される値

その他にも様々なオプションがあるようなので、公式の情報を載せておきます。

2.4 Vueインスタンスのマウント

マウントの説明として本書では以下のように説明されています。

マウントとは、既存のDOM要素をVue.jsが生成するDOM要素で置き換えることです。

マウント自体は、前述のオプションオブジェクトで指定することもできるし、あとから指定することも可能とのことです。

  • 先に指定する場合

f:id:kojirooooocks:20181201034806p:plain

  • あとから指定する場合

f:id:kojirooooocks:20181201034817p:plain

この2つの使い分けとしては、マウント対象の要素が非同期通信などであとから追加される場合に、あとから追加する方法をとるようです。

2.5 UIのデータ定義(data)

UIの「状態」となるデータのオブジェクトを指定します。

dataプロパティの値が変更されるたびにVue.jsがそれを自動で検知して表示を切り替えるようになります。

例でもよく使われている一方向バインディングでそれはわかるかなと思います。

<div id="app">
  <p>
    {{ message }}
  </p>
</div>
<script>
new Vue({
  el: '#app',
  data: {
    message: 'こんにちは' ←ここの値を変えれば表示も変わる
  }
})
</script>

dataはあくまでデータそのものを置いて、関数などはmethodsやcomputedの仕事として分離すべきということのようです。

次に本書では、consoleでのVueインスタンスの状態確認方法が記載されています。

Chrome DevToolでの確認方法なので、このあたりは流し読みしました。

またVue.jsはデータの代入と参照はデータバインディングのため監視を行っています。

なので、console上でdataを修正するとデータが変わり、表示が変わります。

自分が書いた以前の記事でも試しています。

2.6 テンプレート構文

今までも使用してきた {{ }} を使ったものや、後述するその他の機能を総じてテンプレート構文と呼ぶようです。

Vue.jsのテンプレート構文で重要なのは次の2つとなります。

  1. Mustache記法によるデータの展開
  2. ディレクティブによるHTML要素の拡張

ディレクティブについては、後述されるようなので、このブロックではMustache記法によるデータ展開について中心に書かれています。

テキストへの展開

今まで使用してきた {{ }} のことを指しています。

属性値の展開

自分が書いた以前の記事の属性をバインディングするという項目が該当します。

↑で紹介している方法以外にも本書では、以下のように便利に使える方法も紹介されています。

<script src="https://unpkg.com/vue@2.5.17"></script>
<button id="b-button" v-bind:disabled=!canBuy">購入</button>
<script>
const vm = new Vue({
  el: '#b-button',
  data: {
    canBuy: false
  }
})
</script>

単にテキストとして出す以外にも、disabledなどの条件としても扱えるようになるという感じです。 こちらの例は汎用性の高い使用方法だなと思いました。

javascript式も展開できるようですが、おすすめはされていませんでした。

複雑になるということもあるし、その仕事を行うのはmethodsやcomputedになるからだと思いました。

2.7 フィルタ(filters)

実際に保持しているdataとページに表示したいテキストは違う場合があると思います。

例えば電話番号をdataで保存していて、表示する場合は-(ハイフン)をつけて表示したいときなどです。

そういったときにこのfilterが使用されます。

以下は本書で紹介されているfilterのメソッドを少し改良しました。

  <script src="https://unpkg.com/vue@2.5.17"></script>
  <div id="app">
    <label>電話番号</label>
    <span>{{ tel|telDelimiter }}</span>
  </div>

  <script>
  new Vue({
    el: '#app',
    data: {
      tel: '09012345678'
    },
    filters: {
      telDelimiter: function(value) {
        return value.replace(/(\d)(?=(\d{4})+$)/g, '$1-')
      }
    }
  })
  </script>
  => 電話番号 090-1234-5678

フィルタは複数セットすることが出来ます。 {{ value | filter1 | filter2 }} といった感じです。

表示するデータが何らかの金額だとすると、金額フォーマット(3桁区切りにカンマ)にしたあと、最終的に をつけるとかですかね?

2.8 算出プロパティ(computed)

今までも何回か登場していた算出プロパティです。

こちらは以前の自分の記事でも紹介しています。

内容的にもそこまで難しいものではないです。

2.9 ディレクティブ

テンプレート構文のところで紹介されたディレクティブです。

こちらも以前の自分の記事でほぼほぼ、紹介していました。

2.10 ライフサイクルフック

reactでもあったのですが、vueでも各タイミングで処理を差し込めるフック機能があるようです。

本書で紹介されていたタイミングとフック名の表を記載しておきます。

フックの名前 フックが呼ばれるタイミング
beforeCreate インスタンスが生成され、データが初期化される前
created インスタンスが生成され、データが初期化された後
beforeMount インスタンスがDOM要素にマウントされる前
mounted インスタンスがDOM要素にマウントされた後
beforeUpdate データが変更され、DOMに適用される前
updated データが変更され、DOMに適用された後
beforeDestory Vueインスタンスが破棄される前
destroyed Vueインスタンスが破棄された後

2.11 メソッド(methods)

メソッドは一番わかりやすく、インスタンスにmethodを追加できます。

よくあるajax等によるサーバとの通信などで使用するのが一般的のようです。

ここでも、特に、難しいところはありませんでした。

一点算出プロパティとメソッドどちらも同じような使い方できるんじゃないの?と思ったりしたところがあったのですが、以前自分の記事でも書いていました。

算出プロパティは依存しているデータが変更されない限りは、結果をキャッシュしてくれるようです。

終わりに

今回は以前自分がやったことのある内容がほぼでした。

次章から少し複雑なものになっていくようです。

がんばるぞー!