【React入門】クイズアプリの作り方完全ガイド｜スコア機能で楽しく学べる！

Reactを学びたいけど、何を作ればいいかわからない…。
そんな初心者の方におすすめなのが「クイズアプリ」です。
画面表示・状態管理・イベント処理など、Reactの基本がすべて詰まっています。
さらに、スコア機能も追加することで学べる幅が広がります。
本記事では、Reactでスコア付きのクイズアプリをゼロから実装する手順を、
小学生にもわかる言葉と構造でわかりやすく解説します。

クイズアプリとは？基本の仕組みを解説
1. クイズアプリの構成とは
2. なぜReactで作るのが良いのか
Reactクイズアプリの画面構成を考える
1. 実際のUI構成を分解
2. 部品（コンポーネント）ごとの役割
クイズデータを作成しよう
1. まずはクイズのデータを準備
2. データのポイント
スコア機能の作り方を丁寧に解説
1. useStateでスコアを管理
2. 回答チェック時の処理
全体をまとめた完成コード
まとめ

クイズアプリとは？基本の仕組みを解説

クイズアプリの構成とは

まずは、クイズアプリの基本構成を説明します。

問題の出題
回答の選択
正誤の判定
次の問題へ
スコアの集計と表示

この仕組みを通じて、useStateやイベント処理の理解が深まります。

なぜReactで作るのが良いのか

Reactは画面の切り替えや状態の管理が得意なライブラリです。

少ないコードで見た目が作れる
変更がすぐに画面に反映される
データの管理がしやすい

これらの特長を活かすことで、効率よくアプリを作る力が身につきます。

Reactクイズアプリの画面構成を考える

実際のUI構成を分解

以下のような画面を作ります。

「スタートボタン」
「クイズ文・選択肢」
「スコア表示」
「もう一度ボタン」

Reactでは、部品を小さく分けて考えるのが基本です。

部品（コンポーネント）ごとの役割

例えば以下のように分けます。

App.js：全体をまとめる
Question.js：問題の表示
Score.js：スコア表示

こうすることで、コードの見通しが良くなり、修正も簡単になります。

クイズデータを作成しよう

まずはクイズのデータを準備

以下のように配列として問題を用意します。

const quizData = [
  {
    question: "日本の首都はどこ？",
    options: ["大阪", "東京", "福岡", "札幌"],
    answer: "東京"
  },
  {
    question: "1 + 1 は？",
    options: ["1", "2", "3", "4"],
    answer: "2"
  }
];

データのポイント

配列の中にオブジェクトを入れる
質問、選択肢、答えの3要素で構成

この構造は今後のアプリで再利用しやすくなります。

スコア機能の作り方を丁寧に解説

useStateでスコアを管理

Reactでは、useStateフックを使ってスコアを管理します。

1	`const [score, setScore] = useState(0);`

回答チェック時の処理

選択肢をクリックしたら、正解かどうかを確認します。

const handleAnswer = (selectedOption) => {
  if (selectedOption === quizData[currentQuestion].answer) {
    setScore(score + 1);
  }
  setCurrentQuestion(currentQuestion + 1);
};

正解なら加点する、この仕組みを使ってスコアを簡単に増やせます。

全体をまとめた完成コード

import React, { useState } from "react";
const quizData = [
  {
    question: "日本の首都はどこ？",
    options: ["大阪", "東京", "福岡", "札幌"],
    answer: "東京"
  },
  {
    question: "1 + 1 は？",
    options: ["1", "2", "3", "4"],
    answer: "2"
  }
];
const App = () => {
  const [currentQuestion, setCurrentQuestion] = useState(0);
  const [score, setScore] = useState(0);
  const [isFinished, setIsFinished] = useState(false);
  const handleAnswer = (selectedOption) => {
    if (selectedOption === quizData[currentQuestion].answer) {
      setScore(score + 1);
    }
    const nextQuestion = currentQuestion + 1;
    if (nextQuestion < quizData.length) {
      setCurrentQuestion(nextQuestion);
    } else {
      setIsFinished(true);
    }
  };
  const restartQuiz = () => {
    setCurrentQuestion(0);
    setScore(0);
    setIsFinished(false);
  };
  return (
    <div style={{ padding: "2rem" }}>
      {isFinished ? (
        <div>
          <h2>あなたのスコア：{score} / {quizData.length}</h2>
          <button onClick={restartQuiz}>もう一度</button>
        </div>
      ) : (
        <div>
          <h2>{quizData[currentQuestion].question}</h2>
          {quizData[currentQuestion].options.map((option, idx) => (
            <button key={idx} onClick={() => handleAnswer(option)} style={{ display: "block", margin: "1rem 0" }}>
              {option}
            </button>
          ))}
        </div>
      )}
    </div>
  );
};
export default App;