ReactでSlotMachineを作る(Step3: 仕様追加、リファクタリング実施)

前回までの記事の続きです。(シリーズ化予定)

▪️実装Step
Step1:基本編
Step2:Coin機能実装編
Step3: 仕様追加、リファクタリング実施　←いまここ
Step4:ワイルドカード、セブンカードの追加
Step5:ディレクトリ整理/リファクタリング

成果物

追加仕様
・当たった果物に応じて、コインの獲得枚数が変化する。

ビジネスロジックが複雑化する上で、実装難易度が上がりデバッグにも時間がかかり、開発生産性が低下します。
今回はビジネスロジックの切り出しとJestを使った検証をスコープにします。

ソースコード

ディレクトリ構成

~/develop/react/react_slot_machine$ tree -I node_modules 
.
├── README.md
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src
│   ├── App.tsx
│   ├── components
│   │   ├── Reel.tsx
│   │   ├── SlotMachine.test.tsx
│   │   ├── SlotMachine.tsx
│   │   ├── const.ts
│   │   ├── func.test.ts
│   │   ├── func.ts
│   │   └── type.ts
│   ├── index.tsx
│   ├── logo.svg
│   └── setupTests.ts
├── tsconfig.json
└── yarn.lock

4 directories, 21 files

src/components/const.ts

import {SymbolTile} from "./type";

export const INITIAL_COINS = 100;
export const BET_COINS = 3;

export const CHERRY_ID = "cherry";
export const LEMON_ID = "lemon";
export const ORANGE_ID = "orange";
export const GRAPE_ID = "grape";
export const WATERMELON_ID = "watermelon";

export const CHERRY_SYMBOL = "🍒";
export const LEMON_SYMBOL = "🍋";
export const ORANGE_SYMBOL = "🍊";
export const GRAPE_SYMBOL = "🍇";
export const WATERMELON_SYMBOL = "🍉";

export const SYMBOLS: SymbolTile[] = [
  {
    id: CHERRY_ID,
    label: CHERRY_SYMBOL,
    point: 10,
  },
  {
    id: LEMON_ID,
    label: LEMON_SYMBOL,
    point: 10,
  },
  {
    id: ORANGE_ID,
    label: ORANGE_SYMBOL,
    point: 10,
  },
  {
    id: GRAPE_ID,
    label: GRAPE_SYMBOL,
    point: 20,
  },
  {
    id: WATERMELON_ID,
    label: WATERMELON_SYMBOL,
    point: 30,
  },
];

src/components/type.ts

import {
  CHERRY_ID,
  CHERRY_SYMBOL,
  GRAPE_ID,
  GRAPE_SYMBOL,
  LEMON_ID,
  LEMON_SYMBOL,
  ORANGE_ID,
  ORANGE_SYMBOL,
  WATERMELON_ID,
  WATERMELON_SYMBOL,
} from "./const";

export type SymbolTile = {
  id: SymbolId;
  label: SymbolLabel;
  point: number;
};

export type SymbolId =
  | typeof CHERRY_ID
  | typeof LEMON_ID
  | typeof ORANGE_ID
  | typeof GRAPE_ID
  | typeof WATERMELON_ID;

export type SymbolLabel =
  | typeof CHERRY_SYMBOL
  | typeof LEMON_SYMBOL
  | typeof ORANGE_SYMBOL
  | typeof GRAPE_SYMBOL
  | typeof WATERMELON_SYMBOL;

src/components/SlotMachine.tsx

import React, {useState} from "react";
import {Reel} from "./Reel";
import Box from "@mui/material/Box";
import Button from "@mui/material/Button";
import {BET_COINS, INITIAL_COINS, SYMBOLS} from "./const"; // SymbolTileのインポート
import {SymbolTile} from "./type";
import {spinReels} from "./func";

