Reactで、メンバーをランダムにグループ分けする方法

// メンバーのグループ分け。React とは関係のない関数だけを置く

// 1行に1人。前後の空白を取り、空の行と同じ名前の2回目以降を除く
export function parseMembers(text: string): string[] {
  const names = text.split('\n').map((line) => line.trim()).filter((name) => name !== '');
  return [...new Set(names)];
}

// 配列を並べ替えた新しい配列を返す（Fisher–Yates のシャッフル）
export function shuffle<T>(items: readonly T[], rand: () => number = Math.random): T[] {
  const a = [...items];
  for (let i = a.length - 1; i > 0; i--) {
    const j = Math.floor(rand() * (i + 1));
    [a[i], a[j]] = [a[j], a[i]];
  }
  return a;
}

// count 個のグループに、人数の差が1人以内になるように配る
export function splitIntoGroups<T>(items: readonly T[], count: number, rand: () => number = Math.random): T[][] {
  const groups: T[][] = Array.from({ length: count }, () => []);
  shuffle(items, rand).forEach((item, i) => {
    groups[i % count].push(item);
  });
  return groups;
}

// 1グループの人数の上限から、グループの数を決める
export function countForSize(total: number, size: number): number {
  return Math.ceil(total / size);
}

3対3: 75058 / 4対2: 56318 / 2対4: 56148 / 5対1: 22708 / 1対5: 22424 / 6対0: 3711 / 0対6: 3633

import { useState } from 'react';
import { parseMembers, splitIntoGroups } from './groups';

// 比べるための版：グループを描画のたびに計算している
export function GroupMakerV1() {
  const [text, setText] = useState('');
  const [shown, setShown] = useState(false);
  const members = parseMembers(text);
  const groups = splitIntoGroups(members, 3);

  return (
    <div className="groups">
      <textarea rows={8} value={text} onChange={(e) => setText(e.target.value)} />
      <button type="button" onClick={() => setShown(true)}>
        グループに分ける
      </button>
      {shown && (
        <ol className="result">
          {groups.map((group, i) => (
            <li key={i}>
              <h3>グループ {i + 1}</h3>
              <ul>
                {group.map((name) => (
                  <li key={name}>{name}</li>
                ))}
              </ul>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

押した直後: ["グループ 1 たぬき・くま・ねこ・うさぎ","グループ 2 りす・ひつじ・いぬ","グループ 3 さる・しか・きつね"]
末尾に空白を足した 1 回目: ["グループ 1 うさぎ・くま・いぬ・さる","グループ 2 ひつじ・りす・きつね","グループ 3 しか・ねこ・たぬき"]
末尾に空白を足した 2 回目: ["グループ 1 いぬ・しか・たぬき・ひつじ","グループ 2 ねこ・くま・きつね","グループ 3 うさぎ・りす・さる"]
末尾に空白を足した 3 回目: ["グループ 1 いぬ・しか・りす・たぬき","グループ 2 ねこ・くま・ひつじ","グループ 3 うさぎ・さる・きつね"]

import { useId, useState } from 'react';
import { countForSize, parseMembers, splitIntoGroups } from './groups';

type Mode = 'count' | 'size';
type Result = { key: string; groups: string[][] };

const NUMBERS = [2, 3, 4, 5, 6, 7, 8, 9, 10];

export function GroupMaker() {
  const id = useId();
  const [text, setText] = useState('');
  const [mode, setMode] = useState<Mode>('count');
  const [n, setN] = useState(2);
  const [result, setResult] = useState<Result | null>(null);

  const members = parseMembers(text);
  const wanted = mode === 'count' ? n : countForSize(members.length, n);
  const count = Math.min(wanted, members.length); // 人数より多いグループは作らない
  const key = JSON.stringify([members, count]);
  const stale = result !== null && result.key !== key;

  function handleSplit() {
    setResult({ key, groups: splitIntoGroups(members, count) });
  }

  return (
    <div className="groups">
      <label htmlFor={`${id}-members`}>メンバー（1行に1人）</label>
      <textarea id={`${id}-members`} rows={8} value={text} onChange={(e) => setText(e.target.value)} />
      <p className="hint">{members.length} 人</p>

      <fieldset>
        <legend>分け方</legend>
        <label>
          <input type="radio" name={`${id}-mode`} checked={mode === 'count'} onChange={() => setMode('count')} />
          グループの数を決める
        </label>
        <label>
          <input type="radio" name={`${id}-mode`} checked={mode === 'size'} onChange={() => setMode('size')} />
          1グループの人数を決める
        </label>
      </fieldset>

      <label htmlFor={`${id}-n`}>{mode === 'count' ? 'グループの数' : '1グループの人数（最大）'}</label>
      <select id={`${id}-n`} value={n} onChange={(e) => setN(Number(e.target.value))}>
        {NUMBERS.map((v) => (
          <option key={v} value={v}>
            {mode === 'count' ? `${v} グループ` : `${v} 人まで`}
          </option>
        ))}
      </select>

      <button type="button" disabled={members.length < 2} onClick={handleSplit}>
        {result ? 'もう一度分ける' : 'グループに分ける'}
      </button>

      {stale && <p className="hint">メンバーか分け方が変わりました。ボタンを押すと分け直します。</p>}
      {result && (
        <ol className={stale ? 'result stale' : 'result'}>
          {result.groups.map((group, i) => (
            <li key={i}>
              <h3>
                グループ {i + 1}（{group.length} 人）
              </h3>
              <ul>
                {group.map((name) => (
                  <li key={name}>{name}</li>
                ))}
              </ul>
            </li>
          ))}
        </ol>
      )}
    </div>
  );
}

.groups {
  display: grid;
  gap: 8px;
  max-width: 420px;
}
.groups textarea {
  font-size: 1rem;
}
.groups .hint {
  margin: 0;
  color: #555;
  font-size: 0.875rem;
}
.groups fieldset {
  display: grid;
  gap: 4px;
}
.groups select,
.groups button {
  font-size: 1rem;
  min-height: 44px;
}
.groups .result {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
  padding: 0;
  list-style: none;
}
.groups .result > li {
  padding: 8px;
  border: 2px solid #00c8e8;
  border-radius: 8px;
}
.groups .result h3 {
  margin: 0 0 4px;
  font-size: 0.875rem;
  color: #067a98;
}
.groups .result ul {
  margin: 0;
  padding-left: 1.2em;
}
.groups .result.stale {
  opacity: 0.4;
}