Vue.js 3系から filter が廃止された!?

こんにちは!Vue.js へのコントリビュートを夢見てる hikaru-kimi です!!

Vue.js の3系が標準のバージョンとなってから1年以上経過しましたね!

今更ながらではありますが、今回は Vue.js の3系の機能や変更点について紹介したいと思います!!

今回紹介する変更点は、filter の廃止です! 3系での変更点で最も衝撃的なものですが、みなさんはいかがでしょうか?

弊社サービス Re:lation のフロントエンドは、かつては AngularJS、現在は Vue.js を用いて実装されてきました。

AngularJS でも Vue.js(2系)でも、HTML側で表示形式をカスタマイズする際は filter を用いて対応してきました。

(※ この記事で扱う filter は、配列から条件に適合した要素のみを抽出する filter 関数とは別物です。)

例えば数値を3桁ごとにカンマ区切りにしたい場合、以下のように定義します。

Vue.filter('numberWithComma', function(value) {
 return value.toLocaleString();
});

で、以下のように用います。

<template>
  <div>{{ num | numberWithComma }}</div>
</template>

<script setup>
  const num = 1000;

  return{
    num,
  }
</script>

すると、表示は 1,000 のようにカンマ区切りで表示されます。

このように、filter では表示するテキストの形式を変換できるので便利です。

しかし、Vue.js では3系からこの filter が廃止されることとなりました。

なぜでしょうか?理由を調査してみました。

公式のコミットログには、以下のように記載されてます。

Filters' functionality can be easily replicated with method calls or computed properties so it provides primarily syntactical rather than practical value.

拙訳「メソッドでいいよね。わざわざメソッドとは別に filter を学習するのも無駄だし」

Filters requires a custom micro syntax that breaks the assumption of expressions being "just JavaScript" - which adds to both learning and implementation costs. In fact, it conflicts with JavaScript's own bitwise or operator (|) and makes expression parsing more complicated.

拙訳「そもそもJavaScriptにない文法だよね。しかも本家の JavaScript のビット論理和と紛らわしいし。」

※ ビット論理和は、x = x | 10 みたいなものです

Filters also create extra complexity in template IDE support (again due to them not being really JavaScript).

拙訳「IDE側でのサポートも複雑性が増して大変だよね」

引用: Vue.js コミットログより

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0015-remove-filters.md#motivation

と同時に、代替案も提示されてます。

<!-- before -->
{{ msg | format }}

<!-- after -->
{{ format(msg) }}

引用: Vue.js コミットログより

https://github.com/vuejs/rfcs/blob/master/active-rfcs/0015-remove-filters.md#basic-example

要するに、関数を使えということですね!

思えば、関数でも filter でもやってることに大差はないですよね。

強いて言えば、filter はグローバルに定義するので再利用性が高いのに対し、関数はコンポーネントレベルで定義しがちなので再利用性が低いことくらいでしょうか。

また、パフォーマンスを考慮すればテキスト形式を整える関数は computed を用いるのが妥当そうに感じます!

引数の値が変更されたときにのみ再計算を行い、それ以外の場合は再読込せずキャッシュを用いるため、テキスト形式を整える程度であれば相性がいいように思えます!

自分ならもっと分かりやすく正確にコミットログを和訳できるぞ!という方、是非以下のリンクより弊社採用サイトへご応募お願いいたします!!