【JavaScript入門】入力した文字数をリアルタイムに表示する（commentArea.js）

node-js/
 └─ app/
     ├─ index.html
     ├─ style.css
     └─ js/
          ├─ common.js
          ├─ storage.js
          ├─ imageArea.js
          ├─ imageEffects.js
          ├─ controlArea.js
          ├─ commentArea.js   ← ★今回実装
          ├─ sendArea.js
          ├─ dateFormat.js
          └─ postListArea.js

/* ---------------------------------------------------
   commentArea.js
   - コメント入力の文字数カウント
   - 日本語 IME 確定後にのみカウント
--------------------------------------------------- */
window.addEventListener('DOMContentLoaded', () => {

  /* ===== DOM キャッシュ ===== */
  const elTxt  = document.querySelector('#comment');        // textarea
  const elStat = document.querySelector('#commentStatus');  // 文字数表示
  const lenMax = parseInt(elTxt.dataset.lenmax);            // data-lenmax="100"

  let inComp = false;   // IME 変換フラグ: true=変換中 false=確定済

  /* ----- IME 制御 (composition*) ----- */
  // 変換開始: カウント停止
  elTxt.addEventListener('compositionstart', () => inComp = true);

  // 変換確定: カウント再開
  elTxt.addEventListener('compositionend', () => {
    inComp = false;
    updateStatus();     // 確定直後に必ず更新
  });

  /* ----- 通常入力 (input) ----- */
  elTxt.addEventListener('input', () => {
    if (!inComp) updateStatus();   // IME 中はスキップ
  });

  /* ----- 文字数計算 & 表示更新 ----- */
  function updateStatus(){
    // [...str] 展開でサロゲートペア対応 (Emoji = 1 文字)
    const len = [...elTxt.value].length;

    // CSS クラス切替: 普通 or 警告
    const cls = len <= lenMax
      ? 'inputStatus'
      : 'inputStatus inputStatusWarn';

    // ラベル書き換え
    elStat.innerHTML =
      `<span class="${cls}">（${len}文字 / 最大${lenMax}文字）</span>`;

    // ローカルストレージへ即時保存 (storage.js 側で定義)
    saveCommentToStorage();
  }

  // ページ読み込み時に初期カウントを表示
  updateStatus();
});