Vue2からVue3への移行-Filterの廃止を修正

この記事は約3分で読めます。

NipoはVue2で作成されたWebシステムですが、今回Vueが3にバージョンアップしたことに追従し、NipoのソースコードもVue3へ書き換え中です。

Filter機能の廃止

Vue2で大変お世話になったFilter機能がなんとVue3では廃止になります。実はNipoの中身はたくさんFilterを使っているので、この処理を別の方法に置き換えなければなりません。

filterは定義すればすぐにすべてのページで使いませたので非常に便利でした。

Vue3へ移行しないという選択肢は考えたくないので、Vue3のルールに従ってFilterを削除し、これに代替する処理を用意しなければなりません。

computedで置き換えるか、関数で置き換える必要があります。

Filterを関数で置き換える

今回はFilterの処理を関数に置き換えることで対応します。例えばMomentで日付の表示形式を書き換えるフィルター「longformat」はこれまでFilterで書かれていました。

Vue.filter('longformat', function (t) { return (!!t) ? '-' : moment(t).format('YYYY年MM月DD日(dddd)') })
様々な箇所で使っているので、関数化してFilterのときと同じように酷使できるようにします
[myfilters.ts]
export function longformat (t) { return (!!t) ? '-' : moment(t).format('YYYY年MM月DD日(dddd)') }

利用する箇所で importして、リターンしてあげれば使えるようになります。このあたりはVue3だとsetup()構文の中で全部書けるようなので、今後Vue3になるとこんな感じかな?

import { defineComponent } from '@vue/composition-api' // vue2でvue3っぽいことをするにはこれを使う
import { longformat } from 'components/myfilters.ts'

export default defineComponent({
  setup () {
    return {
      longformat // リターンするとtemplate内で利用できるようになる
    }
  }
})

 

$options.filters.フィルター名の修正も忘れずに

Filterは主にTemplateの中で利用してきましたが、稀にコード内で利用することもありました。例えばNipoはCSV出力時に日付形式を変換する際に使っていました。コード内でFilterを呼び出すには

this.$options.filters.longformat(day)

のように呼び出す必要がありました。(今見返すととても見にくいですね・・・)

今回、Filterを廃止したので、このごちゃごちゃした構文も

longformat(day)

こんな感じでただの関数として呼び出すだけで済むわけですね。

結論: VueのFilterは要らない

Filterは開発当時非常に便利で多用していましたが、改めてコードを見返すと結構見にくいものでした。特にコード内で利用するときとTemplate内で利用するときの記述方法が大きく異なるので、わかりにくいこと山のごとし。Vue3へ移行するにはどのみちFilterと永遠の別れをしなければなりませんので、これから新規に立ち上げるプロジェクトなんかではFilterを使わないほうが良さそうです。

 

シンプルに関数にしてしまったほうが良いですね。

 

ここまで読んでくれてありがとうございますっ
Nipoに興味を持ちましたか?すぐ始められますよ

個人情報の入力も無し。ワンクリックで体験アカウントで利用可能です。そのまま正式アカウントへ昇格もOK。Nipoが使えないと思ったらブラウザを閉じるだけです

開発者ブログ
あなたの「いいね」が明日への希望となりますので、助けると思ってぽちっとお願いします
クラウド日報 Nipo

コメント