【vue-moment】vueでtimer設定する方法

# 目次
・[vueでtimer設定をしたい](#vueでtimer設定をしたい)
・[timer設定するために必要なもの](#timer設定するために必要なもの)
・[vue-momentのインストール](#vue-momentのインストール)
・[vue-momentのtsファイル作成](#vue-momentのtsファイル作成)
・[moment.tsを読み込む](#momenttsを読み込む)
・[vueファイルでmomentを試してみる](#vueファイルでmomentを試してみる)
・[momentでtimer設定を試してみる](#momentでtimer設定を試してみる)

## vueでtimer設定をしたい
vueで一定期間表示する枠や時期が来たら表示または非表示にするためにタイマー設定をして実装したい場合ってありますよね？
実際、私はその事例に当たったので今回対応したことをお伝えしたいと思います。

## timer設定するために必要なもの
vueでtimer設定するために

```
vue-moment
```
を使用します。

vue-momentは、日付の解析・検証等をするライブラリで、
日付のフォーマットを「YYYY-MM-DD」に変更した場合や、日付の期間を検証するのに便利なメソッドが揃っています。
Vue.jsプロジェクトに便利なmoment.jsフィルターを提供してくれます。

## vue-momentのインストール

npm

```
$ npm install vue-moment
```

yarn

```
$ yarn add vue-moment
```

インストールが終わったら共通で使えるようにjsファイルを作成します。

## vue-momentのtsファイル作成

```src/plugins/moment.ts
import Vue from 'vue'
Vue.use(require('vue-moment'))
```

ファイルを作成したらnuxt.configで読み込んでおきましょう。

## moment.tsを読み込む

```nuxt.config.ts
plugins: [{ src: '~/plugins/moment.ts' }],
```
pluginsに先ほど作成したmoment.tsを読み込んでおきます。

ここまでできたらあとは、vue側での実装です。

## vueファイルでmomentを試してみる

```vue
<template>
    <p>
      {{ now }}
    </p>
    <p>
      {{ end }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$moment().format('YYYYMMDDHHmmss'),
      end: this.$moment().format('20200825150000'),
    }
  },
}
</script>
```
このようなファイルを作ると
nowは今の日時・時間・分・秒まで取得します。
今回はendとしてますが、表示を開始するなどの場合はstartなどにするといいと思います。
endには表示を終了する日時・時間・分・秒を設定しておきます。

この状態で上記を表示すると

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="miyawash" data-slug-hash="zYqZqLW" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue-moment">
  <span>See the Pen <a href="https://codepen.io/miyawash/pen/zYqZqLW">
  vue-moment</a> by miyawash (<a href="https://codepen.io/miyawash">@miyawash</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

これをベースにタイマー設定をしてみます。

## momentでtimer設定を試してみる

```vue
<template>
    <p>
      {{ now }}
    </p>
    <p>
      {{ end }}
    </p>
    <p v-if="now < end">まだ設定時間ではない</p>
    <p v-else>設定時間をすぎた</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      now: this.$moment().format('YYYYMMDDHHmmss'),
      end: this.$moment().format('20200825150000'),
    }
  },
}
</script>
```
このように実装すると設定時間までは
「まだ設定時間ではない」が表示され、設定時間後は「設定時間をすぎた」が表示される
これにより、設定時間までの表示や設定時間からの表示などができるようになりました！

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="js,result" data-user="miyawash" data-slug-hash="GRZWZLg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="vue-moment timer">
  <span>See the Pen <a href="https://codepen.io/miyawash/pen/GRZWZLg">
  vue-moment timer</a> by miyawash (<a href="https://codepen.io/miyawash">@miyawash</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>


参考資料
https://classic.yarnpkg.com/ja/package/vue-moment
https://www.npmjs.com/package/vue-moment
https://momentjs.com/
https://qiita.com/taizo/items/3a5505308ca2e303c099
https://blog.capilano-fw.com/?p=908#24_8_20