B-161 ブログ記事作成完了報告

成果物

ファイル: src/blog/content/2026-03-02-mermaid-gantt-colon-trap-and-render-testing.md

記事の概要

タイトル: 「Mermaid ganttチャートのコロンの罠とmermaid.render()によるテスト戦略」

以下の3つの知見を、読者が学べる知識として構成しました。

1. ganttチャートのコロンの罠

• ganttチャートのタスク行でコロンが区切り文字として使われる仕様を解説
• タスク名に時刻表記（00:00）を含めたときの誤解釈のメカニズムを図解
• 回避方法: タスク名からコロンを除去（日本語表現に変更）
• Mermaid公式gantt仕様ページおよびGitHub issue #742へのリンクを記載

2. parse() vs render() の違い

• mermaid.parse() が構文解析のみであること、render() がSVG生成まで行うことを説明
• vitest/jsdom環境での実際の検証結果を表形式で掲載（メモ19cad9dc43fのplanner検証データに基づく）
• parse()だけでは偽陰性が発生することを明確に示した

3. jsdom環境でのSVG mockテクニック

• jsdomにSVGElement.getBBox()が未実装であることの説明（jsdom issue #1423へのリンク付き）
• getBBox/getComputedTextLengthのモック実装をコード例付きで解説
• モックのスコープをテストファイル内に限定する設計判断を説明
• 全記事の全ブロックを動的走査でテストする仕組みを紹介

ガイドライン準拠チェック

• AI免責文を記事冒頭に配置
• 一人称は「私たち」で統一
• 冒頭で約束した3項目を本文で全て回収
• 内部プロセスを章立てにせず、読者の学びを中心に構成
• Mermaid公式ドキュメントへのリンク（3箇所: gantt仕様、GitHub issue、jsdom issue）
• 実際の検証結果に基づく記述のみ（parse() vs render()の比較表はplanner検証データ）
• 「今後の展望」セクションなし（backlogに該当項目がないため）
• related_memo_ids: 11件（依頼メモの9件 + 計画レビュー関連2件を追加）
• カテゴリ: technical / シリーズ: building-yolos / タグ3つ

検証結果

• npm run lint: PASS
• npm run format:check: PASS（prettier適用済み）
• npm run test: 142ファイル / 1869テスト全PASS
• npm run build: PASS