JavaScript 📅 2026年5月6日 🔄 更新: 2026-05-06 ⏱ 19分で読めます

JSクイズアプリの作り方｜初心者向けチュートリアル

JavaScriptで3択クイズアプリをゼロから作る。HTML/CSS/JS完成コード付き。初心者OK。

2026年5月6日

導入

「JavaScriptでクイズアプリを作りたい！」と思ったことはありませんか？

クイズアプリは、プログラミング学習にぴったりの題材です。ボタンをクリックして答えを選ぶ。正解か不正解かを判定する。スコアを計算する。こうした処理を自分で作ると、JavaScriptの力がぐんと伸びます。

この記事では、HTML・CSS・JavaScriptを使って、3択クイズアプリを1から完成させます。全部で5問のクイズが出題され、最後にスコアが表示されるアプリです。

コードはすべてコピーして動かせます。一緒にステップバイステップで作っていきましょう！

完成イメージ

今回作るクイズアプリの仕様を確認しましょう。

アプリの特徴：

3択問題が5問出題される
選択肢ボタンをクリックして回答する
正解なら緑色、不正解なら赤色でフィードバックが出る
全問終了後にスコア（正解数）が表示される
「もう一度」ボタンでやり直しができる

使う技術は3つだけです。

HTML：画面の骨組み（構造）を作る
CSS：見た目（デザイン）を整える
JavaScript：クイズの動き（ロジック）を作る

1つのHTMLファイルにすべてまとめるので、ブラウザだけで動きます。特別なソフトは不要です。

Step 1: HTMLで骨組みを作る

まずはHTMLで画面の構造を作ります。HTMLは、ウェブページの「骨組み」を作る言語です。

クイズアプリに必要な要素は次の3つです。

問題文を表示するエリア
選択肢ボタン（3つ）
スコアと結果を表示するエリア

以下の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="quiz-container">
    <!-- 問題番号を表示する -->
    <div class="quiz-header">
      <span id="question-number">問題 1 / 5</span>
      <span id="score">スコア: 0</span>
    </div>

    <!-- 問題文を表示する -->
    <h2 id="question-text">ここに問題文が入ります</h2>

    <!-- 選択肢ボタンを並べる -->
    <div id="choices" class="choices">
      <button class="choice-btn">選択肢1</button>
      <button class="choice-btn">選択肢2</button>
      <button class="choice-btn">選択肢3</button>
    </div>

    <!-- 正解・不正解のフィードバック -->
    <p id="feedback" class="feedback"></p>

    <!-- 次の問題へ進むボタン -->
    <button id="next-btn" class="next-btn">次の問題へ</button>

    <!-- 結果画面 -->
    <div id="result" class="result">
      <h2>クイズ終了！</h2>
      <p id="result-score"></p>
      <button id="retry-btn" class="retry-btn">もう一度チャレンジ</button>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

ポイント解説：

id属性は、JavaScriptから要素を見つけるための「名札」です。DOM（ドム）の操作で使います。
class属性は、CSSでデザインを当てるための「グループ名」です。
<div>は、要素をまとめる「箱」の役割をします。

HTMLの構造ができたら、次はCSSで見た目を整えましょう。

Step 2: CSSで見た目を整える

CSSは、HTMLで作った骨組みに「デザイン」を加える言語です。カード風のデザインにして、見やすいクイズアプリにしましょう。

style.cssというファイルを作り、以下のコードを書いてください。

/* 全体のリセットと基本設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", sans-serif;
  background-color: #f0f4f8;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* クイズ全体を囲むカード */
.quiz-container {
  background: #ffffff;
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* ヘッダー（問題番号とスコア） */
.quiz-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  font-size: 14px;
  color: #666;
}

/* 問題文 */
#question-text {
  font-size: 20px;
  margin-bottom: 24px;
  line-height: 1.6;
}

