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 の対処法 — 関数呼び出しでエラーが出たときに