開発mdx-playground

テスト失敗修正・Cloudflareデプロイの日本語コミットメッセージ問題・公開記事3本

朝に pnpm test:run を流したら赤い行がずらりと並んだ。終わってみればテストを123件パスさせ、本番が静かに404を返していたwrangler問題を code: 8000111 一本に絞り込んで潰し、ついでに公開記事を3本書いてもらった。判断は自分、実行はClaude Code、という分担に最後まで戻ってきた一日。

1. テスト失敗修正（グループA: prefecture-quiz由来）

A-1: keydown ハンドラに修飾キーガードを足すだけで15件パス

find-prefecture.vue と shogi-board-demo.vue で keydown ショートカットがOSの修飾キーと食い合っていることに気づいた。テストの再現コードはCtrl+Rやcmd+Rを叩いてリロードを試すと、ページ内のショートカットが先に反応してしまう。

修正は1行だけ入れてもらった。

const onKeyDown = (e: KeyboardEvent) => {
  if (e.altKey || e.ctrlKey || e.metaKey) return
  // 既存のショートカット処理
}

これで15件まとめてパス。コードの中身は触らず、入口で「修飾キーが押されていたら即座に降りる」だけ。

A-2: OGメタタグ不足で26件失敗 → useQuizSeoMeta に集約

残りはOGメタタグの不足。prefecture-quiz の16ページに加え、security-cases系5ページの ogUrl も欠けていた。1ページずつ useSeoMeta を手書きしていく案は捨て、共通 composable useQuizSeoMeta を切り出してもらう方針にした。

  • composable側で title / description / ogUrl / ogImage を一気に組み立てる
  • 各ページは1行追加するだけで済む
  • テスト側も useQuizSeoMeta の呼び出しを認識するように拡張

副作用がページに散らばっていたのが、薄いシェル1つに集約された。全16ページでconsoleエラーゼロを確認し、計123件パス。コミットは 5d4b3c06。

途中で踏んだ小さな罠

TypeScriptの ! で narrowing を逃げる箇所がいくつか残っていて、sed で一括置換してもらおうとしたが、テンプレリテラル内に ! を含む箇所まで巻き込みそうになって途中で止めた。結局、変換は手作業で2箇所だけ。安易な置換は型と表現の境目を見ない、というのを思い出した。

2. Cloudflareデプロイで日本語コミットメッセージ問題

本番が静かに404を返していた

pnpm dev でローカルは元気に動いているのに、log.eurekapu.com/prefecture-quiz の目次ページにアクセスすると404が出ることに気づいた。今日のデプロイはGitHub Actionsを切ってあるので、ローカルから pnpm deploy:cloudflare を回すフローのはず。ところがログを見ると、今日のデプロイは全部失敗していた。表向きの "Success" だけ拾って終わっていた自分が悪い。

原因: wrangler が UTF-8 で死んでいた

5/14に「wrangler が途中で異常終了するから tee で stderr を残せ」と自分でメモを残しておいた。前日のメモが今日効いた。それに従って stderr を拾ってもらったところ、エラー本体が出てきた。

code: 8000111
"Invalid commit message: not valid UTF-8"

wrangler 4.68.1（自分が使っていたバージョン）は、Cloudflareにデプロイメタデータを送るときに git log -1 の結果を勝手にコミットメッセージとして拾う。Windows上の git log は日本語コミットメッセージをShift_JIS的なバイト列で吐くことがあって、それが UTF-8 として検証に落ちる、という構図だと特定できた。最新は 4.91.0。

解決: ASCIIメッセージを明示する

2段構えで対処することにした。

  1. wrangler を 4.91.0 にアップデート
  2. --commit-message フラグでASCIIを明示する
wrangler pages deploy ./dist \
  --project-name=eurekapu-log \
  --commit-message="redeploy 2026-05-15 16:32 5d4b3c06"

redeploy <YYYY-MM-DD HH:mm> <短縮SHA> の形に揃えた。日付と時刻とSHAだけならASCII範囲に収まる。4.91.0 へのアップグレードと scripts/measure-deploy.ps1 の更新は Claude Code に任せて、次から同じ穴に落ちないようにした。コミットは 16318eba。

本番に当て直して /prefecture-quiz の目次が出ることを確認。「デプロイ成功」と「ページが配信されている」は別物で、log を見ていなかった自分が悪い、というのを今日の教訓に置いた。

3. 公開記事3本

合間に書いてもらった検証記事3本。

CLI-Anything（HKUDS/CLI-Anything）の実態

「全てのソフトウェアを操れる」と謳う GitHub リポジトリを見せられて、眉に唾を付けた。READMEとサンプルを Claude Code に読み込ませて整理させると、実体は 「ソースコードとスクリプトAPIが公開されている一部のOSS GUIアプリ」 を、Claude Code に書かせるラッパーでCLI化するプラグインだとわかった。Photoshopや市販アプリは当然対象外。「全てのソフト」は誇張で、現実は「スクリプタブルなOSSの薄いCLIラッパージェネレータ」、という結論を記事にしてもらった。置き場所は apps/web/content/2026-05/2026-05-15/cli-anything-doubt.md。

Notion CLI ntn は Notion App の代替ではない

ntn は Notion API を叩く / Workers を作るためのCLI であって、Notionデスクトップアプリの代わりにはならない、というのが自分で触った感触。手元の用途で言うと、ZIPエクスポートを落として展開する作業を1コマンドにできる程度。デスクトップから乗り換える前提で触ると確実にがっかりする、という角度で独立記事にしてもらった。

Playwright Chrome拡張 vs Chrome DevTools MCP

Playwright Extension が Microsoft 公式かを確かめたくなって、リポジトリのオーナーを Claude Code に確認させた結果、公式と確定。用途は適材適所で、Playwright拡張は録画→コード生成、Chrome DevTools MCP は対話的な操作・検査が得意、と自分の中で整理した。ただ Chrome DevTools MCP も --remote-debugging-port=9223 でChromeを起動すれば普段ログイン済みのプロファイルに繋がる。今このプロジェクトでまさにその構成で動かしている。

4. 小さな調査メモ

  • Bloomberg AI関連指数（SDH100RT, SDLLMTK 等 Silicon Data社）: 完全無料の経路は無いと判断した。現実的にはSilicon Data CEO の Carmen Li（X: @carmenli）が定期的にXに数値を貼っていて、それを拾うのが一番速い、という結論。
  • 「裸足で走れるサンダル」探し: Xのブックマーク CSV を Claude Code に検索させた結果、明石ガクトのリカバリーサンダル投稿しか引っ掛からなかった。Chrome履歴を眺めると runsunjapan.com（ワラーチ）がそれっぽいが、本命の特定までは届かず。

5. 今日の構図

  • テスト失敗: 違和感（赤い行）を拾うのと、原因の切り分け（keydownかOGメタか）は自分、置換と一括修正は Claude Code に任せた
  • デプロイ問題: 本番が404という気付きが起点 → wrangler のバージョンと code: 8000111 の意味の絞り込みは Claude Code → 解決策（--commit-message 固定）の採用判断は自分
  • 公開記事3本: 「これは怪しい/これは違うのでは」という直感が起点 → READMEや仕様の読み込みと文章化は Claude Code に書かせた

判断する係と実行する係をしっかり分けて回すと、こういう「テスト・デプロイ・記事3本」みたいな雑多な一日でも荷物を残さずに畳める。