【Vue.js】フィルタについて解説

こんにちは！ともです(@_tomo_engineer)！

今回はVue.jsのフィルタプロパティについて見ていきます。

前回、算術プロパティ・監視プロパティと学習を進めましたが今回はそれらとはどの様に違う役割を持っているのでしょうか。

参考にしたものは以下です。

基礎から学ぶVue.js(書籍)

Vue.js：日本語ドキュメント

フィルタとは

猫本には次の様に書かれています。

「フィルタ」とは、文字数を丸めたり数字にカンマを入れるといったテキストベースの変換処理に特化した機能です。フィルタはローカルまたはグローバルに登録して使用しますが、注意点としてローカルに登録した場合でもthisへのアクセスはできません。

引用元：基礎から学ぶVue.js(書籍)

フィルタはテキストを変換する処理を担っている事が分かりました。

フィルタの使い方

// {{ 対象のデータ | フィルタの名前 }}
{{ price | localeNum }}

new Vue({
   el: '#app',
   data: {
     price: 19800
   },
   filters: { // フィルタオプション
     localeNum: function(val){ // フィルタの定義(引数は対象データのコピー)
        return val.toLocaleString()
     }
})

出力としては19,800が出力されます。

この様に文字を丸めたり、カンマを入れる処理に使用します。「算術プロパティ」ではデータの加工を行って返す事を目的としていましたが、「フィルタ」ではテキストベースの加工という事が分かりました。

しかし、methodに変換処理を記述しても良い気がします。

猫本には次の様にも書いてありました。

methodsオプションに登録したメソッドとの違いは、thisへのアクセスと記述方法の違いしかありませんが、テキストベースの変換ではフィルタを使うとスッキリとします。

引用元：基礎から学ぶVue.js(書籍)

テキストベースの変換はfilterに任せるという役割分担により読みやすくなるという事ですね。確かにmethodsが煩雑だと、カオスな状況に成りそうですね。

フィルタ内でthisが利用できない

フィルタ内ではthisによりデータへアクセスする事ができません。

Vue.jsの作者、Evan YouはGitHubでこう言っています。

つまりはfilterでの処理はcontextに依存すべきではない。もしthisが使いたければmethodを利用してください、と言っておられます。

これには一定数の反対意見もある様です。thisでアクセスできないなら、グローバルとローカルを分ける意味が無いだろという事をおっしゃっていました。

これに対して作者は、フィルタ内でthisでアクセスできる様にはしないと質問を打ち切っています。thisが使いたければmethodを使ってくれと言っています。

確かに僕もfilterに任せる様な処理はデータに依存しないと思いますし、引数でも渡せる訳ですから作者の考えに賛成しますね。

グローバルにフィルタを定義

Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})

new Vue({
  // ...
})

Vueインスタンスを定義する前に上記の様(Vue.filter)にフィルタを定義する事で、全てのコンポーネントからフィルタを利用できる様になります。

全てのコンポーネントで利用する様な汎用的なフィルタをグローバルに定義しておけば、ローカル毎に書く必要は無くなりますね。

パイプでフィルタを繋げる

フィルタは下記の様にパイプで繋げる事ができます。

{{ message | filterA | filterB }}

左から順に評価されて行くので、messageというデータを「フィルタA」にかけた結果を「フィルタB」にかけるという流れです。

猫本では次の例で示されていました。

# 180度をラジアンに変換
{{ 180 | ラジアン変換 | 丸める変換 }}

「ラジアンに変換するフィルタ」、「丸めるフィルタ」など機能ごとに分けておけば組み合わせでフィルタを利用する事ができ、とても便利ですね。

まとめ

今回はVue.jsの「フィルタ」について見ていきました。

これまでの学習から

プロパティの役割分担を意識してVue.jsの考えに沿ったコードをしていきたいです。