JavaScript | 1 日 60 分 × 7 日アプリ学習：JavaScript基礎・DOM操作数当てゲーム編

JavaScript

2026.08.10

数当てゲーム 2日目：ヒント機能で「条件分岐」と「イベント」を強化する
今日の主な学習
数当てゲームの流れ（2日目）
HTML（昨日と同じ構造）
JavaScript の準備
イベントで判定処理を動かす
1. 深掘りポイント：条件分岐の正しい順番
2. 深掘りポイント：イベントが「繰り返し」の役割を果たす
入力チェックを追加する
1. 深掘りポイント：return の使い方
回数をカウントする（ゲーム性アップ）
1. 深掘りポイント：変数の役割
今日のまとめ
次のステップ
数当てゲーム 3日目：ゲーム終了処理とリセット機能で「イベント × 状態管理」を強化する
今日の主な学習
今日のゴール
HTML にリセットボタンを追加する
JavaScript の基本構造
1. 深掘りポイント：状態管理
正解したらゲームを終了する
1. 深掘りポイント：disabled の役割
リセット機能を作る
1. 深掘りポイント：状態と画面の両方を初期化する
イベントが「繰り返し」の役割を果たす
今日のまとめ
次のステップ
数当てゲーム 4日目：難易度設定で「イベント × 状態管理 × DOM操作」をさらに強化する
今日の主な学習
今日のゴール
HTML に難易度ボタンを追加する
JavaScript の基本構造
難易度ボタンのイベント処理
1. 深掘りポイント：関数化のメリット
判定処理（昨日までの機能）
リセット機能（難易度は維持）
1. 深掘りポイント：難易度は保持する
イベントが「繰り返し」の役割を果たす
今日のまとめ
次のステップ
数当てゲーム 5日目：入力履歴の表示で「繰り返し・イベント・DOM操作」を総合的に強化する
今日の主な学習
今日のゴール
HTML に履歴表示欄を追加する
JavaScript の準備
判定処理に「履歴追加」を組み込む
1. 深掘りポイント：配列は「記録の箱」
履歴を表示する関数（while を使う）
1. 深掘りポイント：while の役割
リセット時に履歴も消す
1. 深掘りポイント：状態と画面の両方を初期化
イベントが「繰り返し」の役割を果たす
今日のまとめ
次のステップ
数当てゲーム 6日目：メッセージ演出（色・強調）で「DOM操作 × イベント × 状態管理」を強化する
今日の主な学習
今日のゴール
HTML（昨日までと同じ構造）
CSS を追加して演出を作る
1. 深掘りポイント：CSS クラスを使うメリット
JavaScript の準備
判定処理に「色の演出」を追加する
1. 深掘りポイント：className の使い方
履歴表示（昨日の機能）
リセット時に見た目も初期化する
1. 深掘りポイント：状態と見た目の両方を初期化
イベントが「繰り返し」の役割を果たす
今日のまとめ
次のステップ
数当てゲーム 7日目：ゲーム全体の統合で「イベント × 状態管理 × DOM × 繰り返し」を完成させる
今日の主な学習
今日のゴール
HTML（最終形）
CSS（演出）
JavaScript（統合版）
1. 変数と初期設定
難易度設定（関数化）
1. 深掘りポイント：関数化のメリット
難易度ボタンのイベント
判定処理（演出・履歴・終了）
履歴表示（while を使う）
1. 深掘りポイント：while の役割
リセット処理
今日のまとめ
次のステップ

数当てゲーム 2日目：ヒント機能で「条件分岐」と「イベント」を強化する

2日目は、数当てゲームを一気に“ゲームらしく”する ヒント機能（大きい・小さい） を追加します。
この機能は JavaScript 初心者が必ず身につけるべき 条件分岐（if / else） と イベント処理 の理解を深める絶好の題材です。

昨日は「当たりか外れか」だけのシンプルな判定でしたが、今日は

入力した数字が答えより大きいか
小さいか
正解か
を判定して画面に表示します。

ゲームとしての面白さが一気に増し、JavaScript の基礎がさらに強固になります。

今日の主な学習

条件分岐：大きい・小さい・正解を判定
イベント：クリックで判定を実行
while の理解深化：イベントが「繰り返しの代わり」になる仕組み
DOM 操作：ヒントを画面に表示する

数当てゲームの流れ（2日目）

ランダムな答えを作る
ユーザーが数字を入力
ボタンを押す
条件分岐でヒントを表示
正解ならゲーム終了

HTML（昨日と同じ構造）

<input id="guessInput" type="number" placeholder="数字を入力">
<button id="guessBtn">判定する</button>

<div id="result"></div>

<input id="guessInput" type="number" placeholder="数字を入力">
<button id="guessBtn">判定する</button>

