100 案件達成 - ポートフォリオを分析する自己メタダッシュボード

作ったもの

Portfolio Stats — https://sen.ltd/portfolio/portfolio-stats/

• https://sen.ltd/portfolio/data.json をランタイム fetch
• ヘッドライン統計（総エントリ数、総テスト数、カテゴリ数、平均テスト数）
• カテゴリ / 技術スタック / ステージ別の棒グラフ（CSS オンリー）
• 月別タイムライン
• テスト数 TOP ランキング
• タグクラウド
• フィルタ・検索可能なエントリエクスプローラー

vanilla JS、ゼロ依存、ビルド不要。node --test で 32 ケース。
#100 = 目標達成。

4 日間で 100 案件

2026 年 4 月 10 日に 1 件目（cron-tz-viewer）、今日 100 件目（この記事）。4 日で 100 個。ペースは狂っていた。

数字

指標	数値
総エントリ数	100
総テスト数	約 4500
カテゴリ数	7
技術スタック数	20+
依存ライブラリ数	0
ビルドステップ	0

100 案件作って学んだこと

1. 一貫性 > 賢さ

全エントリが同じファイル構造、同じテストランナー（node --test）、同じ静的サーバ（python3 -m http.server）、同じ i18n パターン。テンプレが固まったから、後半になるほど速く作れた。

2. ゼロ依存は自由

ビルドステップがないから、5 年後でも動く。セキュリティ更新不要、フレームワーク廃止の心配なし、npm install しなくても開発できる。この制約は枷ではなく自由。

3. 日英併記を最初から

最初から UI を日英両対応にしたことで、i18n が自然と第一級の関心事になり、コンテンツとコードの分離がきれいになった。5000+ 個の翻訳文字列が全 100 エントリに散らばっている。

4. テストはドキュメント

どのエントリにも 15-20 個以上のテスト。複雑なエントリ（curl-converter、json-schema-validator、color-picker-pro など）は 60-100+ テスト。テストを読む方がソースを読むより速いことが多かった。

5. カテゴリ内訳

• 開発者ツール（40+）: cron、regex、JSON/YAML、text encoding、hex viewer 等
• ゲーム（10+）: 2048、数独、マインスイーパ、スネーク、ワードル、神経衰弱、五目並べ、麻雀並び替え 等
• デザインツール（10+）: shadow designer、gradient designer、color picker pro、Perlin noise、フラクタル、ピクセルアート 等
• 日本語・文化（10+）: 和暦変換、漢数字、かな変換、ひらがなローマ字、lorem-jp、ワードル JP 等
• 計算機（10+）: 割り勘、消費税、BMI、睡眠サイクル、チップ、ローン、レシピスケール 等
• リファレンス（10+）: HTTP status、AWS services、Git、CSS props、Linux signals、TS errors 等
• 生活・実用（10+）: クックタイマー、ポモドーロ、Kanban、買い物リスト、countdown、mind map、lifework clock 等

このダッシュボードの中身

export function totalTests(entries) {
  return entries.reduce((sum, e) => sum + (e.testCount || 0), 0);
}

export function countByCategory(entries) {
  const map = new Map();
  for (const e of entries) {
    map.set(e.category, (map.get(e.category) || 0) + 1);
  }
  return map;
}

data.json を fetch → 純関数群に渡す → DOM 更新。状態なし、副作用は描画のみ。

次の 100 へ

100 は目標だったが、通過点でもある。docs/ideas にはまだ数十個の未実装アイデアがある。テンプレが整った今、次の 100 はもっと速く作れる。

御礼

このシリーズを追ってくださった方、ありがとうございました。4 日で 100 個は出力の持続性実験でもありました。結論: 良いテンプレートと明確な制約（vanilla JS、日英対応、テスト付き、ドキュメント付き）があれば、1 件あたりのオーバーヘッドは小さい。大変だったのは何を作るか決めることで、作ること自体は機械的でした。

• 📦 リポジトリ: https://github.com/sen-ltd/portfolio-stats
• 🌐 デモ: https://sen.ltd/portfolio/portfolio-stats/
• 🏢 会社: https://sen.ltd/
• 📚 全 100 エントリ: https://sen.ltd/portfolio/

#100。目標達成。 🎉