おみくじ＆ガチャを作ろう（ランダムに挑戦）

たける ここまでで覚えたことで、何が作れますか？おみくじとか作ってみたい！

りこ いいね、作ろう。新しく覚えるのは「ランダム（乱数）」だけ。あとは前に学んだ state と配列でできるよ。

いよいよ「作って楽しいアプリ」のセクションです。第9回までの知識（state・配列）に、ランダムを足すだけで、おみくじが作れます。

ランダム（乱数）の作り方

「毎回ちがう結果」を出すには、コンピュータにサイコロをふってもらいます。それが Math.random() です。

Math.random()   // 0以上1未満の、毎回ちがう数（例：0.42…）

これを使って、配列の中からランダムに1つ選ぶ式がこちらです。

const results = ['大吉🎉', '中吉😊', '小吉🙂', '凶😢']

const i = Math.floor(Math.random() * results.length)
const choice = results[i]

1行ずつ分けると、こうです。

• Math.random() … 0〜1のランダムな数
• * results.length … それを「個数（ここでは4）」ぶんに広げる（0〜4の手前まで）
• Math.floor(...) … 小数点を切りすてて、0 1 2 3 のどれかにする
• results[i] … その番号の結果を取り出す

おみくじを作る

useState でいまの結果を覚えて、ボタンをおすと引き直すようにします。

import { useState } from 'react'

const results = ['大吉🎉', '中吉😊', '小吉🙂', '凶😢']

function Omikuji() {
  const [result, setResult] = useState('？？？')

  const draw = () => {
    const i = Math.floor(Math.random() * results.length)
    setResult(results[i])
  }

  return (
    <div>
      <h2>きょうのうんせい</h2>
      <p style={{ fontSize: 40 }}>{result}</p>
      <button onClick={draw}>おみくじを引く</button>
    </div>
  )
}

ボタンをおすたびに、まん中の結果が変わります。

たける できた！引くたびに変わる！これ、ずっと押しちゃいますね。

りこ 同じしくみで「ガチャ」も作れるよ。中身（results）を変えるだけ。

おなじしくみで「ガチャ」に

results の中身を変えるだけで、ガチャになります。レアっぽい言葉にしてみましょう。

const results = [
  '★★★ ウルトラレア！',
  '★★ レア',
  '★ ノーマル',
  '★ ノーマル',
]

「ノーマル」を2つ入れると、その分だけ出やすくなります（4つのうち2つがノーマルなので、出る割合が高い）。こうやって「レアは出にくく」を作れます。

やってみよう

StackBlitzで、results の中身を自分の好きな言葉に変えてみましょう。

• 給食メニューおみくじ（['カレー🍛', 'ラーメン🍜', 'あげぱん', ...]）
• 今日のラッキーカラー
• そうじ当番ガチャ

結果の数をふやしたり、出やすさを変えたりして、自分だけのおみくじにしてください。

まとめ

• Math.random() で「毎回ちがう数」が作れる
• results[Math.floor(Math.random() * results.length)] で、配列からランダムに1つ選べる
• useState で結果を覚え、ボタンの onClick で引き直す
• results の中身を変えるだけで、おみくじにもガチャにもなる

次の第11回では、4択クイズを作ります。選択肢をならべて、正解かどうかを判定しますよ。