Reactで、文字をUTF-8のバイト列で表示する方法

// 文字列を UTF-8 のバイト列にして、表示用の文字列にする関数

const encoder = new TextEncoder();

export type ByteFormat = 'hex' | 'binary' | 'percent';

// 1バイトを、選んだ書き方の文字列にする
export function formatByte(byte: number, format: ByteFormat): string {
  switch (format) {
    case 'hex':
      return byte.toString(16).toUpperCase().padStart(2, '0');
    case 'binary':
      return byte.toString(2).padStart(8, '0');
    case 'percent':
      return '%' + byte.toString(16).toUpperCase().padStart(2, '0');
  }
}

export function formatBytes(bytes: Uint8Array, format: ByteFormat): string {
  const sep = format === 'percent' ? '' : ' ';
  return Array.from(bytes, (b) => formatByte(b, format)).join(sep);
}

export type CharBytes = {
  char: string; // 1つのコードポイント
  codePoint: string; // U+3042 の形
  bytes: Uint8Array; // その文字の UTF-8 のバイト列
  lone: boolean; // 対になっていないサロゲート（UTF-8 にできない）
};

// for...of はコードポイントごとに回るので、絵文字も1つの要素になる
export function splitToUtf8(text: string): CharBytes[] {
  const rows: CharBytes[] = [];
  for (const char of text) {
    const cp = char.codePointAt(0)!;
    rows.push({
      char,
      codePoint: 'U+' + cp.toString(16).toUpperCase().padStart(4, '0'),
      bytes: encoder.encode(char),
      lone: cp >= 0xd800 && cp <= 0xdfff,
    });
  }
  return rows;
}

export function utf8Bytes(text: string): Uint8Array {
  return encoder.encode(text);
}

import { useId, useState } from 'react';
import { formatBytes, splitToUtf8, utf8Bytes, type ByteFormat } from './utf8';

const FORMATS: { value: ByteFormat; label: string }[] = [
  { value: 'hex', label: '16進数' },
  { value: 'binary', label: '2進数' },
  { value: 'percent', label: '%記法' },
];

export function Utf8BytesViewer({ defaultValue = '' }: { defaultValue?: string }) {
  const id = useId();
  const [text, setText] = useState(defaultValue);
  const [format, setFormat] = useState<ByteFormat>('hex');

  // state は入力した文字列と書き方だけ。バイト列はレンダリングのたびに作る
  const bytes = utf8Bytes(text);
  const rows = splitToUtf8(text);

  return (
    <div className="utf8">
      <label htmlFor={id}>文字</label>
      <textarea id={id} rows={2} value={text} onChange={(e) => setText(e.target.value)} />

      <fieldset>
        <legend>バイトの書き方</legend>
        {FORMATS.map((f) => (
          <label key={f.value}>
            <input
              type="radio"
              name={`${id}-format`}
              value={f.value}
              checked={format === f.value}
              onChange={() => setFormat(f.value)}
            />
            {f.label}
          </label>
        ))}
      </fieldset>

      <p className="total">
        {rows.length} 文字（コードポイント）／<strong>{bytes.length} バイト</strong>
      </p>
      <output htmlFor={id} className="all">{formatBytes(bytes, format)}</output>

      <table>
        <thead>
          <tr>
            <th>文字</th>
            <th>コードポイント</th>
            <th>UTF-8（バイト数）</th>
          </tr>
        </thead>
        <tbody>
          {rows.map((row, i) => (
            <tr key={i} className={row.lone ? 'lone' : undefined}>
              <td>{row.char === ' ' ? '␣' : row.lone ? '（不正）' : row.char}</td>
              <td>{row.codePoint}</td>
              <td>
                {formatBytes(row.bytes, format)}
                <span className="count">（{row.bytes.length}）</span>
              </td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

.utf8 {
  display: grid;
  gap: 8px;
  max-width: 480px;
}
.utf8 textarea {
  font-size: 1.125rem;
  padding: 6px 8px;
}
.utf8 fieldset {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
}
.utf8 .total {
  margin: 0;
}
.utf8 .all {
  font-family: ui-monospace, monospace;
  overflow-wrap: anywhere;
  padding: 6px 8px;
  background: #eefafd;
}
.utf8 table {
  border-collapse: collapse;
}
.utf8 th,
.utf8 td {
  border: 1px solid #c8d4d9;
  padding: 4px 8px;
  text-align: left;
}
.utf8 td:nth-child(2),
.utf8 td:nth-child(3) {
  font-family: ui-monospace, monospace;
}
.utf8 .count {
  color: #067a98;
}
.utf8 tr.lone td {
  color: #d85878;
}