Char Count｜リアルタイム文字数・バイト数 (UTF-8)・原稿用紙枚数カウンター

1. オンライン文字数・バイト数カウンター

テキストを入力すると、ブラウザ内でローカルに正確な文字数・バイト数をリアルタイム計算します。

---

2. JavaScript で絵文字を「1文字」と正しく数える現代のコード

// ❌ 従来の手法: 絵文字や国旗でカウントが狂う
console.log("👍".length); // 2
console.log("👨‍👩‍👧‍👦".length); // 11

// ✅ 現代の手法: Intl.Segmenter を使う (書き手・読み手の感覚通り 1 文字と判定)
function getGraphemeCount(text) {
  const segmenter = new Intl.Segmenter('ja', { granularity: 'grapheme' });
  return [...segmenter.segment(text)].length;
}

console.log(getGraphemeCount("👍")); // 1
console.log(getGraphemeCount("👨‍👩‍👧‍👦")); // 1

---

3. 注意点（ハマりどころ）

1. 改行コード（CRLF vs LF）によるバイト数のズレ
   • Windows (CRLF: \r\n) と Linux/macOS (LF: \n) で改行あたりのバイト数が 2 バイト vs 1 バイトと異なります。DB やフォーム送信時のバイト数超過エラーに注意してください。
2. データベース (VARCHAR) のバイト数オーバー
   • MySQL の VARCHAR(255) が「文字数」指定（utf8mb4）か「バイト数」指定（旧仕様）かによって保存可能文字数が異なります。日本語中心の場合はバイト数（文字数×3〜4）を考慮したカラム定義が必要です。