少し学んだ人向け！JavaScriptで作る足し算クイズアプリ

本記事では、足し算クイズアプリの作り方を解説します。
HTML・CSS・JavaScriptの基本に少し触れたことがある方向けで、画面の構成や動作を順に説明しています。
内容には初心者には少し難しい部分も含まれており、完全な初心者がすぐに理解するのは難しいかもしれません。コードを見ながら手を動かすことで、少しずつ理解を深めていく形式です。

足し算クイズアプリを使ってみよう

「スタート」ボタンを押すと問題が表示されます。
答えを入力して送信します。
正解するとスコアが1点増えます。
「次の問題」ボタンを押すと、新しい問題が出題されます。
間違えるとゲームが終了し、「もう一回」ボタンを押すと最初の画面に戻ります。

HTMLで画面の骨組みを作る

ここからは、足し算クイズアプリの作り方を解説していきます。
まずは、HTMLからチェックしましょう。

HTML

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>足し算クイズ</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <div class="wrap">
      <h1>足し算クイズ</h1>
      <button type="button" class="startBtn">スタート</button>

      <div class="quizWrap hide">
        <p class="scoreArea"></p>
        <div class="quizArea">
          <div class="questionArea"></div>
          <div class="formArea">
            <form>
              <div class="inputArea">
                <input
                  type="number"
                  class="inputNumber"
                  name="inputNumber"
                  autocomplete="off"
                  placeholder="答えを入力"
                  min="2"
                  max="198"
                  required />
                <button type="submit" class="submitBtn">OK</button>
              </div>
            </form>
          </div>
        </div>
      </div>

      <div class="judgeArea hide">
        <div class="msgArea">
          <p class="judgeMsg"></p>
          <p class="answerMsg"></p>
        </div>
        <button type="button" class="nextBtn">次の問題</button>
      </div>
    </div>
    <script src="./app.js"></script>
  </body>
</html>

このHTMLは、画面構成がシンプルで、ユーザーがボタン操作と入力フォームを使って進める形式のクイズアプリです。見た目としては「スタート → 問題表示 → 回答 → 正誤判定 → 次へ」という流れになるように設計されています。

内容を大きく分けると、次の3つのブロック構成です。

スタート画面
クイズ表示エリア
正誤判定エリア（回答後に表示）

それぞれ簡潔に説明します。

1. startBtn（スタートボタン）

<button type="button" class="startBtn">スタート</button>

最初に表示されるボタンで、JavaScript側でクリックイベントを受け取る役割です。type="button" を付けているので、フォーム送信などの副作用がありません。

2. .quizWrap（クイズ表示部分）

<div class="quizWrap hide">

最初は hide クラスが付いていて非表示です。スタートボタンを押すと表示されます。

内部には、次の要素がまとめられています。

得点表示 (scoreArea)
問題文 (questionArea)
回答フォーム (formArea)

3. フォーム部分（重要）

<form>
  <div class="inputArea">
    <input type="number" ... required />
    <button type="submit" class="submitBtn">OK</button>
  </div>
</form>

ここがユーザーが回答を入力する機能です。

ポイント：

type="number" で数値入力専用
name="inputNumber" は入力値の識別用
autocomplete="off" で入力補完を無効化
placeholder で入力案内
min / max で入力範囲制限
required で未入力を防止
button type="submit" で送信と判定処理へ

4. 判定表示 .judgeArea

<div class="judgeArea hide">

回答後に表示されるエリア。正解/不正解のメッセージと、次の動作へ進むボタンが入っています。

