ゼロから作るクイズアプリ入門：HTML・CSS・JavaScriptで学ぶ実践チュートリアル（サンプルコード付き）

クイズアプリは、プログラミング学習やエンターテインメントに最適なプロジェクトです。HTML、CSS、JavaScriptを組み合わせて作成することで、基本的なWeb技術の理解を深められます。本記事では、クイズアプリの作成手順、構造、機能実装のポイントを詳しく解説します。

1. クイズアプリの基本構造
1. HTMLの基本例
2. JavaScriptで動作を実装する
あなたのスコアは ${score} / ${quizData.length} です！
3. デザインの工夫とユーザー体験の向上
4. フレームワークを使ったクイズアプリ開発
5. クイズアプリ作成のステップまとめ
6. 実際に作るときのポイント
7. まとめ
1. ゼロから作るクイズアプリ入門：HTML・CSS・JavaScriptで学ぶ実践チュートリアル（サンプルコード付き）をまとめました

1. クイズアプリの基本構造

クイズアプリは主に3つの要素で構成されます。

HTML：問題文や選択肢の表示など、画面の骨格を作る
CSS：見た目のデザインやレイアウトを整える
JavaScript：問題の切り替えや正誤判定などの動作を制御する

これらを分けて管理することで、保守性が高く拡張しやすいアプリが作れます。

HTMLの基本例

まずは問題文と選択肢を表示するためのHTMLの骨組みを作ります。

<div class="quiz-container">
  <h1>クイズアプリ</h1>
  <p id="question">ここに問題文が表示されます。</p>
  <div id="choices">
    <button class="choice">選択肢1</button>
    <button class="choice">選択肢2</button>
    <button class="choice">選択肢3</button>
    <button class="choice">選択肢4</button>
  </div>
  <button id="submit">回答する</button>
  <p id="score">スコア: 0</p>
</div>

2. JavaScriptで動作を実装する

JavaScriptはクイズのロジックを担います。問題データの管理、ユーザーの回答判定、スコア計算、画面の更新などを行います。

問題データの管理

問題文、選択肢、正解をオブジェクトの配列で管理します。例えば：

const quizData = [
  {
    question: "JavaScriptで「Hello World」を正しく表示するコードはどれ？",
    choices: [
      "document.write('Hello World');",
      "document.write(Hello World);",
      "console.log('Hello World');",
      "print('Hello World');"
    ],
    correct: 0
  },
  {
    question: "HTMLの正しいタグはどれ？",
    choices: [
      "<div>",
      "<section>",
      "<article>",
      "すべて正しい"
    ],
    correct: 3
  }
];

問題の表示と回答の判定

現在の問題番号を管理し、画面に問題文と選択肢を表示します。ユーザーが選択肢をクリックすると回答を判定し、正解ならスコアを加算します。

サンプルコードの一部

let currentQuestionIndex = 0;
let score = 0;

function showQuestion() {
  const questionElem = document.getElementById('question');
  const choicesElem = document.getElementById('choices');
  const currentQuiz = quizData[currentQuestionIndex];

  questionElem.textContent = currentQuiz.question;
  choicesElem.innerHTML = '';

  currentQuiz.choices.forEach((choice, index) => {
    const button = document.createElement('button');
    button.textContent = choice;
    button.classList.add('choice');
    button.addEventListener('click', () => selectAnswer(index));
    choicesElem.appendChild(button);
  });
}

function selectAnswer(selectedIndex) {
  const currentQuiz = quizData[currentQuestionIndex];
  if (selectedIndex === currentQuiz.correct) {
    score++;
  }
  currentQuestionIndex++;
  if (currentQuestionIndex < quizData.length) {
    showQuestion();
  } else {
    showResult();
  }
}

function showResult() {
  const quizContainer = document.querySelector('.quiz-container');
  quizContainer.innerHTML = `



あなたのスコアは ${score} / ${quizData.length} です！`;
}

document.getElementById('submit').addEventListener('click', () => {
  // 回答ボタンを押したときの処理（必要に応じて実装）
});

showQuestion();