<div id="result"></div>

JavaScript

JavaScript の準備

まずは昨日と同じく、答えを作ります。

const answer = Math.floor(Math.random() * 10) + 1;

const answer = Math.floor(Math.random() * 10) + 1;

JavaScript

イベントで判定処理を動かす

クリックイベントの中で条件分岐を使います。

const input = document.getElementById("guessInput");
const btn = document.getElementById("guessBtn");
const result = document.getElementById("result");

btn.addEventListener("click", function() {
    const guess = Number(input.value); // 入力された数字を取得

    if (guess === answer) {
        result.textContent = "正解です！おめでとう！";
    } else if (guess < answer) {
        result.textContent = "もっと大きい数字です";
    } else {
        result.textContent = "もっと小さい数字です";
    }
});

const input = document.getElementById("guessInput");
const btn = document.getElementById("guessBtn");
const result = document.getElementById("result");

btn.addEventListener("click", function() {
    const guess = Number(input.value); // 入力された数字を取得

    if (guess === answer) {
        result.textContent = "正解です！おめでとう！";
    } else if (guess < answer) {
        result.textContent = "もっと大きい数字です";
    } else {
        result.textContent = "もっと小さい数字です";
    }
});

JavaScript

深掘りポイント：条件分岐の正しい順番

条件分岐は「順番」が非常に重要です。

正解かどうか
小さいかどうか
大きいかどうか

この順番で判定しないと、正解でも「もっと大きい数字です」と表示されるなど、誤動作が起きます。

深掘りポイント：イベントが「繰り返し」の役割を果たす

昨日学んだように、ブラウザでは while を使って繰り返すと画面が固まります。
その代わりに、ユーザーがボタンを押すたびに判定が行われるため、イベントが「繰り返しの代わり」になります。

while → プログラムが自動で繰り返す
イベント → ユーザーが繰り返す

この違いを理解すると、JavaScript の動きが一気に分かりやすくなります。

入力チェックを追加する

初心者がよくつまずくのが「空欄で判定してしまう」問題です。
これを防ぐために入力チェックを追加します。

btn.addEventListener("click", function() {
    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    if (guess === answer) {
        result.textContent = "正解です！";
    } else if (guess < answer) {
        result.textContent = "もっと大きい数字です";
    } else {
        result.textContent = "もっと小さい数字です";
    }
});

btn.addEventListener("click", function() {
    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    if (guess === answer) {
        result.textContent = "正解です！";
    } else if (guess < answer) {
        result.textContent = "もっと大きい数字です";
    } else {
        result.textContent = "もっと小さい数字です";
    }
});

JavaScript

深掘りポイント：return の使い方

return は「ここで処理を終わらせる」という意味です。
入力チェックでは非常に便利です。

回数をカウントする（ゲーム性アップ）

ゲームらしさを出すために、何回目の挑戦かを表示します。

let count = 0;

btn.addEventListener("click", function() {
    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    count++; // 回数を増やす

    if (guess === answer) {
        result.textContent = `${count}回目で正解！`;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
    }
});

let count = 0;

btn.addEventListener("click", function() {
    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    count++; // 回数を増やす

    if (guess === answer) {
        result.textContent = `${count}回目で正解！`;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
    }
});

JavaScript

深掘りポイント：変数の役割

count は「状態を記録する変数」です。
ゲーム開発では、状態を記録する変数が非常に重要になります。

今日のまとめ

2日目では、数当てゲームを一気にゲームらしくする ヒント機能 を追加しました。

条件分岐で「大きい・小さい・正解」を判定し
イベントで判定処理を動かし
DOM 操作で結果を表示し
入力チェックで誤動作を防ぎ
回数カウントでゲーム性を高めた

JavaScript の基礎である「イベント × 条件分岐 × DOM」がしっかり身につく内容です。

次のステップ

3日目は ゲームの終了処理（ボタン無効化・リセット機能） を作ります。
アプリとしての完成度が一気に高まります。

数当てゲーム 3日目：ゲーム終了処理とリセット機能で「イベント × 状態管理」を強化する

3日目は、数当てゲームを“完成形”へ近づけるための 終了処理 と リセット機能 を作ります。昨日までで「判定」「ヒント」「回数カウント」ができるようになりました。今日はそれらをまとめて、ゲームとしての流れをしっかり作ります。

数当てゲームはシンプルですが、

状態管理（ゲームが続いているか、終わったか）
イベントの制御（ボタンを無効化する）
DOM の更新（リセットで画面を初期化）といったアプリ開発の基礎がすべて詰まっています。

今日の主な学習

イベント：クリックイベントの制御
while：イベントが繰り返しの代わりになる仕組み
状態管理：ゲームが終了したかどうかを変数で管理
DOM 操作：ボタン無効化・リセット処理

