【初心者向け】JavaScriptでカウントアップを実装するコードを解説

プログラミングでは、時間に関する実装をよく行いますが、今回は、JavaScriptでストップウォッチのように、時間をカウントしていくコードについて紹介します。

この記事は、プログラミング初心者に向けて、1つ1つのコードをわかりやすく解説しています。

「最近、独学での学習に限界を感じてませんか？」

私もそうでしたが、正直、独学での学習は、非常に効率が悪いんですよね・・・

「本当に稼ぎたい！」「絶対に転職してやる！」っと思っているのであれば、しっかりとした講師から教えてもらうべきです。

プログラミンスクール大手のテックキャンプでは、ただいま無料でのカウンセリングを実施しています。
※いつまで実施しているかはわかりません。

ZOOMでのカウンセリングなので、無理な勧誘がありませんし、専門家が非常に親切になんでも相談に乗ってくれます。

無料で受けることができるので、もし、本気でプログラミンをやっていくなら、一度相談してみてくださいね！

JavaScriptでカウントアップするコード

まずは、全体のコードです。

index.htmlです。最低限のコードです。

startボタンを押すとtimer部分の時間がカウントアップしていきます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <!-- cssのリンク -->
  <link rel="stylesheet" href="style.css">
</head>

<body>
  <!-- タイマー部分 -->
  <div class="conteiner">
    <div id="timer">00:00,000</div>
    <div class="btn" id="start">start</div>
  </div>

  <!-- JavaScriptを呼び出し -->
  <script src="main.js"></script>

</body>

</html>

style.cssも必要最低限の記載。

.conteiner{
  margin: 2px auto;
  width: 270px;
  background-color:#fff;
  padding: 15px;
  text-align: center;
}

#timer{
  background-color: gray;
  font-size: 40px;
  height: 120px;
  line-height: 120px;
  margin-bottom: 15px;
}


.btn{
  width: 270px;
  height: 45px;
  line-height: 45px;
  background-color: #ddd;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
}

そしてJavaScriptのコードです。

 const timer = document.getElementById('timer');
 const start=document.getElementById("start");
 let startTime;

 //startボタンを押した時にイベントが起動
start.addEventListener('click', () => {
  startTime = Date.now();
  console.log(startTime);
  console.log(new Date(startTime))
  countUp();
});

//coutUp()関数の中身
 function countUp() {
  const d=new Date(Date.now()-startTime);
  const m=String(d.getMinutes()).padStart(2,"0");
  const s=String(d.getSeconds()).padStart(2,"0");
  const ms =String(d.getMilliseconds()).padStart(3,"0");
  timer.textContent = `${m}:${s},${ms}`;

  setTimeout(() => {
    countUp();
  }, 10);
}

以下でJavaScriptのコードを詳しく解説します。

JavaScriptでカウントアップするコードの解説

 //index.htmlのidを呼び出して定数に格納
 const timer = document.getElementById('timer');
 const start=document.getElementById("start");
 //開始時間の変数をセット
 let startTime;

それでは、JavaScriptの最初の部分ですが、ここでは、index.htmlで記述したidを呼び出しています。

今回は、index.htmlの「timer」と「start」のidを呼び出して、それぞれ定数（const）の「timer」と「start」に格納しています。
また、この後、startボタンを押した時の時間をセットする「startTime」も変数としてセットしておきます。

 //startボタンを押した時にイベントが起動
start.addEventListener('click', () => {
  //変数startTimeに現在の時間（Date.now()）を入れる
  startTime = Date.now();
  //関数countUp()を呼び出す
  countUp();
});

ここの記述で、上記で定数にセットした「start」のボタンを押す（click）とイベントが起動します。

addEventListener()メゾットは、指定されたイベントが行うたびに起動する関数で、今回の場合「start」ボタンが”click”させたら、アロー関数（()=>）の中のコードが呼び出されます。

Date.now()は、現在の時刻を呼び出すメゾットですので、上記でセットした変数

startTimeに現在の時刻を格納します。

countUp();は、下記で解説する関数（function)を呼び出しています。

 function countUp() {
  //現在の時間をからstartボタンを押した時間を引いた時間を定数ｄに格納
  const d=new Date(Date.now()-startTime);
  //String（）は文字列に変換
  //d.getMinutes()で定数ｄに格納されている「分」の部分を取り出す
  //padStart()で必要な桁数を指定
  const m=String(d.getMinutes()).padStart(2,"0");
  const s=String(d.getSeconds()).padStart(2,"0");
  const ms =String(d.getMilliseconds()).padStart(3,"0");
  //定数タイマーのテキストに上記で取り出した時間を表示
  timer.textContent = `${m}:${s},${ms}`;

  //setTimeout()で関数countUp()を10ミリ秒ごとに繰り返す。
  setTimeout(() => {
    countUp();
  }, 10);
 }

上記で呼び出されるcountUp()の中身です。

const d=new Date(Date.now()-startTime)の部分では、現在の時間をからstartボタンを押した時間を引いた時間を定数ｄに格納します。

  const m=String(d.getMinutes()).padStart(2,"0");
  const s=String(d.getSeconds()).padStart(2,"0");
  const ms =String(d.getMilliseconds()).padStart(3,"0");

ここの部分では、上記で定数ｄに格納した時間をそれぞれ、分(m)、秒(ｓ)、ミリ秒(ms)に格納しています。
String（）メゾットは、文字列に変換する関数で、d.getMinutes()を文字列に変換しています。

なぜ文字列にする必要があるかというと、padStart()メゾット関数が文字列でないと起動しないからです。

d.getMinutes()の部分は、定数ｄに格納されている時間の内、「分」の部分を取り出します。

d.getSeconds()とd.getMilliseconds()でも同様に「秒」と「ミリ秒」の部分を取り出しています。

padStart()メゾットで必要な桁数を指定します。

padStart(３,”0″)の場合、３桁が返され、返される文字列が3桁に満たない場合は、「０」で埋めて返してくれます。

timer.textContent = `${m}:${s},${ms}`では、上記で呼び出した時間を、index.htmlの「timer」idにテキストに記述します。