Vue.jsでストップウォッチを作ってみました。

概要

遊びで、時計みたいなものをプログラミングしてみたいと考えました。
砂時計みたいなタイマーを作りたいと最初思いましたが、とりあえずはストップウォッチを開発することで決定！
目標は正確な時間を数えることにしました。

工夫したことです。

• 時間を数えるために、例えば時間を1ミリ秒ずつ足していくと、処理自体にかかる時間のせいで時間が合わなくなってしまうのではないかと考えました。
  • そうでした。単純に足し算して時間を数えると、時間がずれてしまいました。
  • それで考えたのが、JavaScriptのライブラリから現時刻を取得して、スタート時刻と比較して、どのぐらい時間が過ぎているか計算する方法です。
    • ネットで調べたら、既にこういう考え方で実装をしたソースコードをいくつか見つけました。
    • 気に入るものが見つからず、自ら考えてアルゴリズムを組むことにしました。

ソースコードです。

<template>
    <table>
        <thead>
            <tr>
                <td colspan="2"><h1> {{ getTimeStr() }} </h1></td>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>
                    <button v-if="status !== 'start'" @click="start()">スタート</button>
                    <button v-else @click="stop()">ストップ</button>
                </td>
                <td>
                    <button @click="reset()">リセット</button>
                </td>
            </tr>
        </tbody>
    </table>
</template>

<script>
export default {
    data () {
        return {
            status: "clear",
            time: 0,
            startTime: null,
            stopTime: 0
        }
    },
    methods: {
        start() {
            this.status = "start"
            
            if (this.startTime === null) {
                this.startTime = Date.now()
            }

            const checkTime = () => {
                this.time = Date.now() - this.startTime + this.stopTime
            }
            this.timer = setInterval(checkTime, 10);
        },
        stop() {
            if (this.timer) {
                clearInterval(this.timer);
            }

            this.status = "stop"
            this.startTime = null
            this.stopTime = this.time
        },
        reset() {
            this.stop()
            this.status = "clear"
            this.time = 0
            this.startTime = null
            this.stopTime = 0
        },
        getTimeStr() {
            // this.time is milliseconds
            // 1秒 = 1000ミリ秒
            // 1分 = 60 * 1000ミリ秒
            // 1時間 = 60 * 60 * 1000ミリ秒
            let milliseconds = this.time % 1000
            let seconds = Math.floor((this.time / 1000) % 60)
            let minutes = Math.floor((this.time / (60 * 1000)) % 60)
            let hours = Math.floor(this.time / (60 * 60 * 1000))

            let millisecondsMultiplyTen = Math.floor(milliseconds / 10)

            millisecondsMultiplyTen = ("0" + millisecondsMultiplyTen).slice(-2)
            seconds = ("0" + seconds).slice(-2)
            minutes = ("0" + minutes).slice(-2)
            hours = hours < 100 ? ("0" + hours).slice(-2) : hours

            return `${hours}:${minutes}:${seconds}.${millisecondsMultiplyTen}`
        }
    }
}
</script>

スクリンショット