今日のゴール

正解したらゲームを終了する
ボタンを無効化する
リセットボタンでゲームを再スタートできるようにする

HTML にリセットボタンを追加する

まずはリセットボタンを追加します。

<input id="guessInput" type="number" placeholder="数字を入力">
<button id="guessBtn">判定する</button>
<button id="resetBtn">リセット</button>

<div id="result"></div>

JavaScript の基本構造

昨日までのコードに「ゲーム終了状態」と「リセット処理」を追加します。

const answer = Math.floor(Math.random() * 10) + 1;

const input = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const resetBtn = document.getElementById("resetBtn");
const result = document.getElementById("result");

let count = 0;
let isFinished = false; // ゲームが終了したかどうか

const answer = Math.floor(Math.random() * 10) + 1;

const input = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const resetBtn = document.getElementById("resetBtn");
const result = document.getElementById("result");

let count = 0;
let isFinished = false; // ゲームが終了したかどうか

JavaScript

深掘りポイント：状態管理

isFinished は「ゲームが終わっているかどうか」を記録する変数です。アプリ開発では、このような状態管理が非常に重要になります。

正解したらゲームを終了する

クリックイベントの中で終了処理を追加します。

guessBtn.addEventListener("click", function() {
    if (isFinished) {
        return; // 終了後は何もしない
    }

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    count++;

    if (guess === answer) {
        result.textContent = `${count}回目で正解！ゲーム終了です`;
        isFinished = true;        // ゲーム終了
        guessBtn.disabled = true; // ボタンを無効化
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
    }
});

guessBtn.addEventListener("click", function() {
    if (isFinished) {
        return; // 終了後は何もしない
    }

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    count++;

    if (guess === answer) {
        result.textContent = `${count}回目で正解！ゲーム終了です`;
        isFinished = true;        // ゲーム終了
        guessBtn.disabled = true; // ボタンを無効化
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
    }
});

JavaScript

深掘りポイント：disabled の役割

guessBtn.disabled = true は「ボタンを押せなくする」という意味です。

ゲーム終了後に判定ボタンが押せてしまうと、ゲームの流れが壊れてしまうため、必ず無効化します。

リセット機能を作る

リセットボタンを押すと、ゲームを最初からやり直せるようにします。

resetBtn.addEventListener("click", function() {
    // 新しい答えを作る
    answer = Math.floor(Math.random() * 10) + 1;

    // 状態を初期化
    count = 0;
    isFinished = false;

    // 画面を初期化
    result.textContent = "";
    input.value = "";

    // ボタンを再び有効化
    guessBtn.disabled = false;
});

resetBtn.addEventListener("click", function() {
    // 新しい答えを作る
    answer = Math.floor(Math.random() * 10) + 1;

    // 状態を初期化
    count = 0;
    isFinished = false;

    // 画面を初期化
    result.textContent = "";
    input.value = "";

    // ボタンを再び有効化
    guessBtn.disabled = false;
});

JavaScript

深掘りポイント：状態と画面の両方を初期化する

リセットでは

変数（状態）
DOM（画面）の両方を初期化する必要があります。

どちらか片方だけだと、ゲームが正しく動きません。

イベントが「繰り返し」の役割を果たす

3日目で最も重要な理解ポイントはここです。

JavaScript のブラウザ環境では、 while を使って繰り返すのではなく、イベントが繰り返しの役割を果たす ということです。

ユーザーがボタンを押す
イベントが発火する
判定処理が実行される
またボタンを押す
またイベントが発火する

この流れが「繰り返し」そのものです。

今日のまとめ

3日目では、数当てゲームを“完成形”へ近づけるための終了処理とリセット機能を作りました。

正解したらゲームを終了し
ボタンを無効化して誤操作を防ぎ
状態管理でゲームの流れを制御し
リセットボタンでゲームを再スタートできるようにし
DOM 操作で画面を初期化し
イベントが繰り返しの役割を果たす仕組みを理解した

JavaScript の基礎である「イベント × 状態管理 × DOM」がしっかり身につく内容です。

次のステップ

4日目は ゲームの難易度設定（範囲変更） を作ります。ユーザーが「1〜10」「1〜50」「1〜100」などを選べるようになり、アプリとしての完成度がさらに高まります。

数当てゲーム 4日目：難易度設定で「イベント × 状態管理 × DOM操作」をさらに強化する

4日目は、数当てゲームを“本格的なゲーム”へ進化させる 難易度設定機能 を作ります。難易度設定は、ユーザーが「1〜10」「1〜50」「1〜100」などの範囲を選べるようにする機能です。この機能を追加することで、イベント処理・状態管理・DOM操作の理解がさらに深まり、アプリとしての完成度が一気に高まります。

