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 を足して、正解のときに1点ふやします。

import { useState } from 'react'

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

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

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

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

やってみよう

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

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

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

まとめ

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

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