<commit_before>---
title: フィルター
updated: 2017-09-03
type: guide
order: 305
---

Vue.js では、一般的なテキストフォーマットを適用するために使用できるフィルタを定義できます。フィルタは、**mustache 展開と `v-bind` 式**、2 つの場所で使用できます(後者は2.1.0以降でサポートされています)。フィルタは JavaScript 式の末尾に追加する必要があります。これは "パイプ('|')" 記号で表されます。

``` html
<!-- mustaches -->
{{ message | capitalize }}

<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>
```

フィルタ関数は常に式の値(前のチェーンの結果)を第一引数として受け取ります。この例では、 `capitalize` フィルタ関数は引数として `message` の値を受け取ります。

``` js
new Vue({
  // ...
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
```

フィルタは連結できます:
<commit_msg>Clarify how to define filters (#442)<commit_after>---
title: フィルター
updated: 2017-11-13
type: guide
order: 305
---

Vue.js では、一般的なテキストフォーマットを適用するために使用できるフィルタを定義できます。フィルタは、**mustache 展開と `v-bind` 式**、2 つの場所で使用できます(後者は2.1.0以降でサポートされています)。フィルタは JavaScript 式の末尾に追加する必要があります。これは "パイプ('|')" 記号で表されます。

``` html
<!-- mustaches -->
{{ message | capitalize }}

<!-- v-bind -->
<div v-bind:id="rawId | formatId"></div>
```

コンポーネントのオプション内でローカルフィルタを定義できます:

``` js
filters: {
  capitalize: function (value) {
    if (!value) return ''
    value = value.toString()
    return value.charAt(0).toUpperCase() + value.slice(1)
  }
}
```

もしくはグローバルでフィルタを定義することもできます:

``` js
Vue.filter('capitalize', function (value) {
  if (!value) return ''
  value = value.toString()
  return value.charAt(0).toUpperCase() + value.slice(1)
})
```

フィルタ関数は常に式の値(前のチェーンの結果)を第一引数として受け取ります。この例では、 `capitalize` フィルタ関数は引数として `message` の値を受け取ります。

フィルタは連結できます:

{'fraction_non_alphanumeric': 0.17863720073664824, 'fraction_numerical': 0.02394106813996317, 'mean_word_length': 4.488215488215488, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5595462', 'n_tokens_mistral': 952, 'n_tokens_neox': 867, 'n_words': 113}