難易度設定は初心者がつまずきやすい

状態の初期化
イベントの連携
DOM の更新
ランダム生成の仕組みをすべて使うため、学習効果が非常に高い内容です。

今日の主な学習

イベント：難易度ボタンのクリック処理
while：イベントが繰り返しの代わりになる仕組み
状態管理：難易度によって答えの範囲を変える
DOM 操作：難易度選択後に画面を更新する

今日のゴール

難易度ボタンを追加する
選んだ難易度に応じて答えの範囲を変更する
ゲーム開始時に状態を初期化する
難易度変更後にゲームを再スタートできるようにする

HTML に難易度ボタンを追加する

まずは難易度を選べるようにします。

<button id="easyBtn">1〜10</button>
<button id="normalBtn">1〜50</button>
<button id="hardBtn">1〜100</button>

<input id="guessInput" type="number" placeholder="数字を入力">
<button id="guessBtn">判定する</button>
<button id="resetBtn">リセット</button>

<div id="result"></div>

JavaScript の基本構造

難易度によって答えの範囲を変えられるようにします。

let maxNumber = 10; // 初期難易度は 1〜10
let answer = Math.floor(Math.random() * maxNumber) + 1;

const input = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const resetBtn = document.getElementById("resetBtn");
const result = document.getElementById("result");

const easyBtn = document.getElementById("easyBtn");
const normalBtn = document.getElementById("normalBtn");
const hardBtn = document.getElementById("hardBtn");

let count = 0;
let isFinished = false;

let maxNumber = 10; // 初期難易度は 1〜10
let answer = Math.floor(Math.random() * maxNumber) + 1;

const input = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const resetBtn = document.getElementById("resetBtn");
const result = document.getElementById("result");

const easyBtn = document.getElementById("easyBtn");
const normalBtn = document.getElementById("normalBtn");
const hardBtn = document.getElementById("hardBtn");

let count = 0;
let isFinished = false;

JavaScript

難易度ボタンのイベント処理

難易度を選ぶと、答えの範囲を変更し、ゲームを初期化します。

function setDifficulty(max) {
    maxNumber = max;
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;

    result.textContent = `難易度を ${maxNumber} に設定しました`;
    input.value = "";
    guessBtn.disabled = false;
}

easyBtn.addEventListener("click", function() {
    setDifficulty(10);
});

normalBtn.addEventListener("click", function() {
    setDifficulty(50);
});

hardBtn.addEventListener("click", function() {
    setDifficulty(100);
});

function setDifficulty(max) {
    maxNumber = max;
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;

    result.textContent = `難易度を ${maxNumber} に設定しました`;
    input.value = "";
    guessBtn.disabled = false;
}

easyBtn.addEventListener("click", function() {
    setDifficulty(10);
});

normalBtn.addEventListener("click", function() {
    setDifficulty(50);
});

hardBtn.addEventListener("click", function() {
    setDifficulty(100);
});

JavaScript

深掘りポイント：関数化のメリット

setDifficulty() にまとめることで

初期化処理
答えの再生成
DOM の更新が一度に行えます。

関数化はアプリ開発の基本であり、コードの見通しが大きく改善します。

判定処理（昨日までの機能）

難易度設定後も、判定処理は同じように動きます。

guessBtn.addEventListener("click", function() {
    if (isFinished) {
        return;
    }

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    count++;

    if (guess === answer) {
        result.textContent = `${count}回目で正解！ゲーム終了です`;
        isFinished = true;
        guessBtn.disabled = true;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
    }
});

guessBtn.addEventListener("click", function() {
    if (isFinished) {
        return;
    }

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    count++;

    if (guess === answer) {
        result.textContent = `${count}回目で正解！ゲーム終了です`;
        isFinished = true;
        guessBtn.disabled = true;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
    }
});

JavaScript

リセット機能（難易度は維持）

リセットでは難易度を変えずにゲームを初期化します。

resetBtn.addEventListener("click", function() {
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;

    result.textContent = "";
    input.value = "";

    guessBtn.disabled = false;
});

resetBtn.addEventListener("click", function() {
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;

    result.textContent = "";
    input.value = "";

    guessBtn.disabled = false;
});

JavaScript

深掘りポイント：難易度は保持する

リセットは「同じ難易度で再スタート」するため、 maxNumber は変更しません。

イベントが「繰り返し」の役割を果たす

難易度設定後も、ゲームの流れはイベントによって繰り返されます。

難易度ボタンを押す
判定ボタンを押す
リセットボタンを押す

これらのイベントがゲームの進行を作り、 JavaScript の「イベント駆動型」の特徴がよく理解できます。

今日のまとめ