/* 選択肢ボタンの並び */
.choices {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 各選択肢ボタン */
.choice-btn {
  padding: 14px 20px;
  font-size: 16px;
  border: 2px solid #ddd;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.choice-btn:hover {
  background: #f0f0f0;
}

/* 正解のときの色 */
.choice-btn.correct {
  background: #d4edda;
  border-color: #28a745;
  color: #155724;
}

/* 不正解のときの色 */
.choice-btn.wrong {
  background: #f8d7da;
  border-color: #dc3545;
  color: #721c24;
}

/* フィードバックメッセージ */
.feedback {
  margin-top: 16px;
  font-size: 16px;
  font-weight: bold;
  min-height: 24px;
}

/* 次の問題ボタン */
.next-btn {
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 16px;
  background: #007bff;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: none;
}

.next-btn:hover {
  background: #0056b3;
}

/* 結果画面（最初は非表示） */
.result {
  display: none;
  text-align: center;
}

.result h2 {
  margin-bottom: 16px;
}

/* やり直しボタン */
.retry-btn {
  margin-top: 20px;
  padding: 12px 24px;
  font-size: 16px;
  background: #28a745;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
}

.retry-btn:hover {
  background: #218838;
}

ポイント解説：

.quiz-containerにカード風のデザイン（角丸・影）を設定しています。
.correctと.wrongは、JavaScriptから動的に追加するクラスです。正解なら緑、不正解なら赤になります。
display: noneで最初は非表示にしている要素があります。JavaScriptで表示を切り替えます。

見た目が整ったら、いよいよJavaScriptでクイズを動かしましょう！

Step 3: JavaScriptでクイズを動かす

ここがクイズアプリの「頭脳」部分です。JavaScriptで、問題の表示・回答チェック・スコア計算を行います。

script.jsというファイルを作り、以下のコードを書いてください。

問題データを用意する

まず、クイズの問題データを配列（はいれつ）で用意します。配列とは、データを順番に並べて管理する仕組みです。

// クイズの問題データ（配列にオブジェクトを入れる）
const quizData = [
  {
    question: "HTMLは何の略？",
    choices: [
      "Hyper Text Markup Language",
      "High Tech Modern Language",
      "Home Tool Markup Language"
    ],
    answer: 0
  },
  {
    question: "CSSで文字の色を変えるプロパティは？",
    choices: ["font-size", "color", "background"],
    answer: 1
  },
  {
    question: "JavaScriptで変数を宣言するキーワードはどれ？",
    choices: ["var", "variable", "val"],
    answer: 0
  },
  {
    question: "配列の要素数を取得するプロパティは？",
    choices: ["size", "count", "length"],
    answer: 2
  },
  {
    question: "HTMLでリンクを作るタグは？",
    choices: ["<link>", "<a>", "<url>"],
    answer: 1
  }
];

各問題は「オブジェクト」という形式で書いています。questionが問題文、choicesが選択肢、answerが正解の番号（0から数える）です。

変数を準備する

次に、アプリ全体で使う変数を用意します。

// 現在の問題番号（0から始まる）
let currentQuestion = 0;
// スコア（正解数）
let score = 0;
// 回答済みかどうかのフラグ
let answered = false;

// HTML要素を取得する（DOM操作）
const questionText = document.getElementById("question-text");
const questionNumber = document.getElementById("question-number");
const scoreDisplay = document.getElementById("score");
const choicesContainer = document.getElementById("choices");
const feedback = document.getElementById("feedback");
const nextBtn = document.getElementById("next-btn");
const resultDiv = document.getElementById("result");
const resultScore = document.getElementById("result-score");
const retryBtn = document.getElementById("retry-btn");

document.getElementById()は、HTMLの中からidで要素を探す命令です。DOM操作の基本テクニックです。

問題を表示する関数

関数（かんすう）とは、処理をまとめて名前をつけたものです。何度でも呼び出せます。

// 問題を画面に表示する関数
function showQuestion() {
  // 現在の問題データを取り出す
  const data = quizData[currentQuestion];

  // 問題番号を更新
  questionNumber.textContent =
    "問題 " + (currentQuestion + 1) + " / " + quizData.length;

  // 問題文を表示
  questionText.textContent = data.question;

  // フィードバックをリセット
  feedback.textContent = "";

  // 次へボタンを非表示にする
  nextBtn.style.display = "none";

  // 回答フラグをリセット
  answered = false;

  // 選択肢ボタンを作り直す
  choicesContainer.innerHTML = "";
  data.choices.forEach(function(choice, index) {
    const button = document.createElement("button");
    button.textContent = choice;
    button.classList.add("choice-btn");
    // ボタンがクリックされたときの処理を設定
    button.addEventListener("click", function() {
      checkAnswer(index);
    });
    choicesContainer.appendChild(button);
  });
}

ここではイベント（event）を使っています。addEventListenerは「ボタンがクリックされたら、この処理を実行してね」という命令です。

回答をチェックする関数

選択肢がクリックされたとき、正解かどうかを判定します。if文を使って条件分岐します。

// 回答をチェックする関数
function checkAnswer(selectedIndex) {
  // すでに回答済みなら何もしない
  if (answered) return;
  answered = true;

  const data = quizData[currentQuestion];
  const buttons = choicesContainer.querySelectorAll(".choice-btn");

  // 正解の場合
  if (selectedIndex === data.answer) {
    score++;
    scoreDisplay.textContent = "スコア: " + score;
    feedback.textContent = "⭕ 正解！";
    feedback.style.color = "#28a745";
    buttons[selectedIndex].classList.add("correct");
  } else {
    // 不正解の場合
    feedback.textContent = "❌ 不正解… 正解は「" +
      data.choices[data.answer] + "」です";
    feedback.style.color = "#dc3545";
    buttons[selectedIndex].classList.add("wrong");
    // 正解のボタンも緑にする
    buttons[data.answer].classList.add("correct");
  }

  // 次へボタンを表示する
  nextBtn.style.display = "inline-block";
}

if文は「もし〜なら」という条件分岐です。selectedIndex === data.answerで、選んだ番号と正解番号が同じかを比べています。

次の問題へ進む処理

「次の問題へ」ボタンと「もう一度」ボタンの処理を設定します。

// 「次の問題へ」ボタンの処理
nextBtn.addEventListener("click", function() {
  currentQuestion++;

  // まだ問題が残っている場合
  if (currentQuestion < quizData.length) {
    showQuestion();
  } else {
    // 全問終了 → 結果画面を表示
    showResult();
  }
});

// 「もう一度」ボタンの処理
retryBtn.addEventListener("click", function() {
  currentQuestion = 0;
  score = 0;
  scoreDisplay.textContent = "スコア: 0";
  resultDiv.style.display = "none";
  questionText.style.display = "block";
  choicesContainer.style.display = "flex";
  document.querySelector(".quiz-header").style.display = "flex";
  feedback.textContent = "";
  nextBtn.style.display = "none";
  showQuestion();
});

// 最初の問題を表示する
showQuestion();

これでクイズの基本動作が完成です！

Step 4: 結果画面を作る

全問回答し終わったら、スコアを表示する結果画面を出します。showResult関数を追加しましょう。

// 結果画面を表示する関数
function showResult() {
  // クイズ部分を非表示にする
  questionText.style.display = "none";
  choicesContainer.style.display = "none";
  document.querySelector(".quiz-header").style.display = "none";
  feedback.textContent = "";
  nextBtn.style.display = "none";

  // 結果画面を表示する
  resultDiv.style.display = "block";
  resultScore.textContent =
    quizData.length + "問中 " + score + "問正解！";

  // スコアに応じてメッセージを変える
  if (score === quizData.length) {
    resultScore.textContent += " 🎉 パーフェクト！";
  } else if (score >= 3) {
    resultScore.textContent += " 👍 よくできました！";
  } else {
    resultScore.textContent += " 💪 もう一度チャレンジしよう！";
  }
}

ポイント解説：

style.display = "none"で要素を隠し、"block"で表示します。
スコアに応じてメッセージを変えることで、ユーザーに達成感を与えます。
「もう一度チャレンジ」ボタンを押すと、スコアがリセットされて最初からやり直せます。

これで、クイズアプリの全機能が完成しました！ブラウザでHTMLファイルを開いて、動作を確認してみましょう。

改造アイデア3選

基本のクイズアプリが完成したら、自分なりにカスタマイズしてみましょう。

1. タイマーを追加する

2. 問題数を増やす

quizData配列に問題を追加するだけで、問題数を増やせます。10問、20問と増やして、本格的なクイズアプリにしましょう。問題をランダムに出題する機能を追加するのも面白いです。Math.random()を使えば、配列の順番をシャッフルできます。ヒント：Fisher-Yatesシャッフルというアルゴリズムを調べてみると、偏りのないランダム出題が実現できます。

3. カテゴリ選択機能を追加する

「HTML問題」「CSS問題」「JavaScript問題」のようにカテゴリを分けて、ユーザーが選べるようにしましょう。カテゴリごとに別の配列を用意し、選択に応じて使う配列を切り替えます。ヒント：最初にカテゴリ選択画面を表示し、ボタンクリックで対応する配列をquizDataに代入する方法がシンプルです。配列の使い方を応用すれば実現できます。

まとめ

✅ HTMLで画面の構造（問題文・選択肢・結果表示）を作った
✅ CSSでカード風デザインと正解/不正解の色分けを実装した
✅ JavaScriptで問題データを配列で管理した
✅ イベントリスナーでボタンクリックの処理を設定した
✅ if文で正解・不正解を判定した
✅ 結果画面とやり直し機能を実装した

クイズアプリには、プログラミングの基本がたくさん詰まっています。配列、関数、条件分岐、DOM操作、イベント処理。これらを組み合わせて1つのアプリを完成させた経験は、次のステップに必ず活きます。

ぜひ自分だけのオリジナル問題を追加して、友達に遊んでもらいましょう！

🎯 次のステップへ進もう！

クイズアプリが作れたあなたは、JavaScriptの基礎力がしっかり身についています。次はもっと本格的なアプリ制作に挑戦してみませんか？

DOM操作をもっと深く学ぶ — 画面を自由に書き換えるテクニックをマスターしよう
イベント処理を極める — クリック以外のイベントも使いこなそう
JavaScript練習ドリル — 基礎を固める問題集で復習しよう
TypeError: is not a function の対処法 — 関数呼び出しでエラーが出たときに

コースで実際に手を動かして学ぼう

レッスンではコードを書きながら基礎が身につきます

HTMLコースを始める →

この記事に出てくる用語

📣 この記事が役に立ったら

Xでシェア

💬 引用する場合はこちらをご利用ください:

JavaScriptで3択クイズアプリをゼロから作る。HTML/CSS/JS完成コード付き。初心者OK。

出典: https://start-web-programming.com/blog/javascript-quiz-app-tutorial/

JSクイズアプリの作り方｜初心者向けチュートリアル

導入

完成イメージ

Step 1: HTMLで骨組みを作る

Step 2: CSSで見た目を整える

Step 3: JavaScriptでクイズを動かす

問題データを用意する

変数を準備する

問題を表示する関数

回答をチェックする関数

次の問題へ進む処理

Step 4: 結果画面を作る

改造アイデア3選

1. タイマーを追加する

2. 問題数を増やす

3. カテゴリ選択機能を追加する

まとめ

コースで実際に手を動かして学ぼう

関連記事

JavaScriptのボタンが動かない！初心者がハマる原因と直し方

JavaScript練習問題｜初心者向け無料ドリル30問

あなたに合うプログラミング言語はどれ？診断クイズ

この記事に出てくる用語