Reactで、パスワードを作るボタンを作る方法

1バイト % 62 : 期待値 100000 回、最多 121956 回、最少 96265 回、最多/最少 = 1.267、多い順の10文字 = fdcaghbe82
  先頭8文字（a〜h）の平均 121369 回、残り54文字の平均 96834 回、比 1.253
randomInt(62): 期待値 100000 回、最多 100867 回、最少 99164 回、最多/最少 = 1.017、多い順の10文字 = QLsJoa4IAe

// 0 以上 max 未満の整数を、偏りなく返す
export function randomInt(max: number): number {
  const range = 2 ** 32;
  // max で割り切れる範囲だけを使い、はみ出した値は捨てて引き直す
  const limit = range - (range % max);
  const buf = new Uint32Array(1);
  while (true) {
    crypto.getRandomValues(buf);
    if (buf[0] < limit) return buf[0] % max;
  }
}

export const CHARSETS = {
  lower: 'abcdefghijklmnopqrstuvwxyz',
  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
  digit: '0123456789',
  symbol: '!#$%&*+-=?@_',
} as const;

export type CharsetKey = keyof typeof CHARSETS;

// 見分けにくい文字（大文字のアイ、小文字のエル、数字の1、大文字のオー、数字の0、小文字のオー）
const AMBIGUOUS = /[Il1O0o]/g;

export function buildPools(sets: CharsetKey[], excludeAmbiguous: boolean): string[] {
  return sets.map((k) => (excludeAmbiguous ? CHARSETS[k].replace(AMBIGUOUS, '') : CHARSETS[k]));
}

// 0 以上 max 未満の整数を、偏りなく返す
export function randomInt(max: number): number {
  const range = 2 ** 32;
  // max で割り切れる範囲だけを使い、はみ出した値は捨てて引き直す
  const limit = range - (range % max);
  const buf = new Uint32Array(1);
  while (true) {
    crypto.getRandomValues(buf);
    if (buf[0] < limit) return buf[0] % max;
  }
}

export function generatePassword(length: number, sets: CharsetKey[], excludeAmbiguous: boolean): string {
  const pools = buildPools(sets, excludeAmbiguous);
  if (pools.length === 0 || length < pools.length) {
    throw new RangeError('文字の種類が選ばれていないか、長さが足りません');
  }
  const all = pools.join('');
  // 選んだ種類の文字がすべて入るまで、丸ごと作り直す
  while (true) {
    let password = '';
    for (let i = 0; i < length; i++) password += all[randomInt(all.length)];
    if (pools.every((pool) => [...pool].some((c) => password.includes(c)))) return password;
  }
}

// 使う文字の数と長さから、組み合わせの数を2の何乗かで表す（目安）
export function estimateBits(length: number, sets: CharsetKey[], excludeAmbiguous: boolean): number {
  const size = buildPools(sets, excludeAmbiguous).join('').length;
  return size === 0 ? 0 : Math.floor(length * Math.log2(size));
}

import { useState } from 'react';
import { CHARSETS, estimateBits, generatePassword, type CharsetKey } from './generatePassword';

const LABELS: Record<CharsetKey, string> = {
  lower: '小文字（a〜z）',
  upper: '大文字（A〜Z）',
  digit: '数字（0〜9）',
  symbol: '記号（!#$%&*+-=?@_）',
};
const KEYS = Object.keys(CHARSETS) as CharsetKey[];

export function PasswordGenerator() {
  const [length, setLength] = useState(16);
  const [sets, setSets] = useState<CharsetKey[]>(KEYS);
  const [excludeAmbiguous, setExcludeAmbiguous] = useState(false);
  const [password, setPassword] = useState('');
  const [copied, setCopied] = useState(false);

  // 長さの下限（4）は種類の数（最大4）以上なので、種類が1つ以上あれば作れる
  const canGenerate = sets.length > 0;

  const toggleSet = (key: CharsetKey) =>
    setSets((prev) => KEYS.filter((k) => (k === key ? !prev.includes(k) : prev.includes(k))));

  const handleGenerate = () => {
    setPassword(generatePassword(length, sets, excludeAmbiguous));
    setCopied(false);
  };

  const handleCopy = async () => {
    await navigator.clipboard.writeText(password);
    setCopied(true);
  };

  return (
    <div className="pg">
      <label className="pg-length">
        長さ：{length}文字
        <input
          type="range"
          min={4}
          max={64}
          value={length}
          onChange={(e) => setLength(Number(e.target.value))}
        />
      </label>
      <fieldset className="pg-sets">
        <legend>使う文字</legend>
        {KEYS.map((key) => (
          <label key={key}>
            <input type="checkbox" checked={sets.includes(key)} onChange={() => toggleSet(key)} />
            {LABELS[key]}
          </label>
        ))}
        <label>
          <input
            type="checkbox"
            checked={excludeAmbiguous}
            onChange={(e) => setExcludeAmbiguous(e.target.checked)}
          />
          見分けにくい文字（I l 1 O 0 o）を使わない
        </label>
      </fieldset>

      <button type="button" className="pg-generate" onClick={handleGenerate} disabled={!canGenerate}>
        パスワードを作る
      </button>
      {!canGenerate && <p className="pg-hint">使う文字を1種類以上選んでください。</p>}

      <div className="pg-result">
        <input
          aria-label="作ったパスワード"
          value={password}
          readOnly
          spellCheck={false}
          autoComplete="off"
        />
        <button type="button" onClick={handleCopy} disabled={password === ''}>
          {copied ? 'コピーしました' : 'コピー'}
        </button>
      </div>
      {canGenerate && (
        <p className="pg-bits">
          組み合わせの数：約 2<sup>{estimateBits(length, sets, excludeAmbiguous)}</sup> 通り
        </p>
      )}
    </div>
  );
}

.pg { display: grid; gap: 12px; max-width: 480px; font-size: 15px; color: #1f2a30; }
.pg-length { display: grid; gap: 4px; }
.pg-sets { display: grid; gap: 6px; border: 1px solid #c8dde3; border-radius: 6px; }
.pg-generate { padding: 10px; font: inherit; font-weight: bold; color: #fff; background: #067a98; border: 0; border-radius: 6px; cursor: pointer; }
.pg-generate:disabled { background: #9aa5ab; cursor: not-allowed; }
.pg-hint { margin: 0; color: #b03050; }
.pg-result { display: flex; gap: 8px; }
.pg-result input { flex: 1; min-width: 0; padding: 8px; font: 16px ui-monospace, monospace; background: #eefafd; border: 1px solid #c8dde3; border-radius: 6px; }
.pg-bits { margin: 0; color: #067a98; }

1回目: r471TAh?aIP3fZ%+（16文字、小大数記=1111）
2回目: T8?EMMDlXE8GqKSC（16文字、小大数記=1111）
3回目: rp=lPC84q*jPf1&c（16文字、小大数記=1111）