Vue2からVue3への移行-Filterの廃止を修正
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のときと同じように酷使できるようにします
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を使わないほうが良さそうです。
シンプルに関数にしてしまったほうが良いですね。