4日目では、数当てゲームを本格的なゲームへ進化させる 難易度設定機能 を追加しました。

難易度ボタンで答えの範囲を変更し
状態管理でゲームの流れを制御し
DOM 操作で画面を更新し
関数化でコードを整理し
イベントが繰り返しの役割を果たす仕組みを理解した

JavaScript の基礎である「イベント × 状態管理 × DOM × 関数」がしっかり身につく内容です。

次のステップ

5日目は ゲームの履歴（過去の入力を表示） を作ります。ユーザーがどんな数字を入力したか一覧で見られるようになり、アプリとしての完成度がさらに高まります。

数当てゲーム 5日目：入力履歴の表示で「繰り返し・イベント・DOM操作」を総合的に強化する

5日目は、数当てゲームをさらに使いやすく、そして“ゲームらしく”するための 入力履歴（ログ）表示機能 を作ります。ユーザーがこれまでに入力した数字を一覧で確認できるようにすることで、ゲームの理解が深まり、アプリとしての完成度が一気に高まります。

履歴機能は、JavaScript 初心者が必ず身につけるべき

配列の扱い
繰り返し処理
DOM の動的生成
イベントとの連携をすべて使うため、学習効果が非常に高い内容です。

今日の主な学習

イベント：判定のたびに履歴を追加
while：履歴表示の繰り返し処理
配列：履歴を保存する
DOM 操作：履歴を画面に追加する

今日のゴール

入力した数字を配列に保存する
判定のたびに履歴を追加する
履歴を画面に表示する
リセット時に履歴を消す

HTML に履歴表示欄を追加する

履歴を表示するための領域を追加します。

<div id="history"></div>

JavaScript の準備

履歴を保存する配列を追加します。

let history = []; // 入力履歴を保存する配列

let history = []; // 入力履歴を保存する配列

JavaScript

判定処理に「履歴追加」を組み込む

判定ボタンが押されるたびに履歴を追加します。

guessBtn.addEventListener("click", function() {
    if (isFinished) {
        return;
    }

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    count++;

    // 履歴に追加
    history.push(guess);
    renderHistory(); // 履歴を表示

    if (guess === answer) {
        result.textContent = `${count}回目で正解！ゲーム終了です`;
        isFinished = true;
        guessBtn.disabled = true;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
    }
});

guessBtn.addEventListener("click", function() {
    if (isFinished) {
        return;
    }

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        return;
    }

    count++;

    // 履歴に追加
    history.push(guess);
    renderHistory(); // 履歴を表示

    if (guess === answer) {
        result.textContent = `${count}回目で正解！ゲーム終了です`;
        isFinished = true;
        guessBtn.disabled = true;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
    }
});

JavaScript

深掘りポイント：配列は「記録の箱」

履歴は「過去の入力を順番に保存する」ため、配列が最適です。ゲーム開発では、配列は必ず使う重要なデータ構造です。

履歴を表示する関数（while を使う）

履歴を画面に表示する処理を関数化します。

function renderHistory() {
    const historyDiv = document.getElementById("history");
    historyDiv.innerHTML = ""; // 一度リセット

    let i = 0;

    while (i < history.length) {
        const item = document.createElement("p");
        item.textContent = `${i + 1}回目：${history[i]}`;
        historyDiv.appendChild(item);
        i++;
    }
}

function renderHistory() {
    const historyDiv = document.getElementById("history");
    historyDiv.innerHTML = ""; // 一度リセット

    let i = 0;

    while (i < history.length) {
        const item = document.createElement("p");
        item.textContent = `${i + 1}回目：${history[i]}`;
        historyDiv.appendChild(item);
        i++;
    }
}

JavaScript

深掘りポイント：while の役割

履歴は「何件あるかわからない」ため、繰り返し処理が必須です。 while は

初期値
条件
更新の 3 要素で構成されるため、繰り返しの仕組みを理解するのに最適です。

リセット時に履歴も消す

リセットボタンで履歴を初期化します。

resetBtn.addEventListener("click", function() {
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;
    history = []; // 履歴を初期化

    result.textContent = "";
    input.value = "";
    guessBtn.disabled = false;

    renderHistory(); // 履歴表示をリセット
});

resetBtn.addEventListener("click", function() {
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;
    history = []; // 履歴を初期化

    result.textContent = "";
    input.value = "";
    guessBtn.disabled = false;

    renderHistory(); // 履歴表示をリセット
});

JavaScript

深掘りポイント：状態と画面の両方を初期化

履歴は配列の初期化だけではなく、 DOM の表示もリセットする必要があります。

イベントが「繰り返し」の役割を果たす

履歴機能でも、イベントが繰り返しの役割を果たします。

判定ボタンを押す → 履歴追加
リセットボタンを押す → 履歴初期化

