JavaScript

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

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

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

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ボタンを押した時間を引いた時間を定数dに格納
  const d=new Date(Date.now()-startTime);
  //String()は文字列に変換
  //d.getMinutes()で定数dに格納されている「分」の部分を取り出す
  //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ボタンを押した時間を引いた時間を定数dに格納します。

 

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

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

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

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

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

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

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

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

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

setTimeout()メゾットは、繰り返しを行う関数なので、上記の部分では、countUp()関数を10ミリ行ごとに繰り返し呼び出します。

 

以上の記述で、カウントアップを行うことができます。

【プログラミング初心者向け】JavaScriptでカウントアップを止める方法プログラミングでよく使う時間に関するコードですが、 この記事では、カウントアップしている時間を止める方法をプログラミング初心者にも...