チェックマトリクス（汎用）を作った

チェックマトリクス（汎用） を作った。

リンク

https://github.com/kkryama/check-matrix-tool

kkryama.github.io で利用できるように公開している。 サーバ上ではデータを持たずブラウザ上で完結し json でデータのエクスポート/インポートに対応しているので、とりあえずこのホストされているサーバ上でさわってみてデータをエクスポート後に自分の環境を作ってそちらを利用する、なども可能。

---

もともとは1アカウントで複数のサーバを遊ぶことができるソシャゲをやっていて、そのなかで「どのサーバがどのキャラクターを持っているのか」ということを簡単に視覚的に表現したく、最初はスプレッドシートを利用していたけど更新が面倒なのでブラウザ上でやりたい、というのが開発の動機。

作り始めてしばらくさわっていて、これはサーバ/キャラクターという軸以外でも利用可能だと思ったので最終的に チェックマトリクス（汎用） という形になった。 自分が利用するときは タグ はレアリティ(N, SR, SSR, UR)を設定し、項目名はキャラクター名、列にはサーバ名を設定し利用している。

リポジトリ の README の冒頭に記載しているが、今回は SPEC.md をもとに Vibe coding で実装した。VSCode 上で GitHub Copilot Pro を利用し、実装モデルには GPT‑5-Codex を使っている。具体的には

• 実装したい内容を ChatGPT に相談し初期仕様を決定して SPEC.md を作成
  • この段階で HTML, JavaScript, CSS という構成でいくことに決定
• SPEC.md にそって GPT‑5-Codex に実装してもらう
• 実装されたものを動かして、追加したい機能や不具合などがあればチャットで相談し追加実装
  • 追加実装した内容は SPEC.md に反映してもらう
• 追加実装されたものを動かして…

という流れで行った。

今回は HTML, JavaScript, CSS というシンプルな構成ということもあってか、初期仕様をもとにした GPT‑5-Codex での実装でおおむね満足できるものが作成された。

タグ管理 や 列フィルター, タグ および 項目 のフィルタの追加は初期実装後に追加されたものだが、これらの追加に関しても Ask モードで「こういう機能が欲しいが、どう思うか。良い仕様があれば提案して」と仕様を提案してもらったあとに Agent モードで実装してもらう、という流れで特に困ることがなく追加実装もできた。

JavaScript をはじめとして Web のフロントエンドはこれまで仕事で本格的にはやってきていないので、自力だとここまでのものは作れなかったと思う。

生成AIで簡単にここまでのものが作れることに感動するとともに、プログラマとして仕事を続けていくためにAIに出せない価値を出せるようになっていかないといけないことを痛感した。