Reactを学びたいけど、何を作ればいいかわからない…。
そんな初心者の方におすすめなのが「クイズアプリ」です。
画面表示・状態管理・イベント処理など、Reactの基本がすべて詰まっています。
さらに、スコア機能も追加することで学べる幅が広がります。
本記事では、Reactでスコア付きのクイズアプリをゼロから実装する手順を、
小学生にもわかる言葉と構造でわかりやすく解説します。
クイズアプリとは？基本の仕組みを解説
クイズアプリの構成とは
まずは、クイズアプリの基本構成を説明します。
- 問題の出題
- 回答の選択
- 正誤の判定
- 次の問題へ
- スコアの集計と表示
この仕組みを通じて、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フックを使ってスコアを管理します。
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;
まとめ
- クイズアプリはReact初心者にぴったりです
- 状態管理・イベント処理の基本を学べます
- スコア機能の追加で応用力も身につきます
ぜひ実際にコードを書いて、Reactの基礎と楽しさを体感してください。
▶ 関連記事もチェック：
Japanese 
English