4択クイズを作ろう（正解と点数を出そう）

たける つぎはクイズアプリを作ってみたいです！answerをおすと「正解！」って出るやつ。

りこ 作れるよ。新しいことはほとんどなし。配列＋map（第8回）と、条件＋state（第9回）の組み合わせだよ。

まずは1問のクイズから

いきなり何問も作らず、まずは1問だけのクイズから始めます。

問題・選択肢・正解を、こう用意します。

const question = '日本の首都はどこ？'
const choices = ['東京', '大阪', '京都', '札幌']
const answer = '東京'

選択肢のボタンは、map（第8回）でならべます。おされたら正解かどうかを調べて、メッセージを変えます。

import { useState } from 'react'

const question = '日本の首都はどこ？'
const choices = ['東京', '大阪', '京都', '札幌']
const answer = '東京'

function Quiz() {
  const [message, setMessage] = useState(question)

  const check = (choice) => {
    if (choice === answer) {
      setMessage('正解！🎉')
    } else {
      setMessage('ざんねん…もう一回！')
    }
  }

  return (
    <div>
      <p>{message}</p>
      {choices.map((c) => (
        <button key={c} onClick={() => check(c)}>{c}</button>
      ))}
    </div>
  )
}

• choices.map(...) … 選択肢のボタンを自動でならべる（第8回）
• check(c) … おされた選択肢が answer と同じか調べる（第9回の条件）
• setMessage(...) … メッセージを書きかえる（画面が自動で変わる）

たける ほんとだ、ボタンをならべるのもmapでできた！点数もつけたいです。

りこ じゃあ点数の state を足そう。正解のときに +1 するだけ。

点数をつける（発展）

点数を覚えるscoreと、正解済みかを覚えるansweredを足します。同じ正解ボタンを何度押しても、1問で何点も増えないようにします。正解後は別の答えを押しても結果を変えないように、checkの先頭でもansweredを確認します。

import { useState } from 'react'

const question = '日本の首都はどこ？'
const choices = ['東京', '大阪', '京都', '札幌']
const answer = '東京'

function Quiz() {
  const [message, setMessage] = useState(question)
  const [score, setScore] = useState(0)
  const [answered, setAnswered] = useState(false)

  const check = (choice) => {
    if (answered) return
    if (choice === answer) {
      setMessage('正解！🎉')
      setAnswered(true)
      setScore(n => n + 1)
    } else {
      setMessage('ざんねん…もう一回！')
    }
  }

  return (
    <div>
      <p>点数：{score}</p>
      <p>{message}</p>
      {choices.map((c) => (
        <button key={c} disabled={answered} onClick={() => check(c)}>{c}</button>
      ))}
    </div>
  )
}

やってみよう

StackBlitzで、question・choices・answer を自分の問題に変えてみましょう。

• 学校のなぞなぞ
• すきなアニメクイズ
• 算数の問題

正解のときに 🎉 の絵文字をふやしたり、不正解のときのメッセージを変えたりしても楽しいです。

App.jsxから表示する

上の例から1つ選び、src/App.jsx に置きます。同じ名前の関数やimportを重ねて貼らず、前の例を置き換えてください。最後に次を追加すると表示できます。

export default function App() {
  return <Quiz />
}

まとめ

• クイズは「配列＋map（第8回）」と「条件＋state（第9回）」の組み合わせで作れる
• choices.map(...) で選択肢ボタンを自動でならべる
• おされた選択肢を answer と比べて、正解か調べる
• score の state を足せば、点数もつけられる

次の第12回では、コンピュータと対戦するじゃんけんゲームを作ります。勝ち負けの判定に挑戦！

確認してみる

不正解→正解→同じ正解の連打の順に試す。正解後の点数が1のままで、ボタンが無効になることを確かめる。

仕様・手順の参照先