JavaScript勉強会

JavaScriptの学習日記

Vue.jsのフィルターを使う 【JavaScript フレームワーク入門】

Vue.jsの学習メモ。

今日は「JavaScript フレームワーク入門」の第4章を読んでみます。

 

jsstudy.hatenablog.com

 

 

4-2-8 フィルターを使う

(p.130)

toStringを使って配列をテキストにして表示させましたが、実は別のやり方もあります。

 

前回、JavaScript式を使って配列を文字列に変換しましたが、Vue.jsの「フィルター」という機能でも同じことができます。

 

Vue.jsのフィルターは、バージョン1とバージョン2では、仕様が変更されていました。

(参考)

qiita.com

 

サンプルコードの確認は、

  1. まず、Vue.jsのバージョン1(本書の説明)
  2. 次に、Vue.jsのバージョン2

で試してみます。

 

Vue.js バージョン1のフィルター

HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <div id="msg">
    <p>{{ message | json }}</p>
    <input type="text" v-model="text1">
    <input type="button" v-on:click="doAction" value="click">
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン1のvue.jsをダウンロードしておく。

 

CSS

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

 

JavaScript

main.js

function initial() {
  new Vue({
    el: '#msg',
    data: {
      msgArray: [],
      message: '',
      text1: ''
    },
    created: function () {
      this.msgArray.push('sample message.');
      this.message = this.msgArray;
    },
    methods: {
      doAction: function () {
        this.msgArray.push(this.text1);
        this.message = this.msgArray;
      }
    }
  })
}

 

実行結果

上記の「index.html」「style.css」「main.js」「vue.js」を同じフォルダの中に保存して、Chromeでindex.htmlを見てみます。

 

f:id:jsstudy:20170717205255p:plain

 

  1. 入力フィールドに「123」と入力して「click」ボタンをクリック
  2. 入力フィールドに「XYZ」と入力して「click」ボタンをクリック

デフォルトの文字列「sample message.」に加えて、「123」「XYZ」も表示に反映されました。

=msgArrayの配列が、JSON形式の文字列に変換されて、表示されました。

 

Vue.js バージョン2のフィルター

フィルター機能がちゃんと効いているか、いないか?を確かめやすいように、少し上記コードを改造してみます。

(参考)Vue.js 2.xのフィルタについて調べてみた - Qiita

 

HTML

index.html

<!DOCTYPE html>
<html>

<head>
  <title>Hello</title>
  <meta charset="UTF-8">
  <script src="vue.js"></script>
  <script src="main.js"></script>
  <link rel="stylesheet" href="style.css"></link>
</head>

<body onload="initial();">
  <h1>Vue.js</h1>
  <div id="msg">
    <p>None: {{ message }}</p>
    <p>JSON: {{ message | json }}</p>
    <p>JSON_Upper: {{ message | json_uppercase }}</p>
    <input type="text" v-model="text1">
    <input type="button" v-on:click="doAction" value="click">
  </div>
</body>

</html>

vue.jsは、公式サイトからバージョン2のvue.jsをダウンロードしておく。

 

CSS

style.css

body {
  color: #F99;
  padding: 5px 16px;
  font-size: 14pt;
  line-height: 150%;
}
h1 {
  font-size: 24pt;
}
p {
  font-size: 18pt;
}

 

JavaScript

main.js

function initial() {
  new Vue({
    el: '#msg',
    data: {
      msgArray: [],
      message: '',
      text1: ''
    },
    created: function () {
      this.msgArray.push('sample message.');
      this.message = this.msgArray;
    },
    methods: {
      doAction: function () {
        this.msgArray.push(this.text1);
        this.message = this.msgArray;
      }
    },
    filters: {
      json: function (value) {
        if (!value) return '';
        return JSON.stringify(value);
      },
      json_uppercase: function (value) {
        if (!value) return '';
        value = value.map(function (item) {
          return item.toUpperCase();
        });
        return JSON.stringify(value);
      }
    }
  })
}

 

実行結果

上記の「index.html」「style.css」「main.js」「vue.js」を同じフォルダの中に保存して、Chromeでindex.htmlを見てみます。

 

f:id:jsstudy:20170718153431p:plain

 

  1. 上段:None → フィルターなし
  2. 中段:JSON → 「json」フィルターをかけた
  3. 下段:JSON_Upper → 「json_uppercase」フィルターをかけた

 

  • NoneとJSONは、見た目の違いが分かりづらいですが、「[」と「"」の間のスペースがなくなってました。
  • json」だとフィルターが効いている様子が分かりづらかったので、「json」を改造して大文字に変換する「json_uppercase」を用意してみました。
  • 確かに、大文字に変換されていたので、フィルターを通した結果が表示されていることが分かりました。

 

バージョン1とバージョン2の違いは、Vueオブジェクトに「filters」というプロパティを用意する必要があります。

Vue.jsバージョン2では、「filters」を自分で用意しないとフィルターが動きません。

 

 

f:id:jsstudy:20170718155951p:plain

(main.jsのfiltersをコメントアウトして、Chromeのコンソール画面を見ると、Vue.jsのエラーメッセージが出てました。)

 

 

Vue.jsのフィルターとは?

(p.131)

フィルターというのは、指定された値を出力する際に何らかの処理を行うための仕組みです。

フィルターを指定することで、指定の形で処理した値を出力するようになります。

 

(参考)

jp.vuejs.org

 

フィルタ

Vue.js では、一般的なテキストフォーマットを適用するために使用できるフィルタを定義できます。

フィルタは、mustache 展開と v-bind 式、2 つの場所で使用できます。

フィルタは JavaScript 式の末尾に追加する必要があります。

これは “パイプ(‘|’)” 記号で表されます。

 

 フィルタは連結できます:

{{ message | filterA | filterB }}

 

バージョン1からバージョン2への変更点

(参考)Vue 1.x からの移行 - Vue.js フィルター

この説明を参考にして、フィルターを使えばOK。

 

filtersを用意する方法は、グローバルにフィルターを定義する、computedプロパティ(計算プロパティ)に定義する、などの方法もありました。 

  1. filtersプロパティを使う(← 今回試した方法)
  2. グローバルにfilterを定義する
  3. computedプロパティを使う

ちょっとした処理を任せたいフィルターは、3通りの方法で用意できるようです。

 

まとめ

  • フィルターは、値を表示する前に加工する機能
  • ちょっとした処理を共通化して用意しておきたいときに便利?

 

バージョンが変わると動かない → やれやれだぜw ┐(´ー`)┌

 

 

JavaScript フレームワーク入門

JavaScript フレームワーク入門