Reactで、文章を読むのにかかる時間の目安を表示する方法

読む時間（分）= 日本語の文字数 ÷ 1分に読む文字数 + 英単語の数 ÷ 1分に読む語数

export type ReadingTime = { chars: number; words: number; minutes: number };

const wordSegmenter = new Intl.Segmenter('ja', { granularity: 'word' });
const graphemeSegmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });
const LATIN = /\p{Script=Latin}/u;
const SPACE = /^\s+$/u;

// 英単語は語の数、それ以外は見た目の1文字ごとに数える（空白は数えない）
export function countText(text: string): { chars: number; words: number } {
  let chars = 0;
  for (const { segment } of graphemeSegmenter.segment(text)) {
    if (SPACE.test(segment) || LATIN.test(segment)) continue; // 空白と英字は文字数に入れない
    chars++;
  }
  let words = 0;
  for (const { segment, isWordLike } of wordSegmenter.segment(text)) {
    if (isWordLike && LATIN.test(segment)) words++; // 英字を含む語を、英単語として数える
  }
  return { chars, words };
}

// 1分に読む文字数と語数から、読むのにかかる時間（分）を出す
export function estimateReadingTime(
  text: string,
  charsPerMinute: number,
  wordsPerMinute: number,
): ReadingTime {
  const { chars, words } = countText(text);
  const minutes = chars / charsPerMinute + words / wordsPerMinute;
  return { chars, words, minutes };
}

"猫は窓辺で眠ります。"
  countText: {"chars":10,"words":0}  length: 10
"React の useState で state を持つ。"
  countText: {"chars":6,"words":3}  length: 29
"🐈‍⬛と🐈。"
  countText: {"chars":4,"words":0}  length: 8
"猫が3匹、2026年に。"
  countText: {"chars":12,"words":0}  length: 12
"Reading time is shown above the title."
  countText: {"chars":1,"words":7}  length: 38

// 画面に出す文。1分未満は「1分未満」、それ以外は四捨五入して「約○分」
export function formatMinutes(minutes: number): string {
  if (minutes < 1) return '1分未満';
  return `約${Math.round(minutes)}分`;
}

0字 → 0.000分 → (表示しない)
1字 → 0.002分 → 1分未満
499字 → 0.998分 → 1分未満
500字 → 1.000分 → 約1分
749字 → 1.498分 → 約1分
750字 → 1.500分 → 約2分
1200字 → 2.400分 → 約2分
3000字 → 6.000分 → 約6分

// <time datetime> に入れる長さの文字列（例：PT2M24S）。秒は切り上げる
export function toDuration(minutes: number): string {
  const seconds = Math.ceil(minutes * 60);
  return `PT${Math.floor(seconds / 60)}M${seconds % 60}S`;
}

import { estimateReadingTime, formatMinutes, toDuration } from './reading-time';

type Props = {
  text: string;
  charsPerMinute?: number;
  wordsPerMinute?: number;
};

const numberFormat = new Intl.NumberFormat('ja-JP');

export function ReadingTime({ text, charsPerMinute = 500, wordsPerMinute = 200 }: Props) {
  const { chars, words, minutes } = estimateReadingTime(text, charsPerMinute, wordsPerMinute);
  if (chars === 0 && words === 0) return null;

  return (
    <p className="reading-time">
      この記事は<time dateTime={toDuration(minutes)}>{formatMinutes(minutes)}</time>で読めます
      <span className="reading-time-detail">
        （{numberFormat.format(chars)}字{words > 0 && `、英単語${numberFormat.format(words)}語`}）
      </span>
    </p>
  );
}

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

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

export function Editor() {
  const [text, setText] = useState(SAMPLE);
  const [charsPerMinute, setCharsPerMinute] = useState(500);
  const textId = useId();
  const speedId = useId();

  return (
    <div className="editor">
      <label htmlFor={speedId}>1分に読む文字数</label>
      <select
        id={speedId}
        value={charsPerMinute}
        onChange={(e) => setCharsPerMinute(Number(e.target.value))}
      >
        <option value={300}>300字</option>
        <option value={500}>500字</option>
        <option value={700}>700字</option>
      </select>

      <label htmlFor={textId}>本文</label>
      <textarea id={textId} rows={8} value={text} onChange={(e) => setText(e.target.value)} />

      <ReadingTime text={text} charsPerMinute={charsPerMinute} />
    </div>
  );
}

--- 最初の表示（見本の文章、1分に500字）
  表示 : この記事は1分未満で読めます（56字）
  time : PT0M7S
--- 「猫」を1200字
  表示 : この記事は約2分で読めます（1,200字）
  time : PT2M24S
--- 1分に読む文字数を300字に
  表示 : この記事は約4分で読めます（1,200字）
  time : PT4M0S
--- 1分に読む文字数を700字に
  表示 : この記事は約2分で読めます（1,200字）
  time : PT1M43S
--- 「猫」1000字と英単語200語（700字）
  表示 : この記事は約2分で読めます（1,000字、英単語200語）
  time : PT2M26S
--- 空欄
  表示 : (なし)
--- 空白と改行だけ
  表示 : (なし)

// 英単語は語の数、それ以外は見た目の1文字ごとに数える（空白は数えない）
export function countText(text: string): { chars: number; words: number } {
  let chars = 0;
  let words = 0;
  for (const { segment, isWordLike } of wordSegmenter.segment(text)) {
    if (isWordLike && LATIN.test(segment)) {
      words++;
      continue;
    }
    if (SPACE.test(segment)) continue;
    for (const _ of graphemeSegmenter.segment(segment)) chars++;
  }
  return { chars, words };
}

  区切りごとに書記素を数える版 10000字の文字列 {"chars":6412,"words":468} 中央値 76.8ms 最小 15.7ms 最大 104.6ms
  区切りごとに書記素を数える版 100000字の文字列 {"chars":64074,"words":4686} 中央値 885.1ms 最小 226.5ms 最大 985.8ms
  2回に分けて数える版         10000字の文字列 {"chars":6412,"words":468} 中央値 4.4ms 最小 4.1ms 最大 4.8ms
  2回に分けて数える版         100000字の文字列 {"chars":64074,"words":4686} 中央値 28.4ms 最小 27.6ms 最大 31.5ms