LoginSignup
5
2

More than 3 years have passed since last update.

v-htmlでfiltersを使いたい!本当に使いたい?

Last updated at Posted at 2019-06-12

Vue.js(+ TypeScript)で、文字列に対して動的に$\style{background-color:yellow;}{ハイライト}$をかけたいと思った時に調べた内容です。

ちょっとググるとVueのフィルタ出来る!と見つかったのですが・・・

TL;DR

Vue.jsのフィルター機能は、(使い道によっては)普通のメソッドで書けるんじゃないの?

というお話です。
今回のようなハイライトかけたいような状況ではフィルター機能は使わなかったですね。

廃止するかどうかの熱い議論はこちら。
[Suggestion] Vue 2.0 - Bring back filters please

背景

まずはここ、こんな風にfiltersを定義できるんですねー。知見!
https://qiita.com/pokkur/items/e6c7b20852471a9eca29

で、それにに対して、TypeScript的に書こうとすると、

@Component({
  components: { MyForm, MyComponent },
  filters: {
    highlight(plainText: string, query: string): string {
      return plainText.replace(
        query,
        `<span style='background-color: yellow'>${query}</span>`
      );
    }
  }
})
export default class HogeHoge extends Vue {
  ...
}

と書けることがわかりました。
componentsに並列させて書くんですね。この辺り、ググってもあまり出てこない内容です。
 

が!!!
 

これって、もはやメソッドじゃん!

 
というツッコミが入ったのは、(zoomで4人くらいで)モブプログラミングをしていた時でした。
上のやつでも機能するんですが、普段使い慣れているメソッドでも書けることが分かり、書き直したものが次のコードになります。

highlight()の中身は全く同じですよね。

@Component({
  components: { MyForm, MyComponent }
})
export default class HogeHoge extends Vue {
  ...
  highlight(plainText: string, query: string): string {
    return plainText.replace(
      query,
      `<span style='background-color: yellow'>${query}</span>`
    );
  }
  ...
}

ということで、検索対象のテキスト(plainText)に、検索文字列(query)を渡したら部分的にstyleが当たって、ハイライトがかけられるようになりましたー。

実際に試すとすぐ分かるのですが、例えばqueryとして渡している変数がv-modelの変数だったら、レスポンシブにハイライト箇所が変わりますねー。

あとは、正規表現をうまく組み合わせることで、複数の同じ文字列に対してハイライトかけられました!
これでタスク終わり!

タスクも進み、新たな知見も得られて良い1日だった!

今回のタスクでVue.jsが初見殺しだと感じた内容

  • コード内で、Mustache記法(二重中括弧, {{ }})と三重中括弧({{{ }}})がパッと見だと見分けづらい
  • フィルタでも書けるし、メソッドでも書ける
  • Vueのバージョンにより、三重中括弧がv-htmlに置き換わっていた(上では特に触れていない内容です)

その他、参考文献

(2重中括弧はMustache構文などでググりやすいですが、3重中括弧って特に呼び方はついていないんですかね?名前のないものって、ググりにくいですよね。)

5
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
5
2