【Nuxt.js】filter実践編：数字3桁ごとにカンマを入れよう！

# 前置き

![ random.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/fefb7d08-a501-cb63-90df-72549f8a032f.gif)
テキストの変換処理ができるfilter🌟
computedやmethodsでも
同じことはできますが毎回作るのは面倒。
そんな時に便利なfilterです♪

今回は基本的な使い方と、
代表的な使用例をやっていきます🍒
・使い方：ローカルver
・使い方：グローバルver
・使用例：代表的な数字3桁ごとにカンマ
・使用例：絞り込み検索

**【覚えること】**
・基礎文法
・引数に必ずvalueがくる

# 使い方：ローカルver

テキストを全て大文字にします💡
<img width="620" alt="スクリーンショット 2020-01-08 12.36.11.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/d45f7b83-f857-dc30-6d32-353fcfed2691.png">

【基礎文法】
該当ファイルのexport default内

```index.vue
<script>
export default {
 filters: {
   フィルタ名(value) {
     // 処理
   }
 },
}
</script>
```

【index.vue】
{{ }} Mustache構文内に
filter名をパイプ記号( | )で繋げる

```index.vue
<template>
 <div class="page">
　　// filter名toUppercaseを|で繋げる
   <p>{{ text | toUppercase }}</p>
 </div>
</template>

<script>
export default {
 data () {
   return {
     text: 'Hello Nuxt.js!',
   }
 },
 filters: {
   toUppercase(value) {
     return value.toUpperCase();
   }
 },
}
</script>

<style lang="scss" scoped>
</style>
```

# 使い方：グローバルver

テキストを全て小文字にします💡
<img width="620" alt="スクリーンショット 2020-01-08 12.40.22.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/ac49e0f3-e16b-2590-46f4-224aeee0f203.png">
【基礎文法】
jsファイル内に記載

```bash:js
Vue.filter('フィルタ名', function(value) {
  //処理
});
```

【plugins/filter.js】

```plugins/filter.js
import Vue from 'vue'

Vue.filter('toLowercase', function (value) {
 return value.toLowerCase();
})
```

【nuxt.config.js】

```nuxt.config.js
export default {
 plugins: [
   '~/plugins/filter.js'
 ],
}
```

【index.vue】

```index.vue
<template>
 <div class="page">
   <p>{{ text | toLowercase }}</p>
 </div>
</template>

<script>
export default {
 data () {
   return {
     text: 'HELLO NUXT.JS!',
   }
 },
}
</script>

<style lang="scss" scoped>
</style>
```

✴️ちなみに連結して繋げるのもOK！
textが大文字小文字があっても…
・toUppercase()で全て大文字に変換
・toLowercaseで全て小文字に変換
最終的に全て小文字になります〜！

{{ text | toUppercase | toLowercase }}

# 使用例：数字の3桁ごとにカンマ
![ random.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/390e1673-c7e5-a581-6c9e-3f901f884ba9.gif)

filterの代表的な使用例ですね。
ついでにランダムで整数を表示させます。
乱数は10桁以上の数値にしました🌟

**◾️方法1**
toLocaleString()関数が簡単🤗

【plugins/filter.js】

```plugins/filter.js
import Vue from 'vue'

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

【nuxt.config.js】

```nuxt.config.js
export default {
 plugins: [
   '~/plugins/filter.js'
 ],
}
```

【index.vue】

```index.vue
<template>
 <div class="page">
   {{ number | addComma }}
 </div>
</template>

<script>
export default {
 data () {
   var min = 1000000000;
   var max = 10000000000;
   var number = Math.max(Math.floor(Math.random() * max) + 1, min);
   console.log(number);
   return {
     number,
   }
 },
}
</script>

<style lang="scss" scoped>
</style>
```

**◾️方法2**
正規表現でやる場合🤗
filer.jsを書き換えます！

```plugins/filter.js
// 変更前
return value.toLocaleString();

// 変更後
return value.toString().replace(/(\d)(?=(\d{3})+$)/g, '$1,');
```

**・toString()関数**
　数値を文字列と認識して桁数を把握。
**・replace()関数**
　文字列を()内の正規表現に置き換え。
**・/(\d)(?=(\d{3})+$)/g, '$1,'**
　構造は…

>/(fuga)(?=(hoge))/

こちらの記事で解説されております！
https://qiita.com/ariyo13/items/ab410a84c74b23099648

# 使用例：絞り込み検索

【index.vue】
![search.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/469755/81aa4b32-f720-f67f-757a-96580b4f7f49.gif)

データ更新の必要がないため
methodsではなくcomputedに記載します🌟

v-modelを使って表示させるため
{{ }} Mustache構文内に
filter名を繋げる必要はありません！

```index.vue
<template>
<div class="page">
  <input v-model="text">
  <ul>
    <li
      v-for="vegetables in filteredVegetables"
      :key="vegetables"
    >
      {{ vegetables }}
    </li>
  </ul>
</div>
</template>

<script>
export default {
data () {
  return {
    vegetables: ['pumpkin', 'cabbage', 'cucumber', 'potato'],
    text: '',
  }
},
computed: {
  filteredVegetables() {
    return this.vegetables.filter((element) => {
      return element.match(this.text);
    });
  }
},
}
</script>

<style lang="scss" scoped>
</style>
```


**このアカウントでは
Nuxt.js、Vue.jsを誰でも分かるよう、
超簡単に解説しています🎈😀
これからも発信していくので、
ぜひフォローしてください♪**
https://twitter.com/aLizlab