JavaScript の「イベント駆動型」の特徴がさらに理解できます。

今日のまとめ

5日目では、数当てゲームをより使いやすくする 入力履歴表示機能 を追加しました。

履歴を配列で管理し
判定イベントで履歴を追加し
while で履歴を表示し
DOM 操作で画面に反映し
リセットで履歴を初期化し
イベントが繰り返しの役割を果たす仕組みを理解した

JavaScript の基礎である「イベント × 配列 × DOM × 繰り返し」がしっかり身につく内容です。

次のステップ

6日目は ゲームのメッセージ演出（色・強調） を追加します。 DOM のスタイル操作を学び、画面表現が一気に豊かになります。

数当てゲーム 6日目：メッセージ演出（色・強調）で「DOM操作 × イベント × 状態管理」を強化する

6日目は、数当てゲームを“見た目の面でも楽しいゲーム”へ進化させる メッセージ演出（色・強調） を追加します。これまでにゲームのロジックは完成しているので、今日は 画面表現を豊かにする DOM スタイル操作 を学びます。

JavaScript 初心者が必ず身につけるべき

DOM の style 操作
クラス付け替え
状態による見た目の変化
イベントとの連携を自然に使うため、学習効果が非常に高い内容です。

今日の主な学習

イベント：判定ごとに見た目を変える
while：イベントが繰り返しの代わりになる仕組み
DOM スタイル操作：色・サイズ・強調
クラス操作：CSS を使った演出

今日のゴール

正解時にメッセージを緑色で強調
不正解時に赤色で警告
ヒント（大きい・小さい）を色で区別
リセット時に見た目も初期化

HTML（昨日までと同じ構造）

<input id="guessInput" type="number" placeholder="数字を入力">
<button id="guessBtn">判定する</button>
<button id="resetBtn">リセット</button>

<div id="result"></div>
<div id="history"></div>

CSS を追加して演出を作る

JavaScript だけでも色変更はできますが、CSS を使うと管理が楽になります。

<style>
  .correct {
    color: green;
    font-weight: bold;
    font-size: 20px;
  }

  .wrong {
    color: red;
    font-weight: bold;
  }

  .hint {
    color: orange;
  }
</style>

深掘りポイント：CSS クラスを使うメリット

JavaScript のコードがスッキリする
見た目の変更を CSS に任せられる
演出の変更が簡単になる

JavaScript の準備

昨日までの変数に加えて、CSS クラスを付け替える処理を追加します。

let maxNumber = 10;
let answer = Math.floor(Math.random() * maxNumber) + 1;

const input = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const resetBtn = document.getElementById("resetBtn");
const result = document.getElementById("result");
const historyDiv = document.getElementById("history");

let count = 0;
let isFinished = false;
let history = [];

let maxNumber = 10;
let answer = Math.floor(Math.random() * maxNumber) + 1;

const input = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const resetBtn = document.getElementById("resetBtn");
const result = document.getElementById("result");
const historyDiv = document.getElementById("history");

let count = 0;
let isFinished = false;
let history = [];

JavaScript

判定処理に「色の演出」を追加する

guessBtn.addEventListener("click", function() {
    if (isFinished) {
        return;
    }

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        result.className = "wrong"; // 赤色で警告
        return;
    }

    count++;
    history.push(guess);
    renderHistory();

    // まずクラスをリセット
    result.className = "";

    if (guess === answer) {
        result.textContent = `${count}回目で正解！`;
        result.className = "correct"; // 緑色で強調
        isFinished = true;
        guessBtn.disabled = true;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
        result.className = "hint"; // オレンジでヒント
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
        result.className = "hint"; // オレンジでヒント
    }
});

guessBtn.addEventListener("click", function() {
    if (isFinished) {
        return;
    }

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        result.className = "wrong"; // 赤色で警告
        return;
    }

    count++;
    history.push(guess);
    renderHistory();

    // まずクラスをリセット
    result.className = "";

    if (guess === answer) {
        result.textContent = `${count}回目で正解！`;
        result.className = "correct"; // 緑色で強調
        isFinished = true;
        guessBtn.disabled = true;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
        result.className = "hint"; // オレンジでヒント
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
        result.className = "hint"; // オレンジでヒント
    }
});

JavaScript

深掘りポイント：className の使い方

result.className = "correct" のように書くと、 HTML の <div id="result"> に CSS クラスが付与されます。

これにより、JavaScript から簡単に見た目を変更できます。

履歴表示（昨日の機能）

function renderHistory() {
    historyDiv.innerHTML = "";

    let i = 0;
    while (i < history.length) {
        const item = document.createElement("p");
        item.textContent = `${i + 1}回目：${history[i]}`;
        historyDiv.appendChild(item);
        i++;
    }
}

