2026年5月17日の開発日記

日曜の朝、eurekapu-nuxt4 の未コミット 3 系統を片付けたところで、ふと「家族旅行の計画を Cloudflare にデプロイしたい」と思い立った。そこから一日中 Astro で family-trips プロジェクトを組み立て、ガントチャート、Leaflet 地図、意思決定ページまで形にしてしまった日。

今日のタイムライン

今日やったこと

1. 朝、eurekapu-nuxt4 の積み残し 3 系統を朝の 30 分で回収

昨日のサマリーには載っていないのに、git status で 3 系統の未コミット作業（CH8 Micron 事例、TOC FAB、クイズパンくず）が残っていた。「ほぼ完成・未テスト」の状態をどう片付けるか、Claude Code に進捗をマークダウンで吐かせてから動いた。

主な成果:

• 3 系統を chrome-devtools MCP で実機確認（ナロー初回レンダで FAB が出ない挙動も拾えた）
• 意味のある単位で 3 つの本コミットに分割して push
• スクショ系のメモは untracked のまま残す判断

詳細: 投資判断教科書の未コミット 3 系統を朝に発見、実機で確認しながら分割コミットで片付けた話

2. family-trips プロジェクトを Astro + Cloudflare Pages で立ち上げ

8月の大分帰省を皮切りに、家族旅行の計画と記録を残すサイトを Astro でゼロから立ち上げた。Nuxt ではなく Astro を選んだのはコンテンツコレクションが「旅行ごとに1ページ」のアーカイブ構造とぴったり合うから。pnpm の minimumReleaseAge（サプライチェーン攻撃対策）が Astro 6.3.3 を弾いて、10日前リリースの 6.3.1 にバージョン固定。

主な成果:

• Astro + Vue インテグレーション + Leaflet（OpenStreetMap）構成
• GitHub（private）→ Cloudflare Pages デプロイ完了
• Cloudflare Access（One-time PIN メール認証）で家族メンバーだけ閲覧できる方針
• Wikimedia 画像の ORB ブロックには public/images/guides/ に同一オリジン配信で対処

詳細: 家族旅行アーカイブを Astro + Cloudflare Pages で立ち上げた記録（pnpm の minimumReleaseAge で躓いた話含む）

3. 旅行日程ガントチャートのレーン構成・転置レイアウトを試行錯誤

旅行詳細ページの最上部にガントチャートを置いた。レーン構成 2 本 → 6 本 → 7 本、時間目盛り 0/6/12/18 → 3 時間刻み、日付またぎ線の太さと色を 3 往復、短バーの潰れ対策に min-height 確保、そして横長から 縦長レイアウトに転置。ロジックは src/lib/gantt.ts に純粋関数として切り出して Vitest で 30 件 pass。

主な成果:

• 縦長 7 レーンのガントチャートに着地
• Vitest 30 件 pass、カバレッジ Statements 91% / Lines 94%
• dev サーバを 4321/4322/4323/4324 と無計画に増やした失敗 → 全 kill して 4321 に統一

詳細: 旅行日程ガントチャートのレーン構成・転置レイアウトを試行錯誤した記録

4. 大分エリアの行きたい場所 60 件＋福岡ガイド 2 本を Leaflet で地図化

ターミナルのタグ付きテーブルでは距離感が掴めなかったので、左サイドにカードリスト、右側に Leaflet マップを置く Google マップ風の分割 UI に作り変えた。福岡 2 泊 3 日の家族ガイドと 1 泊 2 日の下見ガイドも同じ構造で展開。ガントバーをクリックすると地図ズーム＋ピンハイライト＋右パネル表示が連動する仕掛けを入れた。

主な成果:

• Tooltip → 矢印付き Popup に切替（カードがピンから離れすぎていた）
• タイル切替（OpenStreetMap ⇄ CartoDB Positron）＋ localStorage 保存
• ピンのラベル常時表示モード ON/OFF トグル
• 座標ミス（ハーモニーランド）を Web 検索で正しい値に修正

詳細: 大分の行きたい場所 60 件＋福岡ガイド 2 本を Leaflet で地図化：左カードリスト×右マップの分割 UI を Claude Code に組ませた一日

5. 意思決定ページと家族年齢の動的計算

リゾートホテル A に泊まるかの意思決定を可視化する専用ページを作った。Excel の 3 シート（基本 4 シナリオ／5 シナリオ／体験価値分解）を JSON に起こして、計算ロジックを src/lib/sugino-i.ts に純粋関数として切り出し、Vue コンポーネントでインタラクティブな感度分析を載せた。家族の生年月は .gitignore で除外して、import.meta.glob で「あれば読む、無ければ空配列」に倒した。

主な成果:

• 個人情報を .gitignore + import.meta.glob で防御的に隔離
• 旅行詳細ページを「結論はテーブル、詳細はクリックで」方針に組み直し
• 検討メモは右ドロワー（<dialog> + CSS スライドアニメーション）で開閉
• 業界標準 3 層モデル（募集型パッケージ／DP／FIT）で交通手段の判断軸を整理

詳細: 家族旅行サイトに『意思決定ページ』と動的年齢計算を仕込んだ — import.meta.glob で個人情報を防御する

今日の試行錯誤

今日の学び

• 未コミット作業はサマリーに書かないと翌朝忘れる: 5/16 のサマリーに「ほぼ完成・未テスト」を載せていなかったせいで、朝に git status で気付くハメになった
• pnpm の minimumReleaseAge は外さない: 設定を消すのではなく、10 日以上前のバージョンに固定する方が筋がいい。サプライチェーン攻撃対策は守る価値がある
• 画面を見ないと UI 崩れは絶対に拾えない: curl で HTML 確認しただけで「動いてる」と思い込むと、ユーザー（自分）から「潰れてますって」とすぐに突き返される
• dev サーバを増やすな: 古いプロセスを kill せずに新規ポート起動を繰り返すと、4321/4322/4323/4324 と無駄に増える。最初に全部殺す
• 個人情報は .gitignore + import.meta.glob で防御的に隔離: 「ファイルが無ければ空配列を返す」設計にしておけば、別ブランチでも CI でもビルドが壊れない
• 業界標準を調べてから自分のアプローチを組む: 募集型パッケージ／DP／FIT の 3 層モデルを当てはめると、自分の特殊事情（実家泊 5 泊）が DP の旨味を削いでいる構造が見えた

明日やること（任意）

• family-trips をブラウザで通しで触って、移動／宿泊／観光／実家／外泊／仕事の 7 レーン構成に最後の違和感がないか確認
• Cloudflare Access の One-time PIN メール認証を実機で動かす
• 大分エリアの「行ったところ」マーク機能（既訪/未訪のフィルター）を追加

関連記事

• 投資判断教科書の未コミット 3 系統を朝に発見、実機で確認しながら分割コミットで片付けた話
• 家族旅行アーカイブを Astro + Cloudflare Pages で立ち上げた記録（pnpm の minimumReleaseAge で躓いた話含む）
• 旅行日程ガントチャートのレーン構成・転置レイアウトを試行錯誤した記録
• 大分の行きたい場所 60 件＋福岡ガイド 2 本を Leaflet で地図化：左カードリスト×右マップの分割 UI を Claude Code に組ませた一日
• 家族旅行サイトに『意思決定ページ』と動的年齢計算を仕込んだ — import.meta.glob で個人情報を防御する