JavaScriptで簡単なWebアプリを作る方法

📌 目次

1. 作るアプリの概要 2. HTML＆CSSの実装 3. JavaScriptの処理 4. まとめ

1. 作るアプリの概要

今回は簡単なカウントダウンアプリを作ります。

このアプリでやりたいこと

2. HTML＆CSSの実装

Webアプリなので、ブラウザに表示させるためにHTMLとCSSを実装します。

index.html

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>App</title>
</head>
<body>
<header><h1>カウントダウンタイマー</h1></header>
<main></main>
<p id="time">00:01:00</p>
<button id="start">スタート</button>
<button id="stop">ストップ</button>
<button id="reset">リセット</button>
<p id="messeage"></p>
<footer>Copylight</footer>
</body>
</html>

3. JavaScriptの処理

では、JavaScriptを実装していきましょう。

コメントアウトで各コードの説明を書いておきます。

◼️ 実装したいコード

/* 変数を定義 */
let timer; // タイマーを格納する変数
let totalSeconds = 60; // 初期の秒数（60秒）
let running = false; // タイマーの動作状態
let messeage = " "; // メッセージの初期値

/* タイマーの表示を更新する関数 */
const updateDisplay = () => {
let minutes = Math.floor(totalSeconds / 60); // 分を計算
let seconds = totalSeconds % 60; // 秒を計算
messeage = " ";

if (totalSeconds === 30) {
messeage = "残り30秒!";
}else if (totalSeconds === 3) {
messeage = "残り3秒!";
}else if (totalSeconds === 2) {
messeage = "残り2秒!";
}else if (totalSeconds === 1) {
messeage = "残り1秒!";
}else if (totalSeconds === 0) {
messeage = "終了!";
}
document.getElementById('time').textContent =
`00:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
document.getElementById('messeage').textContent = messeage;
}
        
/* スタートボタンの処理 */
const startTimer = () => {
if (!running) { // タイマーが動いていないときのみ実行
running = true; // タイマーを開始状態にする
timer = setInterval(() => {
if (totalSeconds > 0) {
totalSeconds--; // 1秒減らす
updateDisplay(); // 表示を更新
} else {
clearInterval(timer); // タイマーを停止
running = false; // 停止状態にする
}
}, 1000); // 1000ミリ秒（1秒）ごとに実行
}
}
        
/* ストップボタンの処理 */
const stopTimer = () => {
clearInterval(timer); // タイマーを停止
running = false; // 停止状態にする
}
        
/* リセットボタンの処理 */
const resetTimer = () => {
clearInterval(timer); // タイマーを停止
totalSeconds = 60; // 秒数を初期値に戻す
running = false; // 停止状態にする
updateDisplay(); // 表示を更新
}
        
/* 各ボタンのクリックイベントを設定 */
document.getElementById("start").addEventListener("click", startTimer);
document.getElementById("stop").addEventListener("click", stopTimer);
document.getElementById("reset").addEventListener("click", resetTimer);
        
/* 初回の表示を更新 */
updateDisplay();

4. まとめ

以上でカウントダウンタイマーアプリが完成しました！

まずは見たまんまコードを書いて、色々なことを試してみましょう。

MDNのチュートリアルもおすすめです。

MDN Web Docs - JavaScriptチュートリアル

お疲れ様でした。