HTMLとJavaScriptだけでクイズゲームを作る方法【初心者向け・コピペで動く】
「クイズゲームを作ってみたいけど、何から始めればいいかわからない」
この記事では、HTMLとJavaScriptだけで、ブラウザで遊べるクイズゲームを作る方法を紹介します。特別なソフトのインストールは不要。メモ帳とブラウザがあれば、今日から作れます。
僕はプログラミング経験ゼロから、AIの Claude と一緒に日本の地理クイズを作りました。この記事のコードは、そのクイズを初心者向けにいちばんシンプルな形まで削ったものです。
完成イメージ
まずは、これから作るクイズを遊んでみてください。
できることは、次の4つです。
- 問題と選択肢を表示する
- 選んだ答えが正解か不正解かを表示する
- 「次の問題へ」で次に進む
- 最後に「何問正解したか」を表示する
準備：ファイルを1つ作るだけ
- パソコンで「メモ帳」（Macなら「テキストエディット」）を開きます。VS Code（無料のコードエディタ）があると、さらに書きやすくなります
- 下の完成コードをまるごとコピーして、貼り付けます
quiz.htmlという名前で保存します（文字コードは「UTF-8」を選びます）- 保存したファイルをダブルクリックすると、ブラウザでクイズが開きます
完成コード（コピペでOK）
quiz.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>はじめてのクイズゲーム</title>
<style>
body { font-family: sans-serif; text-align: center; padding: 24px; }
#choices button { display: block; width: 100%; max-width: 320px; margin: 8px auto; padding: 12px; font-size: 16px; cursor: pointer; }
.correct { background: #bbf7d0; }
.wrong { background: #fecaca; }
</style>
</head>
<body>
<h1>クイズゲーム</h1>
<p id="progress"></p>
<p id="question"></p>
<div id="choices"></div>
<p id="result"></p>
<button id="next" hidden>次の問題へ</button>
<script>
// ① 問題のデータ
const questions = [
{ text: "日本で一番高い山は？", choices: ["富士山", "北岳", "槍ヶ岳"], answer: "富士山" },
{ text: "日本で一番長い川は？", choices: ["利根川", "信濃川", "石狩川"], answer: "信濃川" },
{ text: "日本で一番大きい湖は？", choices: ["霞ヶ浦", "琵琶湖", "猪苗代湖"], answer: "琵琶湖" },
];
// ② ゲームの状態
let current = 0; // 今何問目か（0から数える）
let score = 0; // 正解した数
// ③ 画面の部品
const progress = document.getElementById("progress");
const question = document.getElementById("question");
const choices = document.getElementById("choices");
const result = document.getElementById("result");
const nextButton = document.getElementById("next");
// ④ 問題を表示する
function showQuestion() {
const q = questions[current];
progress.textContent = "問題 " + (current + 1) + " / " + questions.length;
question.textContent = q.text;
result.textContent = "";
nextButton.hidden = true;
choices.innerHTML = "";
q.choices.forEach((choice) => {
const button = document.createElement("button");
button.textContent = choice;
button.addEventListener("click", () => check(button, q));
choices.appendChild(button);
});
}
// ⑤ 答え合わせ
function check(button, q) {
if (button.textContent === q.answer) {
score++;
result.textContent = "正解！";
button.classList.add("correct");
} else {
result.textContent = "不正解… 正解は「" + q.answer + "」";
button.classList.add("wrong");
}
// 1問につき1回しか答えられないようにする
choices.querySelectorAll("button").forEach((b) => (b.disabled = true));
nextButton.hidden = false;
}
// ⑥ 次の問題へ（最後の問題なら結果を表示）
nextButton.addEventListener("click", () => {
current++;
if (current < questions.length) {
showQuestion();
} else {
progress.textContent = "";
question.textContent = "結果は " + score + " / " + questions.length + " 問正解！";
choices.innerHTML = "";
result.textContent = "";
nextButton.hidden = true;
}
});
showQuestion();
</script>
</body>
</html>コードの仕組みを解説
コードの中の // ① 〜 // ⑥ の番号に沿って、何をしているのかを説明します。
① 問題のデータ
問題は questions という配列（データを順番に並べた入れ物）にまとめています。1問ごとに、問題文（text）、選択肢（choices）、正解（answer）を持たせています。
ポイントは、問題のデータと、ゲームの動きを分けていることです。問題を変えたいときは、ここだけ書き換えればOK。プログラムの他の部分はさわらなくて大丈夫です。
② ゲームの状態
current は「今何問目か」、score は「何問正解したか」を覚えておくための変数です。current は 0 から数えるので、1問目が 0、2問目が 1 になります。
③ 画面の部品
document.getElementById("question") は、「HTMLの中から id="question" の部品を探してきて」という命令です。見つけた部品を変数に入れておくと、あとで文字を書き換えたりできます。
④ 問題を表示する
showQuestion() は、今の問題（questions[current]）を画面に表示する関数です。選択肢の数だけボタンを作って（createElement）、画面に追加しています（appendChild）。
ボタンを毎回作り直しているので、問題ごとに選択肢の数がちがっても動きます。
⑤ 答え合わせ
押されたボタンの文字が正解（q.answer）と同じなら正解です。正解なら score を1増やして、ボタンを緑に。不正解ならボタンを赤にして、正解を表示します。
答えたあとは、全部のボタンを押せなくしています（disabled = true）。こうしないと、同じ問題で何回も答えて点数を増やせてしまうからです。
⑥ 次の問題へ
「次の問題へ」ボタンが押されたら、current を1増やします。まだ問題が残っていれば次の問題を表示し、最後の問題が終わっていれば結果を表示します。
アレンジしてみよう
問題を増やす・変える
① の配列に、同じ形で1行追加するだけです。最後の ,（カンマ）を忘れないようにしましょう。
{ text: "日本で一番大きい都道府県は？", choices: ["東京都", "北海道", "大阪府"], answer: "北海道" },問題の順番を毎回シャッフルする
毎回同じ順番だと、2回目からは覚えてしまいますよね。次の関数を追加すると、配列の順番をランダムに入れ替えられます。偏りなく混ぜられる「Fisher–Yates（フィッシャー・イェーツ）のシャッフル」という方法です。
// 配列をシャッフルした「コピー」を返す
function shuffle(array) {
const copy = [...array];
for (let i = copy.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[copy[i], copy[j]] = [copy[j], copy[i]];
}
return copy;
}あとは、選択肢を表示している部分の q.choices.forEach を shuffle(q.choices).forEach に変えれば、選択肢の並びが毎回変わります。
見た目を整える
<style> の中を書き換えると、色や大きさを変えられます。たとえば .correct の色を変えると、正解したときのボタンの色が変わります。
AIに手伝ってもらうときのコツ
このコードをベースに、AIに機能を追加してもらうのもおすすめです。僕が実際にやってみて感じたコツは、次の3つです。
- 一度に頼むのは1つだけ：「シャッフルを追加して」「結果にコメントを出して」のように、1つずつ頼みます。まとめて頼むと、どこで壊れたのかわからなくなります
- 今のコードを一緒に渡す：「このコードに、〇〇を追加して」と伝えると、今の作りに合わせて書いてくれます
- 「なぜこう書いたの？」と聞く：仕組みがわかると、次からは自分で直せるようになります
AIと一緒にゲームを作ったときの体験は、プログラミング経験ゼロの僕が、AI（Claude）と1日でブラウザゲームを作れた話に書いています。
この仕組みで作れるもの
「データ」と「動き」を分けたこの作りは、クイズ以外にも使えます。たとえば、kakapo studio のプログラミングの学び方診断も、このクイズの仕組みを応用して作りました。正解・不正解を判定するかわりに、選んだ答えごとに点数を足していって、一番点数が高いタイプを結果にしています。
次は、問題のテーマを自分の好きなことに変えて、オリジナルのクイズを作ってみてください。
まとめ
- クイズゲームは、HTMLとJavaScriptだけで作れる。必要なのはメモ帳とブラウザだけ
- 問題のデータと、ゲームの動きを分けておくと、問題を変えるのがかんたん
- シャッフルや見た目の変更など、アレンジしながら少しずつ覚えていこう