function renderHistory() {
    historyDiv.innerHTML = "";

    let i = 0;
    while (i < history.length) {
        const item = document.createElement("p");
        item.textContent = `${i + 1}回目：${history[i]}`;
        historyDiv.appendChild(item);
        i++;
    }
}

JavaScript

リセット時に見た目も初期化する

resetBtn.addEventListener("click", function() {
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;
    history = [];

    result.textContent = "";
    result.className = ""; // 色をリセット
    input.value = "";
    guessBtn.disabled = false;

    renderHistory();
});

resetBtn.addEventListener("click", function() {
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;
    history = [];

    result.textContent = "";
    result.className = ""; // 色をリセット
    input.value = "";
    guessBtn.disabled = false;

    renderHistory();
});

JavaScript

深掘りポイント：状態と見た目の両方を初期化

リセットでは

変数
DOM の内容
CSS クラスすべてを初期化する必要があります。

イベントが「繰り返し」の役割を果たす

演出が追加されても、ゲームの流れはイベントによって繰り返されます。

判定ボタン → メッセージ表示
リセットボタン → 初期化
難易度ボタン（前日） → 再設定

JavaScript の「イベント駆動型」の特徴がさらに理解できます。

今日のまとめ

6日目では、数当てゲームを視覚的に楽しくする メッセージ演出（色・強調） を追加しました。

CSS クラスで見た目を管理し
判定ごとに色を変え
正解時は緑、ヒントはオレンジ、警告は赤
リセットで見た目も初期化し
DOM 操作 × 状態管理 × イベントの連携を理解した

JavaScript の基礎である「イベント × DOM × CSS × 状態管理」がしっかり身につく内容です。

次のステップ

7日目は ゲーム全体の統合（メニュー化・難易度選択・履歴・演出） を行い、 “完成版の数当てゲーム” を仕上げます。

数当てゲーム 7日目：ゲーム全体の統合で「イベント × 状態管理 × DOM × 繰り返し」を完成させる

7日目は、これまで学んできた 難易度設定・判定・ヒント・履歴・演出・リセット をひとつのアプリとしてまとめる「ゲーム全体の統合」を行います。ここまで来ると、初心者が 7 日間で作るミニゲームとしては十分すぎるほどの完成度です。

統合は、JavaScript の基礎である

イベント
状態管理
DOM 操作
繰り返し
関数化を総合的に使うため、学習の集大成となります。

今日の主な学習

イベント：複数のボタンを連携させる
while：履歴表示の繰り返し
状態管理：難易度・正解・終了状態・履歴
DOM 操作：画面全体の更新
関数化：処理を整理して読みやすくする

今日のゴール

ゲーム全体をひとつの流れとして統合する
難易度設定 → ゲーム開始 → 判定 → 履歴 → 終了 → リセット
コードを関数化して読みやすくする
初心者でも理解しやすい構造にする

HTML（最終形）

<button id="easyBtn">1〜10</button>
<button id="normalBtn">1〜50</button>
<button id="hardBtn">1〜100</button>

<input id="guessInput" type="number" placeholder="数字を入力">
<button id="guessBtn">判定する</button>
<button id="resetBtn">リセット</button>

<div id="result"></div>
<div id="history"></div>

CSS（演出）

<style>
  .correct { color: green; font-weight: bold; font-size: 20px; }
  .wrong { color: red; font-weight: bold; }
  .hint { color: orange; }
</style>

JavaScript（統合版）

ここからは、ゲーム全体をひとつの流れとしてまとめたコードを解説します。

変数と初期設定

let maxNumber = 10;
let answer = Math.floor(Math.random() * maxNumber) + 1;

let count = 0;
let isFinished = false;
let history = [];

const input = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const resetBtn = document.getElementById("resetBtn");
const result = document.getElementById("result");
const historyDiv = document.getElementById("history");

const easyBtn = document.getElementById("easyBtn");
const normalBtn = document.getElementById("normalBtn");
const hardBtn = document.getElementById("hardBtn");

let maxNumber = 10;
let answer = Math.floor(Math.random() * maxNumber) + 1;

let count = 0;
let isFinished = false;
let history = [];

const input = document.getElementById("guessInput");
const guessBtn = document.getElementById("guessBtn");
const resetBtn = document.getElementById("resetBtn");
const result = document.getElementById("result");
const historyDiv = document.getElementById("history");

const easyBtn = document.getElementById("easyBtn");
const normalBtn = document.getElementById("normalBtn");
const hardBtn = document.getElementById("hardBtn");

JavaScript

難易度設定（関数化）

function setDifficulty(max) {
    maxNumber = max;
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;
    history = [];

    result.textContent = `難易度を ${maxNumber} に設定しました`;
    result.className = "";
    input.value = "";
    guessBtn.disabled = false;

    renderHistory();
}

