Reactで、文章に出てくる単語の回数を数える方法

"猫は窓辺で眠る。猫は毎日よく眠る。"
   ["猫","は","窓辺","で","眠る","(。)","猫","は","毎日","よく","眠る","(。)"]
"The cat sat. the Cat ran!"
   ["The","( )","cat","( )","sat","(.)","( )","the","( )","Cat","( )","ran","(!)"]
"🐈‍⬛と🐈。"
   ["(🐈‍⬛)","と","(🐈)","(。)"]

export type WordCount = { word: string; count: number };

const segmenter = new Intl.Segmenter('ja', { granularity: 'word' });
const HIRAGANA_ONLY = /^[\p{Script=Hiragana}ー]+$/u;

// 全角の英数字を半角に、英字を小文字にそろえる
export function normalize(word: string): string {
  return word.normalize('NFKC').toLowerCase();
}

// 文章を単語に分けて、単語ごとの回数を数える。多い順、同じ回数なら先に出てきた順
export function countWords(text: string, skipHiragana = false): WordCount[] {
  const counts = new Map<string, number>();
  for (const { segment, isWordLike } of segmenter.segment(text)) {
    if (!isWordLike) continue; // 句読点や空白、記号は数えない
    const word = normalize(segment);
    if (skipHiragana && HIRAGANA_ONLY.test(word)) continue;
    counts.set(word, (counts.get(word) ?? 0) + 1);
  }
  return [...counts]
    .map(([word, count]) => ({ word, count }))
    .sort((a, b) => b.count - a.count);
}

入力 "The cat sat. the Cat ran! ＣＡＴ"
  cat:3 the:2 sat:1 ran:1

入力 "猫は窓辺で眠る。猫は毎日よく眠る。"
  猫:2 は:2 眠る:2 窓辺:1 で:1 毎日:1 よく:1
入力 "猫は窓辺で眠る。猫は毎日よく眠る。"（ひらがなだけの語を除く）
  猫:2 眠る:2 窓辺:1 毎日:1

入力 "猫が眠る。猫が眠った。猫は眠らない。"（ひらがなだけの語を除く）
  猫:3 眠:2 眠る:1

入力 "ねこと猫と犬。"
  ね:1 こと:1 猫:1 と:1 犬:1
入力 "東京都に行きました。"
  東京:1 都:1 に:1 行き:1 ま:1 した:1

import { useId, useState } from 'react';
import { countWords } from './words';

const SAMPLE =
  '猫は窓辺で眠ります。朝になると、猫は台所に来て、ごはんを待ちます。' +
  'ごはんを食べた猫は、また窓辺に戻って眠ります。' +
  '雨の日の猫は、窓の外をじっと見ています。';

export function WordFrequency() {
  const [text, setText] = useState(SAMPLE);
  const [skipHiragana, setSkipHiragana] = useState(false);
  const textId = useId();

  const words = countWords(text, skipHiragana);
  const total = words.reduce((sum, w) => sum + w.count, 0);
  const top = words.slice(0, 10);

  return (
    <div className="word-frequency">
      <label htmlFor={textId}>文章</label>
      <textarea id={textId} rows={6} value={text} onChange={(e) => setText(e.target.value)} />

      <label>
        <input
          type="checkbox"
          checked={skipHiragana}
          onChange={(e) => setSkipHiragana(e.target.checked)}
        />
        ひらがなだけの語は数えない
      </label>

      <p className="summary">
        {total}語のうち、異なる語は{words.length}語です。
      </p>

      <table>
        <thead>
          <tr>
            <th scope="col">順位</th>
            <th scope="col">単語</th>
            <th scope="col">回数</th>
          </tr>
        </thead>
        <tbody>
          {top.map((w, i) => (
            <tr key={w.word}>
              <td>{i + 1}</td>
              <td>{w.word}</td>
              <td>{w.count}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

--- 最初の表示
summary : 47語のうち、異なる語は29語です。
rows    : ["1 猫 4","2 は 4","3 ます 4","4 に 3","5 を 3","6 の 3","7 窓辺 2","8 眠り 2","9 ごはん 2","10 で 1"]
--- 「ひらがなだけの語は数えない」にチェック
summary : 19語のうち、異なる語は14語です。
rows    : ["1 猫 4","2 窓辺 2","3 眠り 2","4 朝 1","5 台所 1","6 来 1","7 待ち 1","8 食 1","9 戻 1","10 雨 1"]

10000字（6184語）を数える時間 中央値 4.4ms 最小 4.2ms 最大 4.5ms
100000字（61842語）を数える時間 中央値 59.3ms 最小 43.4ms 最大 80.8ms