JavaScript

Vue.jsでフィルタを使ってデータを加工する方法を解説します

筆者
筆者
フィルタを使う事でバインドするデータに様々な加工を行う事ができます。保守性の高いコーディングをするために有用な方法ですので、ぜひ覚えましょう。

以下の基本テンプレートに実際にコードを書き加えながら学習していきます。index.htmlというファイル名でデスクトップに保存して準備をしましょう。

フィルタの書き方の基本を覚えよう

フィルタは、Mustacheとv-bind、2つの場所で書くことができます。

Mustacheの書き方

{{ フィルタに渡すデータ | フィルタ }}

試しに以下の条件でコーディングしてみましょう。

  • フィルタに渡すデータは数値の1000
  • フィルタオプションの関数は受け取った数値を2倍にして返す

ブラウザで実行してみてください。

2000という数値が表示されましたか?

フィルタの流れを図解します。

数値1000をtoDoubleの引数にして呼び出しています。toDouble関数では1000を2倍にした数値をリターンしています。

v-bindの書き方

v-bindで使用する場合はつぎのように書きます。

<div v-bind:id=”フィルタに渡すデータ | フィルタ”></div>

筆者
筆者
v-bindよりはMustacheで簡単なデータ加工に使ったりすることの方が多いかなと思います。

フィルタはこんな時に使うと便利

商品の金額を税込金額に変換→カンマで区切るという処理をフィルタを使ってコーディングしてみましょう。テンプレートのソースコードをつぎのように編集します。

ブラウザで表示すると以下の画面が表示されます。金額が税込でカンマ有の表示に変わりました。

処理の流れを解説します。

この例のようにフィルタは連結することができます。フィルタ名は保守性を高めるためにも、処理内容を表す適切なものを選びましょう。

この処理をフィルタを使わないでHTML要素内だけで完結させると以下のようになります。

この例のように簡単な処理なら問題ありませんが、長い式が必要な処理を行う場合は、HTMLの見通しが悪くなってしまうので、フィルタオプションを使うことをおすすめします。

フィルタは JavaScript 関数なので、引数を取ることができます。

{{ フィルタに渡すデータ | フィルタ(引数A, 引数B) }}

ここでフィルタは3つの引数をとる関数として定義されています。フィルタに渡すデータは第1引数に渡されます。引数Aは、第2引数としてフィルタに渡されます。そして、引数Bは第3引数としてフィルタに渡されます。

筆者
筆者
HTML要素内にデータ加工処理を書いた時には、フィルタに置き換えられないか検討してみると良いです。そうすることで案外コードがスッキリすることもあると思います。以上、Vue.jsのフィルタの解説でした。