• #SVG
  • #チャート
  • #投資メモ
  • #公開記事
  • #AEHR
  • #Lumentum
  • #AAOI
  • #ファクトチェック
開発mdx-playground

AEHRのバックログSVGチャートとLumentum/AAOI投資判断メモを一気に公開した日

Downloads配下に積もっていた素材を、その日のうちに3本まとめて公開記事に変えた。AEHRのバックログを積み上げ横棒チャートで描いて再利用テンプレートの再現性を試した記事、Lumentum (LITE) の投資判断メモをそのまま公開した記事、AAOI を自分で書いてからユーザー提供メモでファクトチェックして上書きした記事。フォーマットも担当者も違う3本を、同じ日付ディレクトリに揃えた。

何を公開したか

ファイル種別ソース
aehr-backlog-chart-template-test.mdSVGチャート + 解説Downloads配下のテンプレート
lumentum-lite-investment-thesis.md投資判断メモDownloads配下の既存メモ
aaoi-investment-thesis.md投資判断メモ自前収集 → ユーザー提供メモでファクトチェック

3本とも apps/web/content/2026-04/2026-04-27/ 直下に置いた。AEHRはチャート画像 (aehr-backlog-chart.svg) と生成スクリプト (scripts/generate-aehr-backlog-chart.mjs) も同梱した。

AEHR: テンプレートを他人に渡しても再現できるかを試した

Downloads/backlog_stacked_chart_template.md には「期首バックログ + 受注 - 売上 = 期末バックログ」のT字勘定を19四半期ぶん積み上げる、再利用前提のプロンプトが入っていた。書いた本人は描けて当然で、別セッションのClaudeに渡したときに同じ図が出てこないと「再利用テンプレート」を名乗れない。今回は意図的に「他人視点」でゼロから読んで実装した。

データ整合性チェックでFY25 Q1のズレを発見

チャートを描く前に、19四半期ぶんの「期首残 + 受注 = 売上 + 期末残」を全行で検算した。FY25 Q1 だけ $5.6M の差が残った。テンプレート原文の数字を尊重してそのまま採用し、記事内で「整合性が取れない四半期がある」と明記する形に倒した。チャート上にも 合計 22.3 = 22.2 のような注記を残してある。

// 整合性チェックの考え方
const isConsistent = (q) =>
  Math.abs((q.openBacklog + q.bookings) - (q.revenue + q.endBacklog)) < 0.5

値ラベルが小さすぎたら省略する

FY22 Q1 の期首残 1.6 のような小さい値は、棒の幅が 16px しかなく、ラベル文字(18px相当)を載せると枠を突き抜けて読めなくなる。barWidth < 18 ? '' : value の分岐を1行入れて、視認できないラベルは諦める実装にした。テンプレート原文には書かれていなかった「省略の閾値」が、ここで初めて顔を出した。

配色をモノクロからカラーに切り替えた

最初はテンプレート原文どおり4階調グレースケールで描いた。フロー2要素(受注・売上)に注目させたかったので、受注をオレンジ (#c2410c)、売上をネイビー (#1e40af) に振り、期首残・期末残はグレー据え置きで背景化した。ブラウザがキャッシュした古いSVGを掴み続けたので、強制リロードでようやく差分が反映された。

Chrome DevTools MCPの接続が安定しない

dev server を起動してブラウザ確認に行ったら、Chrome DevTools MCP の接続が落ち着かなかった。レンダリング後のHTMLを直接取得する経路に切り替えて、SVGの構造とサイズだけ確認して先に進めた。確認手段が1つ詰まっても、別ルートが残っていれば作業は止まらない。

Lumentum: 公開前の調整は2点だけ

Downloads/Lumentum_LITE_投資判断メモ.md を読んだら、投資メモとしての構造が整っていてAI臭も薄かった。frontmatterを足して path/lumentum-lite-investment-thesis に切り、本文の細かい言い回しを2箇所だけ調整して、そのまま apps/web/content/2026-04/2026-04-27/ に置いた。Downloads配下の元ファイルは破壊的な操作になるので残してある。

AAOI: 自分で書いた記事をユーザー提供メモで上書きした

最初はユーザーから「LITEと同じ章立てで書いて」と頼まれただけだったので、自分で AAOI の決算と業績推移を集めて、Lumentum と並べて読める形で書いた。あとから別セッションで作成された詳細メモ (Downloads/AAOI_投資判断メモ.md) が共有された。

そのまま置き換えるのではなく、まず主要数字を1つずつファクトチェックした。元メモには検証で確認できた重要事実が多く含まれていたが、いくつか正確でない数字が混じっていた。ファクトチェックを通った数字だけを採用し、自分の記事に上書き反映した。

「先に書いた自分の記事 vs 後から来た詳細メモ」のどちらを残すかではなく、「数字単位で検証して合成する」形にしたのが今日の選択だった。

学びメモ

  • 再利用テンプレートは他人に渡して初めて価値が測れる: 自分で書いて自分で再現できるのは当然で、別セッションで再現できなかった瑕疵(20四半期表記なのに実データは19四半期、FY25 Q1の $5.6M ズレ)が今回テンプレートを更新する材料になった
  • 整合性が取れない数字は隠さず記事に書く: チャート上に 合計 22.3 = 22.2 と残したことで、後で見返したときに「ここはデータソース由来のズレ」だと一目でわかる
  • ファクトチェックは数字単位で行う: 元メモを丸ごと採用するか丸ごと棄却するかの二択ではなく、数字を1つずつ検証して通ったものだけ残す。AAOI 記事はこの方法で「自分の収集 + ユーザー提供メモ」のハイブリッドになった
  • 確認手段は2系統持っておく: Chrome DevTools MCP が詰まっても、HTML直接取得で構造とサイズの検証はできた。1系統に依存しないことで「ブラウザで見られないから止まる」を避けられた

関連ファイル

  • apps/web/content/2026-04/2026-04-27/aehr-backlog-chart-template-test.md
  • apps/web/content/2026-04/2026-04-27/aehr-backlog-chart.svg
  • apps/web/content/2026-04/2026-04-27/lumentum-lite-investment-thesis.md
  • apps/web/content/2026-04/2026-04-27/aaoi-investment-thesis.md
  • scripts/generate-aehr-backlog-chart.mjs