名前が20文字ちょうどでも保存できない — 文字数の数え方を1か所に決めるまでの実測

// trunc_probe.mjs — UTF-16 単位の slice が何を壊すか
const seg = new Intl.Segmenter('ja', { granularity: 'grapheme' });
const LONE_SURROGATE =
  /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/;
 
function inspect(source, limit) {
  const cut = source.slice(0, limit);                        // 素朴な切り詰め
  const roundTrip = Buffer.from(cut, 'utf8').toString('utf8'); // 送信を模した往復
  return {
    lone: LONE_SURROGATE.test(cut),        // 孤立サロゲートが残ったか
    replaced: roundTrip.includes('�'), // 置換文字になったか
  };
}

// packages/shared/text-length.ts
// クライアント(React Native)とサーバー(Workers)の両方から読む唯一のカウント実装。
// ⚠️ ここ以外の場所で .length による文字数判定を書かないこと。
 
/** 保存時に適用する正規化形式。検索用の NFKC とは意図的に分けている。 */
const STORAGE_FORM: 'NFC' = 'NFC';
 
let segmenter: Intl.Segmenter | null = null;
let segmenterChecked = false;
 
function getSegmenter(): Intl.Segmenter | null {
  if (segmenterChecked) return segmenter;
  segmenterChecked = true;
  try {
    // Hermes を含め、実行環境によっては Intl.Segmenter が存在しません。
    // 型ではなく実行時に確かめます。
    if (typeof Intl !== 'undefined' && typeof (Intl as any).Segmenter === 'function') {
      segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });
    }
  } catch {
    segmenter = null; // ロケール未対応などで throw する環境がある
  }
  return segmenter;
}
 
/** 上限判定・カウンタ表示・切り詰めのすべてが通る唯一の入口。 */
export function toGraphemes(input: string): string[] {
  const s = input.normalize(STORAGE_FORM);
  const seg = getSegmenter();
  if (seg) return Array.from(seg.segment(s), (x) => x.segment);
  return fallbackSegment(s);
}
 
export function countGraphemes(input: string): number {
  return toGraphemes(input).length;
}
 
/** 書記素の途中で切らない切り詰め。破損した文字を作らない。 */
export function truncateGraphemes(input: string, limit: number): string {
  if (limit <= 0) return '';
  const g = toGraphemes(input);
  if (g.length <= limit) return g.join('');
  return g.slice(0, limit).join('');
}
 
export type LengthCheck =
  | { ok: true; count: number }
  | { ok: false; count: number; reason: 'too_long' | 'lone_surrogate' };
 
const LONE_SURROGATE =
  /[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?<![\uD800-\uDBFF])[\uDC00-\uDFFF]/;
 
/** サーバー側の検証もこの関数を呼ぶ。クライアントと判定が一致する。 */
export function checkLength(input: string, limit: number): LengthCheck {
  // 壊れた文字が混じったまま保存すると、後段の全処理が汚染されます。
  if (LONE_SURROGATE.test(input)) {
    return { ok: false, count: 0, reason: 'lone_surrogate' };
  }
  const count = countGraphemes(input);
  return count <= limit ? { ok: true, count } : { ok: false, count, reason: 'too_long' };
}

// text-length.ts（続き）— Intl.Segmenter が無い環境向けの近似実装
const ZWJ = '\u200D'; // ZERO WIDTH JOINER
const VS16 = '\uFE0F'; // VARIATION SELECTOR-16
 
function isRegionalIndicator(cp: number): boolean {
  return cp >= 0x1f1e6 && cp <= 0x1f1ff; // 🇦〜🇿（2つで1つの国旗）
}
function isSkinTone(cp: number): boolean {
  return cp >= 0x1f3fb && cp <= 0x1f3ff; // 肌色修飾子
}
function isCombining(cp: number): boolean {
  // 結合分音記号・ハングル字母・異体字セレクタなど、前の文字に付く範囲
  return (
    (cp >= 0x0300 && cp <= 0x036f) ||
    (cp >= 0x1ab0 && cp <= 0x1aff) ||
    (cp >= 0x1dc0 && cp <= 0x1dff) ||
    (cp >= 0x20d0 && cp <= 0x20ff) ||
    (cp >= 0x3099 && cp <= 0x309a) || // 結合用の濁点・半濁点（初版で抜けていた）
    (cp >= 0xfe00 && cp <= 0xfe0f) ||
    (cp >= 0x0e31 && cp <= 0x0e3a) ||
    (cp >= 0x0e47 && cp <= 0x0e4e) ||
    (cp >= 0x093a && cp <= 0x094f) || // デーヴァナーガリーの母音記号・ヴィラーマ
    (cp >= 0x0951 && cp <= 0x0957) ||
    (cp >= 0x1160 && cp <= 0x11ff) || // ハングル母音字母・終声字母（初版は 0x11a8 から）
    (cp >= 0xe0100 && cp <= 0xe01ef)
  );
}
 
function fallbackSegment(s: string): string[] {
  const cps = Array.from(s);
  const out: string[] = [];
  let i = 0;
  while (i < cps.length) {
    let cluster = cps[i];
    i++;
    // 国旗は地域指示子2つで1つの書記素
    if (isRegionalIndicator(cluster.codePointAt(0)!) &&
        i < cps.length && isRegionalIndicator(cps[i].codePointAt(0)!)) {
      cluster += cps[i];
      i++;
      out.push(cluster);
      continue;
    }
    // 後続の結合要素・肌色・VS16・ZWJ連結を吸収する
    while (i < cps.length) {
      const next = cps[i];
      const cp = next.codePointAt(0)!;
      if (next === VS16 || isSkinTone(cp) || isCombining(cp)) {
        cluster += next;
        i++;
        continue;
      }
      if (next === ZWJ && i + 1 < cps.length) {
        cluster += next + cps[i + 1];
        i += 2;
        continue;
      }
      break;
    }
    out.push(cluster);
  }
  return out;
}

// fallback_probe.mjs — 退避実装を Intl.Segmenter と突き合わせる
const seg = new Intl.Segmenter('ja', { granularity: 'grapheme' });
const real = (s) => Array.from(seg.segment(s)).length;
 
let agree = 0, over = 0, total = 0;
for (const s of randomStrings(3000)) {   // 絵文字・結合文字・通常文字を混ぜた 5〜34 要素
  const a = real(s);
  const b = fallbackSegment(s).length;
  if (a === b) agree++;
  over += Math.abs(a - b);
  total += a;
}
console.log(`一致 ${agree}/3000  数えすぎ ${over}/${total}`);

// NameField.tsx — 入力欄側。maxLength は使わず、共有関数だけを通す
import { useCallback, useState } from 'react';
import { Text, TextInput, View } from 'react-native';
import { countGraphemes, truncateGraphemes } from '@shared/text-length';
 
const LIMIT = 20;
 
export function NameField({ initial = '' }: { initial?: string }) {
  const [value, setValue] = useState(initial);
  const count = countGraphemes(value);
 
  const onChangeText = useCallback((next: string) => {
    // maxLength に頼らず、書記素単位で切る。破損した文字を state に入れない。
    setValue(next.length > value.length ? truncateGraphemes(next, LIMIT) : next);
  }, [value.length]);
 
  return (
    <View>
      <TextInput
        value={value}
        onChangeText={onChangeText}
        // maxLength={LIMIT} は書かない（UTF-16 単位で効いてしまうため）
        accessibilityLabel="表示名"
      />
      <Text>{count} / {LIMIT}</Text>
    </View>
  );
}