60人の生涯年表を Vue で作り直し、分析を別記事に切り出した作業ログ

朝6時すぎ、60人の生涯を縦に並べた1枚の年表画像を Claude Code に貼った。 日本と西洋の芸術家や文化人の生涯が、箱になって並んでいる図である。 これを、スクロールすると「その年に誰が生きていて何歳か」が分かるページにしたかった。

縦軸は年なので素直に描ける。 横はどうか。 元図は12列に人を振り分けているが、その振り分けに規則はあるのか。 規則があるならロジックで再現できるし、なければ別の並べ方を考えるしかない。

画像から60人を読み取り、生没年を裏取りする

最初に、画像の60人を読み取って生没年を裏取りしてもらった。 裏取りをバックグラウンドで走らせているあいだに、Vue ページの骨組みを先に書かせた。 構成は年表、並び方の分析、60人の一覧、データの注記の4章である。

データの置き場は、ページとは別のファイルに分けた。 人物の配列はデータとして置き、年から位置を出す計算や「その年に生きていた人」を返す計算は純関数にした。

export const isAliveIn = (p: Person, year: number): boolean =>
  p.born <= year && year <= p.died
export const aliveIn = (people: readonly Person[], year: number): Person[] =>
  people.filter((p) => isAliveIn(p, year))

裏取りの途中で、生没年が確定しない人が何人か出てきた。 世阿弥や土佐光信は生没年に諸説があり、俵屋宗達や野々村仁清は生没年不詳である。 そこで Person 型に approx を足し、生年と没年のどちらが推定なのかを持たせた。

表示の崩れを一つずつ潰す

ページを書き終えて記事一覧とパンくずに登録したところで、パンくずのテストが1件落ちた。 原因を調べてもらうのと並行して列ずれを直し、1790年の位置で描画を確かめ直した。 その後、テストは25件すべて通った。

スマホ幅のスクリーンショットを渡して表を調べてもらうと、サイト共通のどこかで table が display: block になっていた。 共通側には手を入れず、このページの表にだけ display: table を明示した。

そのほかに、次の2点を直した。

• 一覧の色見本の枠が黒くなっていた
• 世阿弥と土佐光信の注記で、年が二重に出ていた

スマホ幅の一覧表では、見出しの「年数」「地域」と、地域の値（日本、西洋）が縦に折り返していた。 この2列だけ折り返さないようにした。 確認はエミュレーションで行い、終わったらウィンドウ幅が元に戻ったことも確かめさせた。

パンくずが左上に貼りつく

見た目の確認を続けると、パンくずが画面の左上端に貼りついていた。 同じ作りの既存ページ（才能の母集団の記事）でパンくずの位置を測ってもらい、それに合わせて本文の列へ移した。 PC幅では、見出しと同じ左端（x=134px）、上端から32pxの位置に収まった。

横の並びに規則はあるか

ここで最初の引っかかりに戻る。 元図と同じ12列の配置で描き直しはできたものの、横の並びをどう扱うかは決まっていなかった。

前回の分析で、元図は作者が1人ずつ手で置いたもので、機械的な規則では再現できないと分かっている。 そこで横軸を分野別にする案を出し、美術、能・茶・俳諧・演劇、音楽、政治・実業の4分野で組み直すことにした。

分野ごとに何列あれば重ならずに収まるかを、ロジックで計算させた。 テストは30件すべて通り、日本8列、西洋11列の計19列に収まった。 無駄な列はない。 中央の出来事欄から外側へ、美術、能・茶・俳諧・演劇、音楽、政治・実業の順に列を置き、図の上に分野の見出しを付けた。

分野の見出し行は、縦書きの細い見出しにつられて背が伸びていた。 PC幅では横書きで折り返し、スマホ幅でだけ縦書きにしたところ、見出し行は57pxから40pxまで縮んだ。 スマホ幅（390px）で19列が見切れずに収まることも確かめた。 見出しの折り返し位置は、スクリーンショットを見て「・」の後ろへ動かした。

分析を別記事に切り出す

続いて、ページを2つに分けることにした。 年表ページは冒頭と年表だけにして、「元図の並び方を分析する」から下の章（分析、60人の一覧、データの注記）を独立した公開記事に移す。

移し替えは、次の順で進めてもらった。

1. 分析、一覧、注記の章を新しい記事ページへ移す
2. 年表ページからその章を外し、年表の下に分析記事へのリンクカードを置く
3. 移した章でしか使わない計算とスタイルを年表ページから取り除く

3で、スタイルを消した範囲の境目を確認させたら、.lt-wide のコメント行だけが一緒に消えていた。 その行を戻し、ページ下端の余白と相互リンクカードのスタイルを足した。

最後に、年表ページの冒頭の見出しと説明文も外した。 パンくずのすぐ下から年表が始まる形にして、h1 は画面外に置いた。 測定スクリプトも同じコミットに入れ、ee6d9f2c としてコミットした。 プッシュとデプロイはしていない。

• 年表ページ
• 元図の並び方の分析記事

振り返り

• 元図の並びに規則がないと先に分かっていたので、再現にこだわらず分野別へ組み替えた。並べ方をロジックに持たせたから、列数をテストで確かめられた
• 作ったものを後から2ページに分けると、スタイル削除の境目で関係ない行を巻き込みやすい。削除範囲の前後を確認させるところまでを1手に数えておく

年表ページは、まだ手元の dev 環境でしか見られない。