export const SlotMachine: React.FC = () => {
  const [coins, setCoins] = useState(INITIAL_COINS);
  const [reels, setReels] = useState<SymbolTile[]>(Array(3).fill(SYMBOLS[0])); // SymbolTile型の配列

  const handleSpin = () => {
    const {newReels, win, points} = spinReels(reels, SYMBOLS, BET_COINS);
    setReels(newReels);
    setCoins((prev) => prev - BET_COINS + (win ? points : 0));
  };
  // TODO リファクタリング前
  //   const handleSpin = () => {
  //     const newReels = reels.map(
  //       () => SYMBOLS[Math.floor(Math.random() * SYMBOLS.length)]
  //     );
  //     setReels(newReels);
  //     setCoins((prev) => prev - BET_COINS);
  //     // 当たり判定
  //     if (new Set(newReels.map((tile) => tile.id)).size === 1) {
  //       setCoins((prev) => prev - BET_COINS + newReels[0].point); // 当たりならコインを追加
  //     }
  //   };

  const isWin = new Set(reels.map((tile) => tile.id)).size === 1;

  return (
    <Box sx={{textAlign: "center", marginTop: 4}}>
      <Box>Coinの枚数：{coins}枚</Box>
      <Box sx={{display: "flex", justifyContent: "center", gap: 2}}>
        {reels.map((tile, index) => (
          <Reel key={index} symbol={tile.label} />
        ))}
      </Box>
      <Button
        variant="contained"
        color="primary"
        style={{marginTop: "16px"}}
        onClick={handleSpin}
        disabled={coins < BET_COINS}
      >
        スピン
      </Button>
      {isWin && <Box sx={{marginTop: 2}}>勝利！</Box>}
    </Box>
  );
};

注目して欲しいのが、handleSpinの箇所です。
ビジネスロジックが複雑化するにつれ、handleSpinも行数が増え検証に時間がかかります。
フロントエンド開発でデバッグは「コード改修→レンダリング→ブラウザ操作→コンポーネント・ログ確認」で実施する事が一般的です。
ただコードが複雑化するにつれて回数も増えるため、デバッグの時間が長時間化します。そのため、ビジネスロジックは外部関数化し、関数はjest等で検証する方が効率的です。

src/components/func.ts

import {SymbolTile} from "./type";

export const spinReels = (
  currentReels: SymbolTile[],
  symbols: SymbolTile[],
  betCoins: number
): {newReels: SymbolTile[]; win: boolean; points: number} => {
  const newReels = currentReels.map(
    () => symbols[Math.floor(Math.random() * symbols.length)]
  );
  const win = new Set(newReels.map((tile) => tile.id)).size === 1;
  const points = win ? newReels[0].point : 0;

  return {newReels, win, points};
};

複雑化しそうなロジックは外部関数化しました。
この後、Jestで本関数の妥当性を検証していきます。

テストコード

今回は外部関数化したコードをJestで検証したいと思います。

src/components/func.test.ts

import {spinReels} from "./func";
import {SymbolTile} from "./type";

describe("spinReels function", () => {
  // テスト用のシンボルデータ
  const testSymbols: SymbolTile[] = [
    {id: "cherry", label: "🍒", point: 10},
    {id: "lemon", label: "🍋", point: 5},
  ];

  test("should return win true and points when all reels match", () => {
    // モック関数を使用して常に同じシンボルを返すようにする
    jest.spyOn(global.Math, "random").mockReturnValue(0);

    const {newReels, win, points} = spinReels(testSymbols, testSymbols, 3);

    expect(win).toBe(true);
    expect(points).toBe(testSymbols[0].point);
    expect(newReels.every((tile) => tile.id === testSymbols[0].id)).toBe(true);

    // モックをリセット
    jest.spyOn(global.Math, "random").mockRestore();
  });

  test("should return win false and points zero when not all reels match", () => {
    // ランダムな結果を得るためにモックを使用しない
    const {win, points} = spinReels(testSymbols, testSymbols, 3);

    expect(win).toBe(false);
    expect(points).toBe(0);
  });
});

実行結果

~/develop/react/react_slot_machine$ yarn test src/components/func.test.ts
 PASS  src/components/func.test.ts
  spinReels function
    ✓ should return win true and points when all reels match (1 ms)
    ✓ should return win false and points zero when not all reels match

Test Suites: 1 passed, 1 total
Tests:       2 passed, 2 total
Snapshots:   0 total
Time:        0.285 s, estimated 1 s
Ran all test suites matching /src\/components\/func.test.ts/i.

Active Filters: filename /src/components/func.test.ts/