Vue.jsのフィルターを徹底解説：基本の使い方からカスタムフィルターの作成方法まで

Vue.js のフィルターは、テンプレート内でデータをフォーマットするために使用される機能です。以下では、Vue.js のフィルターの基本的な使い方とカスタムフィルターの作成方法について説明します。

基本的なフィルターの使い方

Vue.js では、フィルターをテンプレート内で | （パイプ）シンボルを使って適用します。例えば、以下のように日付をフォーマットするフィルターを使用できます。

<span>{{ date | formatDate }}</span>

ここで formatDate はフィルターの名前で、date はテンプレートで使用するデータです。

フィルターの定義

フィルターは Vue インスタンスの中で定義できます。グローバルフィルターとローカルフィルターの二種類があります。

グローバルフィルター

グローバルフィルターは Vue インスタンス全体で使用可能です。以下のように定義します。

Vue.filter('formatDate', function(value) {
  if (!value) return ''
  value = value.toString()
  return value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
})

ローカルフィルター

ローカルフィルターは特定の Vue コンポーネント内でのみ使用可能です。以下のように定義します。

new Vue({
  el: '#app',
  data: {
    date: '20230613'
  },
  filters: {
    formatDate: function(value) {
      if (!value) return ''
      value = value.toString()
      return value.replace(/(\d{4})(\d{2})(\d{2})/, '$1-$2-$3')
    }
  }
})

フィルターの使用例

以下に、Vue.js テンプレート内でフィルターを使用する簡単な例を示します。

<div id="app">
  <p>{{ message | capitalize }}</p>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      message: 'hello world'
    },
    filters: {
      capitalize: function(value) {
        if (!value) return ''
        value = value.toString()
        return value.charAt(0).toUpperCase() + value.slice(1)
      }
    }
  })
</script>

この例では、message の最初の文字を大文字に変換する capitalize フィルターを使用しています。

注意点

1. Vue 3 の場合: Vue 3 ではフィルターは削除され、代わりにメソッドやコンピューテッドプロパティを使用してデータのフォーマットを行います。例えば、以下のように書き換えることができます。

const app = Vue.createApp({
  data() {
    return {
      message: 'hello world'
    }
  },
  computed: {
    capitalizedMessage() {
      return this.message.charAt(0).toUpperCase() + this.message.slice(1)
    }
  }
})

app.mount('#app')

テンプレート内では次のように使用します。

<p>{{ capitalizedMessage }}</p>

以上が、Vue.js のフィルターの基本的な使い方と Vue 3 における代替方法についての解説です。