JavaScriptでストップウォッチ & ピッチ計(ボート競技用)をつくった
目次
はじめに
JavaScriptの勉強をはじめた。
当面は基礎を学んでいずれはVue.jsを覚えたい。
目標はシングルページアプリケーション(SPA)をつくること。
今回はボート競技(ローイング)用のピッチ計をつくってみた。
ピッチ計とは
1分間あたりの動作回数を計るストップウォッチ。
ボート競技では1分間に漕ぐ回数を計測する。
今回のピッチ計は3ストローク(漕ぎ)で計測する仕様にした。
計算式
レート(ピッチ)の計算式は次のとおり。
1分 ÷ 3ストロークにかかった時間 × 3本
例
6秒で3ストロークの場合は1分で30ストロークになる。この場合のレートは30となる。
JavaScriptの時間単位はミリ秒なので次のような式になる。
60000 ÷ 6000 × 3 = 30
完成品
実際につくったものをFirebaseで公開した。
ローイングピッチ計
https://rowingtool.firebaseapp.com
コード
基礎のコードは次のとおり。
index.html
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>ローイングピッチ計</title> </head> <body> <div id="timer">00:00.000</div> <div id="rate">00.0</div> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> <script src="main.js"></script> </body> </html>
main.js
'use strict'; class StopWatch { constructor() { this.timer = document.getElementById('timer'); this.rate = document.getElementById('rate'); this.start = document.getElementById('start'); this.stop = document.getElementById('stop'); this.reset = document.getElementById('reset'); } countUp() { //共通変数の定義 let timer = this.timer; let rate = this.rate; let id; //setTimeout動作の代入用 let isRunning = false; //計測中か否かの状態 let rateUp; //スタートボタンを押したときの処理 this.start.addEventListener('click', function() { if (isRunning === false) { let startTime = Date.now(); let count = function() { //タイムカウント let countup = Date.now() - startTime; //00:00.000表示を作成する (function() { 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); timer.textContent = `${min}:${sec}.${msc}` })(); id = setTimeout(count, 10); // ピッチ計(1分当りのストローク数) // 3ストロークで計測 rateUp = (60000 / countup * 3).toFixed(1); rate.textContent = rateUp; }; //END count function count(); isRunning = true; } //END if isRunning }); //ストップボタンを押したときの処理 this.stop.addEventListener('click', function() { if (isRunning === true) { clearTimeout(id); isRunning = false; } }); //リセットボタンを押したときの処理 this.reset.addEventListener('click', function() { if (isRunning === false) { timer.textContent = '00:00.000'; rate.textContent = '00.0'; } }); } //END countUp method } let stopwatch = new StopWatch(); stopwatch.countUp();
コードを書いた感想
変数と関数の扱いが難しい。
前後に行ったり来たりできるので混乱する。
Vue.jsで書きかえ
Vue.jsを使って書きかえてみた。
Vue.jsでストップウォッチ & ピッチ計(ボート競技用)をつくった - ローイングファンの日記
動作確認
Google Chrome 71.0
Safari 12.0.2
Firebase CLI 6.1.2