Reactで、ファイルのハッシュ値を計算して表示する方法

export const ALGORITHMS = ['SHA-1', 'SHA-256', 'SHA-384', 'SHA-512'] as const;
export type Algorithm = (typeof ALGORITHMS)[number];

// ArrayBuffer を、1バイトを2桁の16進数にした文字列にする
export function toHex(buffer: ArrayBuffer): string {
  return Array.from(new Uint8Array(buffer), (b) => b.toString(16).padStart(2, '0')).join('');
}

export async function hashFile(file: Blob, algorithm: Algorithm): Promise<string> {
  if (!globalThis.crypto?.subtle) {
    throw new Error('この画面では Web Crypto API が使えません（HTTPS か localhost で開いてください）');
  }
  const data = await file.arrayBuffer(); // ファイル全体をメモリに読み込む
  const digest = await crypto.subtle.digest(algorithm, data);
  return toHex(digest);
}

// sha256sum の出力（「ハッシュ値  ファイル名」）を貼っても比べられるように、先頭の語だけを取る
export function normalizeHash(text: string): string {
  return (text.trim().split(/\s+/)[0] ?? '').toLowerCase();
}

NotSupportedError: Failed to execute 'digest' on 'SubtleCrypto': Algorithm: Unrecognized name

5891b5b522d5df086d0ff0b110fbd9d21bb4fc7163af34d08286a2e846f6be03  hello.txt
e3b0c44298fc1c149afbf4c8996fb92427ae41e4649b934ca495991b7852b855  empty.bin
e0a39a2e2f96a231a23747cce09164c600a161f0b1c976c89ce970cf82ff3860  random-1mb.bin

import { useEffect, useId, useState } from 'react';
import { ALGORITHMS, hashFile, normalizeHash, type Algorithm } from './hash';

type Result = {
  file: File;
  algorithm: Algorithm;
  hash?: string;
  error?: string;
};

export function FileHash() {
  const [file, setFile] = useState<File | null>(null);
  const [algorithm, setAlgorithm] = useState<Algorithm>('SHA-256');
  const [result, setResult] = useState<Result | null>(null);
  const [expected, setExpected] = useState('');
  const id = useId();

  useEffect(() => {
    if (!file) return;
    let ignore = false;
    hashFile(file, algorithm).then(
      (hash) => {
        if (!ignore) setResult({ file, algorithm, hash });
      },
      (e: unknown) => {
        if (!ignore) setResult({ file, algorithm, error: e instanceof Error ? e.message : String(e) });
      },
    );
    return () => {
      ignore = true; // ファイルか方式が変わったら、前の計算の結果は捨てる
    };
  }, [file, algorithm]);

  // 今選んでいるファイルと方式の結果がまだなければ、計算中
  const current = result && result.file === file && result.algorithm === algorithm ? result : null;
  const want = normalizeHash(expected);

  return (
    <div className="file-hash">
      <p>
        <label htmlFor={`${id}-file`}>ファイル</label>
        <input id={`${id}-file`} type="file" onChange={(e) => setFile(e.target.files?.[0] ?? null)} />
      </p>
      <p>
        <label htmlFor={`${id}-alg`}>方式</label>
        <select id={`${id}-alg`} value={algorithm} onChange={(e) => setAlgorithm(e.target.value as Algorithm)}>
          {ALGORITHMS.map((a) => (
            <option key={a}>{a}</option>
          ))}
        </select>
      </p>
      {file && (
        <section aria-live="polite">
          <p className="name">
            {file.name}（{file.size.toLocaleString('ja-JP')} バイト）
          </p>
          {!current && <p className="status">計算中…</p>}
          {current?.error && <p className="error">{current.error}</p>}
          {current?.hash && <output className="hash">{current.hash}</output>}
        </section>
      )}
      <p>
        <label htmlFor={`${id}-expected`}>比べる値</label>
        <input id={`${id}-expected`} value={expected} onChange={(e) => setExpected(e.target.value)} placeholder="公開されているハッシュ値を貼る" />
      </p>
      {current?.hash && want && (
        <p className={want === current.hash ? 'match' : 'mismatch'}>{want === current.hash ? '一致しました' : '一致しません'}</p>
      )}
    </div>
  );
}

// 比べる版：選んだときのイベントで計算し、終わった順に state を書きかえる
import { useState } from 'react';
import { hashFile } from './hash';

export function NaiveFileHash() {
  const [file, setFile] = useState<File | null>(null);
  const [hash, setHash] = useState('');

  async function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
    const f = e.target.files?.[0] ?? null;
    setFile(f);
    setHash('');
    if (f) setHash(await hashFile(f, 'SHA-256'));
  }

  return (
    <div>
      <input type="file" aria-label="ファイル" onChange={handleChange} />
      {file && <p className="name">{file.name}</p>}
      {hash && <output className="hash">{hash}</output>}
    </div>
  );
}

NaiveFileHash（1回目）
     39ms large-300mb.bin | (なし)
     58ms hello.txt | (なし)
     62ms hello.txt | 5891b5b522d5df08
   2855ms hello.txt | 04e8a1c905133b5c

FileHash（1回目）
     47ms large-300mb.bin（314,572,800 バイト） | 計算中…
     60ms hello.txt（6 バイト） | 計算中…
     65ms hello.txt（6 バイト） | 5891b5b522d5df08

// Worker の中でファイルを読み込み、ハッシュ値を計算して返す
import { hashFile, type Algorithm } from './hash';

type Request = { file: File; algorithm: Algorithm };

self.onmessage = async (e: MessageEvent<Request>) => {
  try {
    postMessage({ hash: await hashFile(e.data.file, e.data.algorithm) });
  } catch (err) {
    postMessage({ error: err instanceof Error ? err.message : String(err) });
  }
};

import type { Algorithm } from './hash';

// signal が中止されたら Worker を止める（計算も途中でやめる）
export function hashFileInWorker(file: File, algorithm: Algorithm, signal: AbortSignal): Promise<string> {
  return new Promise((resolve, reject) => {
    const worker = new Worker('hash.worker.js');
    const stop = () => {
      worker.terminate();
      reject(signal.reason);
    };
    signal.addEventListener('abort', stop, { once: true });
    worker.onmessage = (e: MessageEvent<{ hash?: string; error?: string }>) => {
      signal.removeEventListener('abort', stop);
      worker.terminate();
      if (e.data.hash) resolve(e.data.hash);
      else reject(new Error(e.data.error));
    };
    worker.postMessage({ file, algorithm });
  });
}

useEffect(() => {
    if (!file) return;
    let ignore = false;
    const controller = new AbortController();
    hashFileInWorker(file, algorithm, controller.signal).then(
      (hash) => {
        if (!ignore) setResult({ file, algorithm, hash });
      },
      (e: unknown) => {
        if (!ignore) setResult({ file, algorithm, error: e instanceof Error ? e.message : String(e) });
      },
    );
    return () => {
      ignore = true; // ファイルか方式が変わったら、前の計算の結果は捨てる
      controller.abort(); // 前の計算をしている Worker も止める
    };
  }, [file, algorithm]);