「JavaScriptで3択クイズを作りたいけれど、何から始めればいいのかわからない」「jQueryは使わず、できれば素のJavaScriptだけで実装したい」「スマホ対応まで含めて、実用的なクイズを作りたい」──そんな悩みをお持ちではありませんか。
3択クイズは学習コンテンツや診断テスト、ポートフォリオ、WordPress記事など幅広く活用できる一方で、UI設計・ロジック実装・拡張性まで考えると意外とハードルが高く感じられがちです。
この記事では、HTML/CSS/JavaScriptだけで動く「javascript 3択 クイズ」をテーマに、初心者の方でも理解しやすく、かつ実務でも使える構成で解説していきます。
格安ドメイン取得サービス─ムームードメイン─
JavaScriptで3択クイズを作る完成イメージと全体構成
「JavaScriptで3択クイズを作ってみたい」と思っても、何から手をつければいいか迷ってしまいますよね。まずは、これから作成するクイズの完成形と、その裏側で動く仕組み（全体像）を整理しましょう。
ここを理解しておくと、この後のコード作成が驚くほどスムーズになります。
HTML/CSS/JavaScriptだけで動く3択クイズの完成例
今回作成するのは、「問題文が表示され、3つの選択肢から1つを選んで回答する」という王道の3択クイズです。
- 直感的な操作感： ラジオボタンで選択肢を選び、「回答する」ボタンを押すと即座に正解・不正解を判定します。
- スムーズな画面切り替え： ページをリロード（再読み込み）せずに、JavaScriptで中身だけを書き換えて次の問題へ進みます。
- 最終結果の表示： すべての問題が終わると、「あなたの正解数は〇問です！」とスコアを表示します。
余計な機能を削ぎ落としたシンプルな構成なので、学習サイトの自作パーツや、エンジニアとしてのポートフォリオの1機能としてそのまま活用できます。
jQuery不要！Vanilla JS（素のJavaScript）で作るメリット
「ライブラリ（jQueryなど）を使ったほうが楽では？」と思うかもしれません。しかし、初学者こそVanilla JS（バニラJS：素のJavaScript）で書くべき明確な理由があります。
バニラJSで書くべき理由
- 読み込み速度が速い： 外部ファイルを読み込まないため、動作が非常に軽量です。
- ブラウザ標準の知識が身につく： 特定のツールに依存しない「本質的なJavaScriptの書き方」が学べるため、応用が効きます。
- 環境を選ばない： WordPressの投稿内や、静的なHTMLサイトなど、どんな環境でもコピペするだけで動きます。
今のフロントエンド開発では、jQueryを使わず「標準機能」でスマートに書くスタイルが主流です。この記事では、最新の書き方（ES6+）をベースに解説していきます。
スマホ対応も簡単にできる3択クイズUIのポイント
最近のウェブサイトは「スマホでどう見えるか」が最重要です。今回紹介する3択クイズのUIには、以下の工夫を盛り込んでいます。
UIの工夫
- 押しやすいボタンサイズ： 指でタップしやすいよう、
<label>タグを使って選択肢のテキスト部分をクリックしても反応するようにします。 - レスポンシブ設計： 画面幅に合わせてクイズの枠が自動調整されるCSSを適用します。
- セマンティックな構造：
<div>だけで作るのではなく、HTMLの役割（意味）に合わせたタグを使うことで、スクリーンリーダーなどのアクセシビリティにも配慮します。
次は、実際の見た目を作っていきます。
まずは【Step1】として、HTMLとCSSを使ってクイズの「土台」を組み立てていきましょう。
新世代レンタルサーバー『シンレンタルサーバー』
【Step1】HTML/CSSでクイズの見た目（UI）を作る
JavaScriptを動かす前に、まずはクイズの「器」となるHTMLと、見た目を整えるCSSを準備しましょう。
初心者がやりがちなミスとして、すべてを <div> タグで囲ってしまうことがありますが、今回はアクセシビリティ（使いやすさ）を意識して、適切なタグを選んでいきます。
フォーム部品（radioボタン）の正しい使い方
クイズの選択肢には、3つのうち1つだけを選べる input type="radio"（ラジオボタン） を使用します。
ここで重要なのが <label> タグ です。ラジオボタン本体（小さな円）だけでなく、横にあるテキストをクリックしても選択されるように設定することで、操作ミスを防ぎ、ユーザーに優しい設計になります。
HTMLコード
以下のコードをHTMLファイルの <body> 内に記述してください。
<div id="quiz-container">
<div id="question-area">
<p id="question-number">第 1 問</p>
<h2 id="question-text">ここに問題文が表示されます</h2>
</div>
<form id="quiz-form">
<div class="choices">
<label class="choice-item">
<input type="radio" name="answer" value="0">
<span id="choice0-text">選択肢 1</span>
</label>
<label class="choice-item">
<input type="radio" name="answer" value="1">
<span id="choice1-text">選択肢 2</span>
</label>
<label class="choice-item">
<input type="radio" name="answer" value="2">
<span id="choice2-text">選択肢 3</span>
</label>
</div>
<button type="button" id="submit-btn">回答する</button>
</form>
<div id="result-area" style="display: none;">
<p id="result-message"></p>
<button type="button" onclick="location.reload()">もう一度挑戦する</button>
</div>
</div>
ポイント：name属性を統一する
3つの input に同じ name="answer" をつけることで、ブラウザが「この3つは1つのグループだな」と認識し、1つしか選べない状態にしてくれます。
スマホで見ても崩れないシンプルで清潔感のあるデザイン
次に、CSSで見た目を整えます。PCでもスマホでも中央にバランスよく配置され、選択肢が押しやすくなるように調整しましょう。
CSSコード
<style> タグの中、または外部CSSファイルに記述してください。
/* 全体のレイアウト調整 */
#quiz-container {
max-width: 600px;
margin: 40px auto;
padding: 20px;
background-color: #f9f9f9;
border-radius: 12px;
box-shadow: 0 4px 15px rgba(0,0,0,0.1);
font-family: sans-serif;
}
/* 問題文のスタイル */
#question-text {
font-size: 1.2rem;
margin-bottom: 20px;
color: #333;
}
/* 選択肢の並び */
.choices {
display: flex;
flex-direction: column;
gap: 10px;
margin-bottom: 20px;
}
/* 各選択肢のアイテム（ラベル全体をクリック可能に） */
.choice-item {
display: block;
padding: 15px;
background-color: #fff;
border: 2px solid #ddd;
border-radius: 8px;
cursor: pointer;
transition: all 0.2s;
}
.choice-item:hover {
background-color: #eef6ff;
border-color: #007bff;
}
/* ボタンの装飾 */
#submit-btn {
width: 100%;
padding: 12px;
background-color: #007bff;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
}
#submit-btn:hover {
background-color: #0056b3;
}
これでクイズの「見た目」が完成しました。ブラウザで開くと、綺麗なクイズ画面が表示されているはずです。ただし、この段階では「回答する」ボタンを押しても何も起きません。
次は、JavaScriptを使って「正解を判定し、次の問題へ進む」という命を吹き込んでいきましょう。
月額99円から。容量最大1TB！ブログ作成におすすめのWordPressテーマ「Cocoon」も簡単インストール
【Step2】JavaScriptでロジックを実装する
見た目が整ったら、次はJavaScriptを使ってクイズに「知能」を与えていきましょう。
ここでは、「データを準備する」→「画面に表示する」→「正解を判定する」という3つのステップに分けて解説します。
クイズデータを配列で用意する（保守性の高い書き方）
まずはクイズの問題文や選択肢を準備します。HTMLに直接問題を書き込まず、JavaScript側で「配列オブジェクト」として管理するのがおすすめのやり方です。
// クイズの問題データ（配列の中にオブジェクトを入れる形式）
const quizData = [
{
question: "JavaScriptで変数を宣言する際、再代入ができないキーワードは？",
choices: ["var", "let", "const"],
correct: 2 // 3番目の「const」が正解（0から数えるため）
},
{
question: "ブラウザでアラートを表示させるメソッドはどれ？",
choices: ["alert()", "console.log()", "prompt()"],
correct: 0 // 1番目の「alert()」が正解
},
{
question: "HTML要素を取得する際、ID指定で取得するメソッドは？",
choices: ["querySelector()", "getElementById()", "Both of them"],
correct: 1 // 2番目の「getElementById()」が正解
}
];
// 現在の問題番号とスコアを管理する変数
let currentQuestionIndex = 0;
let score = 0;
なぜHTMLに直接書かないのか？
HTMLに書くと、問題が増えるたびにHTMLの構造をコピー＆ペーストしなければならず、ミスが起きやすくなります。データ（問題内容）とロジック（表示する仕組み）を分けることで、JavaScriptの配列に1行追加するだけで問題を増やせるようになります。これが「拡張性（保守性）」の高いコードです。
選択された値を取得し、正解判定を行う仕組み
次に、「回答する」ボタンが押されたときの動きを作ります。
- ラジオボタンの中から「チェックがついているもの」を探す。
- その値と、データの「正解番号」を比較する。
「次の問題へ」ボタンでDOMを書き換える処理
最後に、これらを組み合わせたメインの処理を記述します。以下のコードを <script> タグ内に記述してください。
// HTML要素を取得しておく
const questionText = document.getElementById('question-text');
const questionNumber = document.getElementById('question-number');
const choicesText = [
document.getElementById('choice0-text'),
document.getElementById('choice1-text'),
document.getElementById('choice2-text')
];
const submitBtn = document.getElementById('submit-btn');
// --- 1. クイズを表示する関数 ---
function loadQuiz() {
const currentQuiz = quizData[currentQuestionIndex];
// 問題文と問題番号をセット
questionNumber.textContent = `第 ${currentQuestionIndex + 1} 問`;
questionText.textContent = currentQuiz.question;
// 選択肢のテキストをセット
currentQuiz.choices.forEach((choice, index) => {
choicesText[index].textContent = choice;
});
// ラジオボタンの選択を解除しておく
const radioButtons = document.getElementsByName('answer');
radioButtons.forEach(radio => radio.checked = false);
}
// 最初に1問目を表示
loadQuiz();
// --- 2. 回答ボタンが押された時の処理 ---
submitBtn.addEventListener('click', () => {
// ユーザーが選んだ回答の番号を取得
const radioButtons = document.getElementsByName('answer');
let selectedAnswer = -1;
radioButtons.forEach((radio, index) => {
if (radio.checked) {
selectedAnswer = index;
}
});
// 何も選ばれていない場合の処理（デバッグの第一歩！）
if (selectedAnswer === -1) {
alert("選択肢を選んでください！");
return;
}
// 正解判定
if (selectedAnswer === quizData[currentQuestionIndex].correct) {
score++;
alert("正解！");
} else {
alert("不正解...");
}
// 次の問題へ進むか、結果発表か
currentQuestionIndex++;
if (currentQuestionIndex < quizData.length) {
loadQuiz(); // 次の問題を表示
} else {
showResult(); // 全問終了
}
});
// --- 3. 結果を表示する関数 ---
function showResult() {
document.getElementById('quiz-form').style.display = 'none';
document.getElementById('question-area').style.display = 'none';
const resultArea = document.getElementById('result-area');
const resultMessage = document.getElementById('result-message');
resultArea.style.display = 'block';
resultMessage.textContent = `${quizData.length}問中 ${score}問 正解でした！`;
}
つまずきポイント：デバッグ方法
もし動かない場合は、ブラウザで F12キー を押して「コンソール（Console）」を確認しましょう。
例えば、console.log(selectedAnswer); とコード内に書いておけば、自分がどの番号を選択したと判定されているのかがリアルタイムで分かります。エラーメッセージは「解決のためのヒント」です。恐れずに読みましょう！
これで基本的なクイズシステムが完成しました。
次は、このクイズをさらにパワーアップさせる「ランク表示」や「カスタマイズ方法」について解説します。
あなたのサイトのURL、そろそろスリムにしませんか？
【Step3】クイズをさらに使いやすく拡張する
基本のクイズが動くようになったら、次はユーザーを飽きさせない工夫や、自分のサイトへ組み込むための実践的なテクニックを追加してみましょう。
正解数に応じたランク表示（診断テスト機能への応用）
全問終了後に「〇問正解でした！」と出すだけでなく、スコアに応じてメッセージを変えると、ユーザーの満足度がグッと上がります。これを応用すれば、性格診断や能力テストも作れるようになります。
先ほどの showResult() 関数を、以下のように書き換えてみましょう。
function showResult() {
document.getElementById('quiz-form').style.display = 'none';
document.getElementById('question-area').style.display = 'none';
const resultArea = document.getElementById('result-area');
const resultMessage = document.getElementById('result-message');
// スコアに応じてメッセージを分岐させる
let rankMessage = "";
if (score === quizData.length) {
rankMessage = "完璧です！JavaScriptマスターですね！";
} else if (score >= quizData.length / 2) {
rankMessage = "惜しい！あともう少しで全問正解です。";
} else {
rankMessage = "まずは基本から復習してみましょう！";
}
resultArea.style.display = 'block';
resultMessage.innerHTML = `
<strong>${quizData.length}問中 ${score}問 正解！</strong><br>
<p>${rankMessage}</p>
`;
}
WordPressやポートフォリオへの埋め込み・カスタマイズ方法
作成したクイズを自分のブログやポートフォリオ公開したい場合、以下の2つの方法がおすすめです。
1. WordPressの「カスタムHTML」ブロックを使う
WordPressを使っているなら、プラグインは不要です。
- 投稿編集画面で「カスタムHTML」ブロックを追加
<style>、HTML本体、<script>をまとめて貼り付けるだけで動作します。
2. 外部JavaScriptファイルとして読み込む
コードが長くなってきたら、HTMLとJSを分離して管理しましょう。
script.jsというファイル名で保存し、HTMLの</body>直前で以下のように読み込みます。<script src="script.js"></script>
問題を増やす・変更するには？
「JavaScript 3択 クイズ」を自作する最大のメリットは、中身を自由に入れ替えられることです。問題を増やす際は、quizData 配列に新しいオブジェクトを追加するだけで完了します。
// 問題を追加する例
const quizData = [
// ...既存の問題...
{
question: "新しい問題文をここに書く",
choices: ["選択肢A", "選択肢B", "選択肢C"],
correct: 0 // Aが正解なら0、Bなら1、Cなら2
}
];
アドバイス：選択肢を4択に増やしたい場合は、HTML側に id="choice3-text" のラベルを1つ増やし、JavaScriptの choicesText 配列にその要素を追加するだけで対応可能です。
これで、実用的なクイズプログラムが完成しました！最後に、初心者がぶつかりやすい疑問を解消しておきましょう。
国内シェアNo.1のエックスサーバーが提供するVPSサーバー『XServer VPS』
よくある質問（FAQ）
-
radioボタンとbutton（選択肢を直接ボタンにする）、どちらが良い？
-
アクセシビリティと「やり直し」の観点から、最初はradioボタンがおすすめです。
ボタン形式（クリックしたら即回答）はテンポが良いですが、誤操作で意図しない回答を選んでしまうリスクがあります。radioボタンは「選ぶ」と「送信する」が分かれているため、ユーザーが納得して回答できるメリットがあります。
-
正解の選択肢（0〜2）がコード上で丸見えなのが気になります。
-
フロントエンドJavaScriptの特性上、完全に隠すことは難しいです。
ブラウザ上で動くプログラムは、開発者ツールを使えば誰でも中身を見ることができます。もし「絶対にカンニングさせたくない」という本格的なクイズアプリを作る場合は、正解判定をサーバー側（PHPやNode.jsなど）で行う必要があります。
-
正解したときだけ「正解！」という音を鳴らすことはできますか？
-
JavaScriptの new Audio(‘sound.mp3’).play(); という1行を、正解判定の if 文の中に追加するだけで実装できます。ユーザー体験（UX）が向上するので、ぜひ挑戦してみてください。
-
問題数を10問、20問と増やしても動作は重くなりませんか？
-
全く問題ありません。
テキストデータだけであれば、数百問程度ではブラウザの動作に影響は出ません。ただし、画像付きのクイズにする場合は、画像の読み込み速度を考慮して「1問ずつデータを読み込む」などの工夫が必要になる場合があります。
まとめ
お疲れ様でした！これで、JavaScriptを使った**「コピペで動く3択クイズ」**の完成です。
一見難しそうに見えるクイズプログラムも、「HTMLで骨組みを作り」「CSSで見た目を整え」「JavaScriptでデータを操作する」というステップに分けることで、初心者の方でも論理的に組み立てられることが実感できたのではないでしょうか。
技術的には以下の重要なスキルに関連します。
基本の作り方が分かれば、カスタマイズの幅は無限大です。次はぜひ、以下のような機能追加に挑戦して、自分だけのオリジナル作品に仕上げてみてください。
- 4択クイズに改造： 選択肢を1つ増やし、ロジックを微調整してみる。
- 制限時間機能：
setTimeoutやsetIntervalを使って、回答時間を設ける。 - 画像クイズ： 問題文の代わりに
<img>タグを表示し、ビジュアルクイズにする。 - ランダム出題： 配列の順番をシャッフルして、毎回違う問題が出るようにする。
「実際に動くものを作ること」は最強の勉強法です。今回作ったクイズをベースに、試行錯誤を繰り返しながら、さらにスキルを磨いていってください。
