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

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

りこ いいね、作ろう。新しく覚えるのは「ランダム（乱数）」だけ。あとは前に学んだ 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 の中身を自分の好きな言葉に変えてみましょう。

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

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

App.jsxから表示する

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

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

まとめ

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

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

確認してみる

結果を2種類にして何回か引く。同じ結果が続いても故障ではない。配列が空だと結果を選べないので1つ以上入れる。

仕様・手順の参照先