【JavaScript】Switch文を使うシーン

はじめに

こちらの記事にもある通り、現在Vanilla JSで野球クイズアプリを開発しています。

開発を進めている中で、問題の難易度ごとに配点を変えてみたいなと思ったので、その過程をメモします。

やりたいこと

• それぞれの問題に難易度を追加したい
• 難易度ごとに配点を変えたい

解決法

• まずはクイズデータの配列のそれぞれの要素に、「difficulty」プロパティを追加
• 1（最も簡単）〜5（最も難しい）の範囲で難易度を設定することにします

quizdata.js

const quizData = [
    {
      question: "日本はWBCで何回優勝している？",
      choices: ["1回", "2回", "3回", "4回"],
      answer: "3回",
      explanation: "日本は2006年、2009年、2023年にWBCで優勝しています。"
      difficulty: "3",
    },

    {
      question: "日本のプロ野球は何球団ある？",
      choices: ["10球団", "11球団", "12球団", "13球団"],
      answer: "12球団",
      explanation: "2023年4月時点で、日本のプロ野球は12球団です。"
      difficulty: "1",
    },

    {
      question: "日本のプロ野球は何リーグある？",
      choices: ["1リーグ", "2リーグ", "3リーグ", "4リーグ"],
      answer: "2リーグ",
      explanation: "2023年4月時点で、日本のプロ野球はセ・リーグとパ・リーグの2リーグ制です。"
      difficulty: "1",
    },

    // 以下略

];

export default quizData;

そして次に、quizController.js内のロジックを修正します。

quizController.js

import quizData  from "../data/quizdata.js";

let currentQuestionIndex = 0;
let score = 0;

function shuffle(array) {
    for (let i = (array.length - 1); i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
    }
}

// クイズ開始時に選択肢をシャッフル
shuffle(quizData);

function displayQuestion() {
    const question = document.getElementById('question');
    const scoreDisplay = document.getElementById('score');
    
    // 現在の質問と選択肢を表示
    question.textContent = quizData[currentQuestionIndex].question;
    quizData[currentQuestionIndex].choices.forEach((choice, index) => {
        const button = document.getElementById(`btn${index}`);
        button.textContent = choice;
        button.onclick = () => checkAnswer(choice);
    });
    
    // スコアを更新
    scoreDisplay.textContent = `スコア: ${score}`;
}

function checkAnswer(choice) {
    if (choice === quizData[currentQuestionIndex].answer) {
        switch (quizData[currentQuestionIndex].difficulty) {
            case '1':
                score += 10;
                alert(`正解です。\n${quizData[currentQuestionIndex].explanation}`);
                break;
            case '2':
                score += 20;
                alert(`正解です。\n${quizData[currentQuestionIndex].explanation}`);
                break;
            case '3':
                score += 30;
                alert(`正解です。\n${quizData[currentQuestionIndex].explanation}`);
                break;
            case '4':
                score += 40;
                alert(`正解です。\n${quizData[currentQuestionIndex].explanation}`);
                break;
            case '5':
                score += 50;
                alert(`正解です。\n${quizData[currentQuestionIndex].explanation}`);
                break;
            default:
                break;
        }
    } else {
        alert(`不正解です。\n${quizData[currentQuestionIndex].explanation}`);
    }

    currentQuestionIndex++;
    if (currentQuestionIndex < quizData.length) {
        displayQuestion();
    } else {
        alert(`クイズ終了！あなたのスコアは ${score} 点です。`);
        resetQuiz();
    }
}

// もしクイズが終了したら、最初の質問を表示する
function resetQuiz() {
    currentQuestionIndex = 0;
    score = 0;
    shuffle(quizData);
    displayQuestion();
}

// クイズの初期表示
displayQuestion();

ポイントは中段のswitch文です。

switch文を使うことで、値によって処理を分岐することができます。

今回の場合、最も簡単な難易度1の問題に正解すれば10点を追加します。

対して最も難しい難易度5の問題に正解すれば50点を追加します。

動作例

このように回答すると難易度に応じたスコアが加算され、次の問題が表示されます。

いくつかの値に応じて処理を分岐させる時に、switch文は便利ですね！