ローイングファンのプログラミング日記

ボート競技やプログラミングについて書きます

Vue.jsでストップウォッチ & ピッチ計(ボート競技用)をつくった

目次


Vue.js

Vue.jsはユーザーインターフェイスを構築するためのフレームワーク
Vue.jsを使うにはJavaScriptの知識が必要。

Vue.js公式ページ
https://jp.vuejs.org/


コード

前回書いたコードをVue.jsを使って書きかえた。

前回の記事
JavaScriptでストップウォッチ & ピッチ計(ボート競技用)をつくった https://rowingfan.hatenablog.jp/entry/2018/12/16/174428

今回Vue.jsを使って書いたコードは以下。
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
   <meta charset="utf-8" />
   <title>ローイングピッチ計 Vue.js版</title>
</head>
<body>
    <div id="app">
        <p>{{ time }}</p>
        <p>{{ rate }}</p>
        <button v-on:click="countUp">{{ startBtn }}</button>
        <button v-on:click="timerStop">{{ stopBtn }}</button>
        <button v-on:click="timerReset">{{ resetBtn }}</button>
    </div>
    <!-- Vue.js CDN -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- JavaScript -->
    <script src="main.js"></script>
</body>
</html>


main.js

let id; //setTimeout動作の代入用
let isRunning = false; //計測中か否かの状態

// Vueインスタンスの作成
new Vue({
    el: '#app',

    data: {
        time: '00:00.000',
        rate: '00.0',
        startBtn: 'Start',
        stopBtn: 'Stop',
        resetBtn: 'Reset'
    },
    
    methods: {
        // Startボタンを押したときの処理
        countUp: function() {
            if (isRunning === false) {
                let vm = this;
                let startTime = Date.now();
                let count;
                
                count = function() {
                    let countup = Date.now() - startTime;
                    console.log(countup);
                    let min = Math.floor(countup / 60000);
                    let sec = Math.floor(countup % 60000 / 1000);
                    let msc = countup % 1000;

                    min = ('0'  + min).slice(-2);
                    sec = ('0'  + sec).slice(-2);
                    msc = ('00' + msc).slice(-3);
                    vm.time = `${min}:${sec}.${msc}`;

                    rateUp = (60000 / countup * 3).toFixed(1);
                    vm.rate = rateUp;
                    
                    id = setTimeout(count, 10);
                }
                count();
                isRunning = true;
            } // if (isRunning === false) 
        },

        // Stopボタンを押したときの処理
        timerStop: function() {
            if (isRunning === true) {
                clearTimeout(id);
                isRunning = false;
            }
        },

        // Resetボタンを押したときの処理
        timerReset: function() {
            if (isRunning === false) {
                this.time = '00:00.000'
                this.rate = '00.0'
            }
        }
    } // methods:
})


コードを書いた感想

前回のコードと概ね同じで動いた。
全体的にこれでいいのか?
setTimeoutの変数を定義する位置で悩んだ。
今回の規模ではVue.jsのメリットを感じないけれどメソッドの使い回しとかは便利そう。

今回の動作確認

Google Chrome 71.0
Safari 12.0.2