CSSで見た目を整える

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrap {
  width: 100%;
  max-width: 500px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-size: 18px;
}
h1 {
  margin-bottom: 20px;
  font-size: 1.6em;
}
button {
  width: 80%;
  margin: 0 auto;
  padding: 10px;
  font-size: 1.2em;
  cursor: pointer;
  background-color: #000080;
  color: #fff;
  border: none;
  border-radius: 5px;
}
button:hover {
  background-color: #000066;
}
.startBtn.hide {
  display: none;
}
.quizWrap {
  user-select: none;
}
.quizWrap.hide {
  display: none;
}
.scoreArea {
  margin-bottom: 20px;
  font-size: 1.4em;
}
.quizArea {
  width: 100%;
  height: 200px;
  border: 1px solid #999;
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.questionArea {
  font-size: 2.5em;
  letter-spacing: 3px;
}
.formArea {
  margin: 30px auto;
  width: 90%;
}
.inputNumber {
  width: 200px;
  height: 50px;
  padding: 6px;
  font-size: 1.2em;
  margin-right: 4px;
}
.submitBtn {
  width: 60px;
  height: 50px;
  margin: 0;
  padding: 6px;
}
.judgeArea {
  width: 100%;
  text-align: left;
}
.judgeArea.hide {
  display: none;
}
.msgArea {
  width: 100%;
  text-align: left;
  font-size: 1.4em;
  margin-bottom: 10px;
  padding-bottom: 5px;
  display: flex;
}
.judgeMsg {
  margin-right: 20px;
}
.nextBtn {
  width: 180px;
}

このCSSは、足し算クイズアプリの見た目やレイアウトを整えるためのものです。主なポイントは以下の通りです。

1. 全体設定

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ブラウザが自動で付ける余白をリセットし、レイアウトが崩れにくいようにしています。

2. .wrap（中央配置・最大幅）

.wrap {
  max-width: 500px;
  margin: 0 auto;
  text-align: center;
}

画面の中央に配置し、幅が広すぎないように調整しています。

3. ボタンデザイン

button {
  width: 80%;
  background-color: #000080;
  color: #fff;
}
button:hover {
  background-color: #000066;
}

ボタンを大きく表示し、ホバー時に色が変わるようにしています。操作しやすいUIを意識しています。

4. 表示切り替え用クラス .hide

.hide {
  display: none;
}

JavaScriptで要素の表示・非表示を切り替えるための仕組みです。

5. 質問や回答エリア

.quizArea {
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexboxを使って、問題文や入力フォームを中央に揃えています。

✅ Flexboxについて詳しく解説
【コピペOK】Flexboxで要素を完璧に上下左右中央寄せする3行コード

6. 入力欄のサイズ調整

.inputNumber {
  width: 200px;
  height: 50px;
  font-size: 1.2em;
}

数字入力欄が見やすく、押しやすい大きさに設定しています。

7. 判定エリア .judgeArea

.judgeArea.hide {
  display: none;
}

クイズ回答後に表示される結果画面です。こちらもJavaScriptで表示を切り替えます。

JavaScriptでアプリの動きを作る

JavaScript

const startBtn = document.querySelector('.startBtn');
const quizWrap = document.querySelector('.quizWrap');
const scoreArea = quizWrap.querySelector('.scoreArea');
const quizArea = quizWrap.querySelector('.quizArea');
const questionArea = quizWrap.querySelector('.questionArea');
const form = quizWrap.querySelector('form');
const input = form.querySelector('.inputNumber');
const judgeArea = document.querySelector('.judgeArea');
const judgeMsg = judgeArea.querySelector('.judgeMsg');
const answerMsg = judgeArea.querySelector('.answerMsg');
const nextBtn = judgeArea.querySelector('.nextBtn');

let isAnswered = false;
let score = 0;
let firstNum, secondNum;

const quizSet = function () {
  nextBtn.textContent = '次の問題';

  firstNum = Math.floor(Math.random() * 99) + 1;
  secondNum = Math.floor(Math.random() * 99) + 1;
  questionArea.textContent = `${firstNum} + ${secondNum}`;
  scoreArea.textContent = `SCORE: ${score}`;
  input.disabled = false;
  input.focus();
  judgeMsg.textContent = '';
  answerMsg.textContent = '';
};

startBtn.addEventListener('click', () => {
  quizSet();
  startBtn.classList.add('hide');
  quizWrap.classList.remove('hide');
});

const checkAnswer = (answer, a, b) => {
  if (isAnswered) return;
  isAnswered = true;

  const quizCorrect = a + b;
  const isCorrect = answer === quizCorrect;
  answerMsg.textContent = quizCorrect;

  if (isCorrect) {
    judgeMsg.textContent = '正解';
    score++;
  } else {
    judgeMsg.textContent = '不正解';
    nextBtn.textContent = 'もう一回';
    score = 0;
  }

  scoreArea.textContent = `SCORE: ${score}`;

  input.disabled = true;
  judgeArea.classList.remove('hide');
};

form.addEventListener('submit', (e) => {
  e.preventDefault();
  let inputNumber = parseInt(form.elements.inputNumber.value, 10);
  checkAnswer(inputNumber, firstNum, secondNum);
});

nextBtn.addEventListener('click', () => {
  isAnswered = false;
  input.value = '';
  questionArea.textContent = '';
  judgeArea.classList.add('hide');

  if (judgeMsg.textContent === '正解') {
    quizSet();
  } else {
    nextBtn.textContent = '次の問題';
    quizWrap.classList.add('hide');
    startBtn.classList.remove('hide');
  }
});

このJavaScriptは、足し算クイズアプリの動作を制御するためのコードです。順番に説明します。

1. HTML要素の取得

const startBtn = document.querySelector('.startBtn');
const quizWrap = document.querySelector('.quizWrap');
const scoreArea = quizWrap.querySelector('.scoreArea');
const quizArea = quizWrap.querySelector('.quizArea');
const questionArea = quizWrap.querySelector('.questionArea');
const form = quizWrap.querySelector('form');
const input = form.querySelector('.inputNumber');
const judgeArea = document.querySelector('.judgeArea');
const judgeMsg = judgeArea.querySelector('.judgeMsg');
const answerMsg = judgeArea.querySelector('.answerMsg');
const nextBtn = judgeArea.querySelector('.nextBtn');

まず、HTMLで使用しているボタンや表示エリア、フォームなどの要素を取得しています。
これらの要素を変数に入れておくことで、後から操作や表示の切り替えが簡単になります。

2. ゲームの状態を管理する変数

let isAnswered = false;
let score = 0;
let firstNum, secondNum;

isAnswered は、すでに回答済みかどうかを管理します。
score は現在の得点です。
firstNum と secondNum は、ランダムで出題する数字を保持します。

3. 問題を出す関数

const quizSet = function () {
  nextBtn.textContent = '次の問題';

  firstNum = Math.floor(Math.random() * 99) + 1;
  secondNum = Math.floor(Math.random() * 99) + 1;
  questionArea.textContent = `${firstNum} + ${secondNum}`;
  scoreArea.textContent = `SCORE: ${score}`;
  input.disabled = false;
  input.focus();
  judgeMsg.textContent = '';
  answerMsg.textContent = '';
};

firstNum と secondNum に 1～99 のランダムな数字を設定します。
問題文を questionArea に表示します。
スコアを表示します。
入力欄を有効化し、フォーカスを当てます。
正誤メッセージや答え表示は空にします。

✅ Math.random()について詳しく解説
【JavaScript】Math.random()の使い方｜ランダムな数字を生成する基本をやさしく解説

4. スタートボタンのクリック

startBtn.addEventListener('click', () => {
  quizSet();
  startBtn.classList.add('hide');
  quizWrap.classList.remove('hide');
});

スタートボタンがクリックされると、問題を出す quizSet 関数を呼び出します。
その後、スタートボタンを非表示にして、クイズの画面を表示します。

5. 回答判定

const checkAnswer = (answer, a, b) => {
  if (isAnswered) return;
  isAnswered = true;

  const quizCorrect = a + b;
  const isCorrect = answer === quizCorrect;
  answerMsg.textContent = quizCorrect;

  if (isCorrect) {
    judgeMsg.textContent = '正解';
    score++;
  } else {
    judgeMsg.textContent = '不正解';
    nextBtn.textContent = 'もう一回';
    score = 0;
  }

  scoreArea.textContent = `SCORE: ${score}`;
  input.disabled = true;
  judgeArea.classList.remove('hide');
};

isAnswered が true なら二度目の判定は行いません。
答えと正解を比較して、正解か不正解かを表示します。
正解ならスコアを増やし、不正解ならスコアをリセットします。
入力欄を無効にし、正誤判定のエリアを表示します。

✅ if文について詳しく解説
【JavaScript】if文を使ったサンプルコード

6. フォーム送信

form.addEventListener('submit', (e) => {
  e.preventDefault();
  let inputNumber = parseInt(form.elements.inputNumber.value, 10);
  checkAnswer(inputNumber, firstNum, secondNum);
});

フォームが送信されると、ページのリロードを防ぐため e.preventDefault() を呼びます。
入力欄の値を取得して、整数に変換します。
その値を checkAnswer 関数に渡して判定します。

7. 次の問題ボタン

nextBtn.addEventListener('click', () => {
  isAnswered = false;
  input.value = '';
  questionArea.textContent = '';
  judgeArea.classList.add('hide');

  if (judgeMsg.textContent === '正解') {
    quizSet();
  } else {
    nextBtn.textContent = '次の問題';
    quizWrap.classList.add('hide');
    startBtn.classList.remove('hide');
  }
});