function setDifficulty(max) {
    maxNumber = max;
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;
    history = [];

    result.textContent = `難易度を ${maxNumber} に設定しました`;
    result.className = "";
    input.value = "";
    guessBtn.disabled = false;

    renderHistory();
}

JavaScript

深掘りポイント：関数化のメリット

難易度設定は複数の処理がまとまっているため、関数化することで

コードが読みやすくなる
再利用しやすくなる
バグが減る

アプリ開発では必ず使う重要な技術です。

難易度ボタンのイベント

easyBtn.addEventListener("click", () => setDifficulty(10));
normalBtn.addEventListener("click", () => setDifficulty(50));
hardBtn.addEventListener("click", () => setDifficulty(100));

easyBtn.addEventListener("click", () => setDifficulty(10));
normalBtn.addEventListener("click", () => setDifficulty(50));
hardBtn.addEventListener("click", () => setDifficulty(100));

JavaScript

判定処理（演出・履歴・終了）

guessBtn.addEventListener("click", function() {
    if (isFinished) return;

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        result.className = "wrong";
        return;
    }

    count++;
    history.push(guess);
    renderHistory();

    result.className = "";

    if (guess === answer) {
        result.textContent = `${count}回目で正解！`;
        result.className = "correct";
        isFinished = true;
        guessBtn.disabled = true;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
        result.className = "hint";
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
        result.className = "hint";
    }
});

guessBtn.addEventListener("click", function() {
    if (isFinished) return;

    const guess = Number(input.value);

    if (input.value === "") {
        result.textContent = "数字を入力してください";
        result.className = "wrong";
        return;
    }

    count++;
    history.push(guess);
    renderHistory();

    result.className = "";

    if (guess === answer) {
        result.textContent = `${count}回目で正解！`;
        result.className = "correct";
        isFinished = true;
        guessBtn.disabled = true;
    } else if (guess < answer) {
        result.textContent = `${count}回目：もっと大きい数字です`;
        result.className = "hint";
    } else {
        result.textContent = `${count}回目：もっと小さい数字です`;
        result.className = "hint";
    }
});

JavaScript

履歴表示（while を使う）

function renderHistory() {
    historyDiv.innerHTML = "";

    let i = 0;
    while (i < history.length) {
        const item = document.createElement("p");
        item.textContent = `${i + 1}回目：${history[i]}`;
        historyDiv.appendChild(item);
        i++;
    }
}

function renderHistory() {
    historyDiv.innerHTML = "";

    let i = 0;
    while (i < history.length) {
        const item = document.createElement("p");
        item.textContent = `${i + 1}回目：${history[i]}`;
        historyDiv.appendChild(item);
        i++;
    }
}

JavaScript

深掘りポイント：while の役割

履歴は「何件あるかわからない」ため、繰り返し処理が必須です。 while は繰り返しの仕組みを理解するのに最適です。

リセット処理

resetBtn.addEventListener("click", function() {
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;
    history = [];

    result.textContent = "";
    result.className = "";
    input.value = "";
    guessBtn.disabled = false;

    renderHistory();
});

resetBtn.addEventListener("click", function() {
    answer = Math.floor(Math.random() * maxNumber) + 1;

    count = 0;
    isFinished = false;
    history = [];

    result.textContent = "";
    result.className = "";
    input.value = "";
    guessBtn.disabled = false;

    renderHistory();
});

JavaScript

今日のまとめ

7日目では、数当てゲームのすべての機能を統合し、完成版として仕上げました。

難易度設定
判定処理
ヒント表示
履歴表示
色の演出
リセット機能
状態管理
DOM 操作
関数化
イベントによる繰り返し

JavaScript の基礎がすべて詰まった「ミニアプリの完成形」です。

次のステップ

数当てゲームを完成させたあなたは、次のステージへ進めます。

ローカルストレージ保存
タイマー機能
スコアランキング
画面デザインの強化

@lifehacker

挫折しないで楽しく学べるプログラミング。プログラミングを学ぶなら基礎から学べるMONO365 -LifeHack-。

これから IT 関連の知識を学ばれる方を対象に、色々な言語でのプログラミング方法や関連する技術、Web制作、例題や多くのサンプルコードで実践的な使い方などを、日本一詳しくわかりやすく解説するサイト。
更には、中級者や上級者が実務で使うプログラミングコードや考え方、設計手法、チーム開発、コードレビューなどの実践的な内容も学ぶことができます。

2026年8月
月	火	水	木	金	土	日
					1	2
3	4	5	6	7	8	9
10	11	12	13	14	15	16
17	18	19	20	21	22	23
24	25	26	27	28	29	30
31