Chip War Chronicle — 半導体と世界情勢

半導体産業・政策・地政学・AI需要・市場・日本の法制の6系列を共通の時間軸に並べ、系列をまたぐ因果リンクと「断面」ビューで絡み合いを読むインタラクティブ・タイムライン。2018年から2026年までの出来事を、一次情報に近い出典URL付きで収録しています。

公開ページ: https://o6lvl4.github.io/chip-war-chronicle/

できること

機能	説明
番組表レイアウト	6系列を縦に並べ、横軸はひとつの時間。各系列の中では出来事を重ならない行に詰め、行数に応じて系列の高さが伸びる。時間軸は上に、系列名は左に貼り付き(sticky)、盤面は縦横ともブラウザ標準のスクロール。系列はヘッダーのチップで個別にオン・オフ
離散ズーム	番組表の 30分/1時間 の刻みと同じで、倍率は 12 段(0.25〜40 px/日)の固定レベル。⌘/Ctrl+ホイール、ピンチ、ダブルクリック、+ - で切り替え。操作中は描画済みタイルを CSS で伸縮させ、指を離した時点で最寄りのレベルに吸着して描き直す(旧レベルの絵は新しいタイルが揃うまで残る)。目盛が 年 → 四半期 → 月 → 週 → 日 に切り替わり、粗いレベルではラベルを重要度で間引く
因果リンク	出来事をクリックすると、引き金になった出来事と引き起こした出来事がタイルの上のレイヤーに線とリングで描かれる。全部の線は描かない
共有 URL	表示レベル・中心日・選択・系列・テーマを URL ハッシュに持つ。リンクを開けば同じ画面になる
出典	各出来事に出典ラベル・一次/報道の区分・検証済みURLを付与。詳細パネルから元資料へ飛べる
SQL (DuckDB-WASM)	「SQL」ボタンでブラウザ内の DuckDB に対して SQL を実行。threads / events / links の3テーブルにプリセットクエリ付き。id 列を含む結果行はクリックでその出来事へ
キーボード	← → で前後の出来事、+ - でズーム、0 で全期間、Esc で閉じる
スマホ	1本指で移動、2本指でピンチ拡大縮小、タップで詳細(下からのシート)。狭い画面ではレーン名を縦書きにして描画域を確保

データ

src/data/ 配下の TypeScript がデータの唯一の置き場所です。出来事は events/<年>/<系列>.ts に年 × 系列で分けて置き、events/index.ts は node scripts/build-events-index.mjs で再生成します。アプリ起動時に同じ配列を JSON として DuckDB-WASM に登録するので、SQL 側と描画側がずれることはありません。

// src/data/events/2024/si.ts
{
  id: 'si-11', threadId: 'si', date: '2024-02-24', weight: 2,
  title: 'TSMC熊本 JASM第1工場 開所式',
  body: '…',
  source: 'TSMC プレスリリース',
  sourceUrl: 'https://pr.tsmc.com/...',
  sourceTier: 'primary',
}

• weight は 3 = 節目、2 = 注目、1 = 小。マーカーの大きさに反映されます。
• endDate を持つ出来事は期間として横長のバーで描かれます。
• sourceTier は primary(政府官報、企業のプレスリリース・IR、公式声明)か secondary(通信社・主要メディア)。
• 因果リンクは src/data/links/<起点の年>.ts に { from, to, why } で記述します。

出典URLはすべて取得して内容と日付を確認したものですが、リンク切れや事実の誤りに気づいたら Issue か PR をください。

データの更新

年ファイルを手で編集せず、scripts/ のツールに流します。

node scripts/data-status.mjs          # 系列ごとの最終更新日・次のid・直近の出来事・整合性
node scripts/insert-events.mjs si < events.json   # 年ファイルへ振り分けて日付順に並べ直す
node scripts/add-links.mjs < links.json           # 両端のidと日付順を検証して起点の年のファイルへ
node scripts/build-events-index.mjs               # 各 index.ts を再生成
node scripts/remove-events.mjs si-88              # 出来事とそれを参照するリンクを削除

data-status.mjs は重複 id・年フォルダと日付の不一致・出典URLの欠落・未来の日付・リンクの参照切れ・時間をさかのぼるリンクを見て、問題があれば終了コード 1 を返します。何をどう調べて足すかの手順は .claude/skills/chronicle-update/SKILL.md にあります。

出来事が増えて1ファイルが300行を超える場合、insert-events.mjs は同じ年・系列の ai-part-2.ts のような続きのファイルへ自動分割します。イベントの内容・順序・id は変わりません。既存の大きなファイルは node scripts/split-events.mjs で分割し、node scripts/build-events-index.mjs で index を再生成します。各ツールは分割後の全ファイルを読みます。

開発

pnpm install
pnpm dev          # http://localhost:5173
pnpm build        # 型チェック + Vite ビルド (dist/)
pnpm test         # データ分割と更新ツールの回帰テスト
pnpm quality      # codopsy による品質チェック
pnpm perf         # 性能予算 (別ターミナルで pnpm preview --port 4173 を起動しておく)

GitHub Pages へのデプロイは .github/workflows/pages.yml が main への push で行います。ビルド前に codopsy を --fail-on-warning で走らせ、警告が1件でもあれば失敗します。--verbose で対象ファイルと警告の内容もログに残します。CI では codopsy を main の固定リビジョンからソースビルドしています(リリース v2.2.0 には TypeScript の型 import を未使用扱いする誤検出があり、修正が未リリースのため)。次のリリースが出たらバイナリ取得に戻せます。

技術

• React 19 + TypeScript + Vite 8
• 盤面は「地図アプリ」の作り。倍率は離散レベルで、レベルごとに行詰め(どの出来事が何行目か、ラベルを出すか)を Web Worker で1回だけ計算する。描画は 512px × 系列 のタイル単位で、Worker の OffscreenCanvas が描いた ImageBitmap をメインスレッドが受け取るだけ。見えている範囲 ± 1 画面分だけ <canvas> を置き、スクロールはネイティブ(慣性・軸ロック込み)。メインスレッドはスクロール中に絵を描かない。因果リンクと検索のハイライトはタイルの上の SVG 1枚。?perf=1 で端末上のフレーム/タイル統計を表示
• 性能予算: CI で Playwright(Pixel 5 相当)が盤面をフリックし、34ms 超のフレーム数とタイル描画 p95 が閾値を超えるとデプロイしない(perf/fling.mjs)
• DuckDB-WASM 1.32 をバンドル同梱(CDN 依存なし)

設計の参照元

• Brehmer et al., Timelines Revisited (IEEE TVCG 2017) — 表現 × スケール × レイアウトの設計空間
• Plaisant & Shneiderman, LifeLines (1996) — スイムレーン型タイムライン
• ChronoZoom — セマンティックズーム
• Aeon Timeline — 系列と関係を持つ専用ツール