🐡

JavaScriptでタイマーアプリ制作

2021/12/05に公開

JavaScript

tech

JavaScriptで簡単なタイマーアプリを制作しました。そのときに悩んだこと、うまくいかなかったことを思い出しながら書きました。

1.タイマーアプリの見た目

StartとStopの2つのボタンとタイマー表示のみのシンプルな外観にした。
また、ボタンはBootstrapを使い実装しようとした。

上の画像は実際に作ったタイマーアプリ

2.実装したい機能

タイマーを制作するにあたり、どのような機能を実装するか決めた。

StartボタンとStopボタンの2つのボタンを用意する。初期状態ではStopボタンは押せないようにする。
Startボタンを押すとタイマーが起動し、0からカウントアップを開始する。
Startボタンを押すとStartボタンを無効化し、Stopボタンを有効化する。
４. Stopボタンを押すとタイマーが停止する。
Stopボタンを押すとStopボタンを無効化し、Startボタンしか押せないようにする。
タイマーが停止した後Startボタンを押すとタイマーをリセットし、0からカウントアップを開始する。
タイマー部分の表示はhh:mm:ss。

3.タイマーアプリの設計

上記の機能を実装するにあたり、具体的にどうすれば実装できるか考えた。

.disabledを使えばボタンを無効化することができそうだ。
addEventListner('click',中略)を使うことで、Startボタンを押したらカウントアップを開始できそうだ。カウントアップ部は繰り返し動作setInterval()を使えば実装できそうだ。
addEventListner('click',中略)と.disabledを組み合わせることで、Startボタン押したらStartボタンを無効化しStopボタンを有効化できそうだ。
clearIntervalを使えばsetInterval()の繰り返し動作を停止できそうだ。
3.と同じ要領で実装できると考えた。
当時は何も思いつきませんでした（照）。結果としてはclearIntervalで繰り返し動作を停止する際にリセットされた。
数値が1桁のときは10の位に0を付け足したい。if(value < 10){value = "0" + n;}で実装できそうだ。

4.カウントアップ機能の設計

最初は繰り返し動作で1000ms毎に1を足していけばタイマーになると思い、実際にそれを作った。しかし調べていくうちにカウントアップタイマーはDateオブジェクトを使うことがわかったので、まずはDateオブジェクトについて調べることにした。

Dateオブジェクトの詳細（Mozilla/MDN Web Docsより）

Date.now()Startボタンを押した時点での現在時刻を取得し、setInterval()を用いた繰り返し動作で取得した現在時刻からStartボタンを押した時点での時刻を引けば経過時間を求められると考え、この方法でやってみることにした。

5.実際のコードと簡単な解説

つまずいた部分はコメントで簡単な解説を書いた。

html

<!DOCTYPE html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
        <link rel="stylesheet" href="main.css">
    </head>
    <body>
        <header>
        </header>
        <article>
            <div class="container-fluid">
                <p class="def_timer">00:00:00</p>
                    <button type="button" class="btn btn-primary">Start</button>
                    <!--classは複数指定できる。上の場合btnとbtn-primary-->                
                    <button type="button" class="btn btn-danger">Stop</button>
            </div>
            <script src="main2.js"></script>
        </article>
    </body>
</html>

css

.container-fluid{
    text-align: center;
}

javascript

let start_button = document.querySelector('.btn-primary');
let stop_button = document.querySelector('.btn-danger');
let def_timer = document.querySelector('.def_timer');
let start_time;
let el_time;
let timer_id;

stop_button.disabled = true;
//Stopボタンを無効化する

start_button.addEventListener('click',()=>{
    //timer_buttonをクリックしたときは以下の挙動をする
    start_time = Date.now();
    //ボタンを押したときの現在時刻を取得
    start_button.disabled = true;
    stop_button.disabled = false;
    timer_id = setInterval(go_timer,10);
    })

stop_button.addEventListener('click',()=>{
    start_button.disabled = false;
    stop_button.disabled = true;
    clearInterval(timer_id);
})

function add_zero(value){
    if(value < 10){
        value = "0" + value;
    }
        return value;
}
//1桁のときに10の位に文字列の"0"を足す関数

function arrange_time(){
    let sec = Math.floor(el_time % 60000 / 1000);
    //商の余りを使うことで60を超えたら自動的に0になる
    let min = Math.floor(el_time % 3600000 / 60000);
    let hour = Math.floor(el_time / 3600000);

    sec = add_zero(sec);
    //上で作ったadd_zeroのvalueにsecを入れたものをsecに入れた
    min = add_zero(min);
    hour = add_zero(hour);

    def_timer.innerHTML = `${hour}:${min}:${sec}`;
    //html内にあるdef_timerを書き換える
}

let go_timer = ()=>{
    let time_now = Date.now();
    el_time = time_now - start_time;
    arrange_time();
}

6.まとめ

そんなこんなで簡易的ではありますがタイマーアプリが完成しました。そのうちこのアプリにラップタイムや一時停止の機能を追加していきたいです。
初めてのJavaScriptを使ったアプリ制作だったので数えきれないほどつまずきましたが、アプリ制作の組み立て方やMDNが多少読めるようになった等いい経験になりました。
こういった記事の制作は初めてだったので至らぬ点があるとは思いますが、記事を書くことで復習にもなりました。
また何かしら制作したときはこのようなアウトプット記事を書けたらいいなと思います。