JavaScriptを学び始めた初心者の方に向けて、今回はJavaScriptを使ったタイマーアプリを作成する方法をご紹介します。
タイマーアプリは、JavaScriptを使うことで簡単に実装できます。
この記事では、JavaScriptの基礎から始めて、手順を丁寧に解説していきますので、プログラミング初心者の方でも理解しやすい内容となっています。
ぜひ最後までご覧いただき、JavaScriptの基礎を身につけ、自分でアプリを作成する楽しみを感じてみてください。
タイマーアプリの概要
JavaScriptを使って、シンプルなタイマーアプリを作成していきましょう。
このタイマーアプリでは、HTML、CSS、JavaScriptを使用して作成します。
HTMLは、ページの構造を定義し、CSSはページの見た目を整え、JavaScriptはアプリの動作を制御します。
JavaScriptを使って、指定された時間を定期的に取得し、経過した時間を計算し、画面に表示することができます。
また、JavaScriptを使ってタイマーの動作を開始、停止、リセットすることもできます。
次の章では、HTMLの作成について説明していきます。
HTMLの作成
HTMLファイルを作成する前に、まずは目次で説明したファイル構成を作りましょう。
以下のようなフォルダー構成になります。
みなさんの端末に任意の作業用フォルダを作成して下記の３つのファイルを用意してください。
timer-app
│ index.html
│ script.js
│ style.css
では最初に、HTMLファイルの作成手順を説明します。
まずは、エディターを開いて以下のHTMLを記述してください。
<!DOCTYPE html>
<html>
<head>
<title>タイマー</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>タイマー</h1>
<p id="timer">00:00:00</p>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
<script src="script.js"></script>
</body>
</html>
このコードでは、HTMLの基本構造に従ってDOCTYPE宣言、HTMLタグ、headタグ、bodyタグを記述しています。
h1タグで「タイマー」という見出しを、pタグでタイマーの時間を表示するためのidを「timer」として定義しています。
また、3つのボタンにはそれぞれ id を割り当てています。
さらに、CSSを適用するために、下記のlinkタグをheadタグ内に追加しています。
これでHTMLファイルの作成は完了です。保存して、次に進みましょう。
<link rel="stylesheet" href="style.css">CSSの作成
次に、CSSファイルの作成方法について説明します。
CSSは、HTMLで作成したタグにスタイルを適用するための言語です。
HTMLの構造やレイアウト、色、フォントなどをカスタマイズすることができます。
まずは、style.cssという名前のファイルを作成します。そして、以下のコードをファイルに書き込みます。
body {
background-color: pink;
}
#timer {
border: 1px solid black;
padding: 10px;
font-size: 36px;
font-weight: bold;
text-align: center;
margin-bottom: 20px;
}
button {
font-size: 24px;
margin-right: 10px;
}
自分好みにいろいろを変えてみてください。
これらのスタイルを適用することで、タイマーアプリの見た目がより整ったものになります。
JavaScriptでタイマーの機能を実装する
では、最後にJavaScriptでタイマー機能を実装してみましょう。
エディタで次のコードを記述してみてください。
let seconds = 0;
let minutes = 0;
let hours = 0;
let intervalId;
function startTimer() {
intervalId = setInterval(updateTimer, 1000);
}
function stopTimer() {
clearInterval(intervalId);
}
function resetTimer() {
clearInterval(intervalId);
seconds = 0;
minutes = 0;
hours = 0;
document.getElementById("timer").innerText = "00:00:00";
}
function updateTimer() {
seconds++;
if (seconds === 60) {
minutes++;
seconds = 0;
}
if (minutes === 60) {
hours++;
minutes = 0;
}
const formattedSeconds = seconds.toString().padStart(2, "0");
const formattedMinutes = minutes.toString().padStart(2, "0");
const formattedHours = hours.toString().padStart(2, "0");
document.getElementById("timer").innerText = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
}
document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("reset").addEventListener("click", resetTimer);
では、JavaScriptのコーディングの説明をします。
7行目：setInterval()は指定した時間ごとに、指定した関数を繰り返し実行するためのJavaScriptの関数です。第1引数には実行する関数を指定し、第2引数にはその関数を実行する間隔（ミリ秒単位）を指定します。setInterval(updateTimer, 1000)と記述することにより、updateTimer関数を1秒(1000ミリ秒)ごとに繰り返し実行しています。つまり、startTimer関数が呼ばれたときに、setInterval(updateTimer, 1000)が実行され、updateTimer関数が1秒ごとに繰り返し実行されるようになります。
11行目：clearInterval()メソッドはJavaScriptメソッドの1つです。setInterval()とともに使用され、指定された間隔で繰り返される関数の実行を停止しています。
14行目：resetTimer()関数は、clearInterval()メソッドを使用して、タイマーを停止し、秒数、分数、時間数を0にリセットします。そして、document.getElementById(“timer”).innerTextプロパティを使用して、タイマーの表示をリセットしています。
22行目：updateTimer()関数は、毎秒呼び出されます。秒数をインクリメントし、分数や時間数が必要ならインクリメントします。そして、表示用の文字列を作成し、document.getElementById(“timer”).innerTextプロパティを使用して、タイマーの表示を更新します。
38行目：最後に、addEventListener()メソッドを使用して、スタート、ストップ、リセットボタンにクリックイベントを追加します。各ボタンがクリックされると、対応する関数が呼び出されます。
JavaScriptを使ってタイマー機能を実装する方法をご説明しました。
タイマーアプリの完成と動作確認
タイマーアプリを完成させるために、HTML、CSS、そしてJavaScriptのコードを組み合わせて、タイマーの機能を実装します。実装が完了したら、動作確認を行いましょう。
スタートボタン：タイマーがスタートする。
ストップボタン：タイマーがストップする。
リセットボタン：タイマーが初期表示される。
まとめ
今回の記事では、JavaScriptを使ってタイマーアプリを作成する手順を解説しました。HTMLとCSSを用いて、見た目を整え、JavaScriptでタイマーの機能を実装しました。
まだJavaScriptの基礎知識が定着していない方はぜひUdemyなどを使って学習してみてください。
