hukurouo.com 🦉

2020-10-03 :

Nuxtでストップウォッチ（タイマー）を作る


Vue.js&Nuxt.js超入門 を読みました。

アウトプットとして、タイムトラッキング機能のあるシンプルなタスク管理ツールを作ろうと思います。

ということで、まずはタイマーを作っていきましょう。

pages/index.vue
data () {
    return {
      sec: 0,
      timerOn: false,
      timerObj: null,
    }
},
methods: {
    count: function() {
      this.sec += 1
    },

    start: function() {
      var self = this;
      this.timerObj = setInterval(function() {self.count()}, 1000)
      this.timerOn = true; 
    },

    stop: function() {
      // ここにタイムを保存する処理を書く
      this.sec = 0
      clearInterval(this.timerObj);
      this.timerOn = false; 
    },

使用する関数はこんな感じ。時間は秒数で保持しておき、表示する際にHH:MM:SS表記に直します。

1秒ごとにインクリメントしていくtimerObjを用意してあげるのが肝ですね。timeOnはタイマーのスタートボタンとストップボタンを切り替えるのに用います。

template部を書いてあげて、

pages/index.vue
  <div>
    {{ formatTime }}
    <br>
    <b-button @click="start" v-if="!timerOn">start</b-button>
    <b-button @click="stop" v-if="timerOn">stop</b-button>
  </div>

秒をHH:MM:SS表記に直す処理は汎用性があるので、mixinに書いていきます。

pages/index.vue
computed: {
    formatTime: function() {
      return this.SecToTime(this.sec)
    },
  },
plugins/mixin-common-methods.js
import Vue from 'vue'

Vue.mixin({
  methods: {
    SecToTime: function(rawsec){
      var sec = String((rawsec % 60)%60)
      if (sec.length == 1){sec = "0" + sec}
      var min = String(Math.floor(rawsec / 60) % 60)
      if (min.length == 1){min = "0" + min}
      var hour = String(Math.floor(rawsec / 3600))
      if (hour.length == 1){hour = "0" + hour}
      var time = hour + ":" + min + ":" + sec
      return time
    },
  },
})

これにて完成です。

あとはタスク管理機能とうまく組み合わせていきたいと思います。

https://tasktimex.web.app/

https://github.com/hukurouo/tasktime

今はこんな感じ。Buefyを初めて使ってみましたが、マテリアル度が高くてよいですね。