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