ここ数日でいろいろなプロジェクトをいじっていたので、メモがてら記録しておきます。

blog: Stylelint を導入した

このブログに Stylelint を導入しました。

npm install -D stylelint stylelint-config-standard stylelint-config-html postcss-html

Astro の場合は stylelint-config-html/astro を使うと .astro ファイル内の <style> タグを認識してくれます。

自動修正で CSS の色指定が rgb(255, 255, 255, 0.92) から rgb(255 255 255 / 92%) みたいなモダンな記法に変わったのが面白かった。100件くらい修正されました。

Meibo: ようやく配信で使えた

イベント参加者管理ツールとして作っていた Meibo を、ようやく配信で実際に使うことができました。

YouTube のチャット取得がちゃんと動いて、参加者の管理もスムーズにできて良かったです。

細かい改善としては：

• ライトモード対応を追加（Tailwind CSS の dark: プレフィックスで100件以上修正）
• ログ自動スクロールの挙動改善
• プレイヤー名編集時の Cannot set properties of null エラー修正

実際に使ってみるといろいろ気づくことがありますね。

.gitignore の罠

.gitignore にファイルを追加しても、既に Git が追跡しているファイルは無視されないんですね。今更ながら気づきました。

git rm --cached path/to/file

で解決。--cached を付けるとローカルのファイルは残ります。

メモ: よく遭遇するエラー

モーダルを閉じた直後の DOM 操作

// ❌ モーダルを閉じた後に要素にアクセスすると null になる
modal.close();
saveButton.textContent = '完了'; // エラー

モーダルを閉じる前に UI 更新するか、null チェックを入れると解決。

ログの自動スクロール

requestAnimationFrame でラップすると確実に動きます：

checkbox.addEventListener('change', (e) => {
  if (e.target.checked) {
    requestAnimationFrame(() => {
      logContainer.scrollTop = logContainer.scrollHeight;
    });
  }
});

---

blog と Meibo の改善ができたので、ひとまず満足です。