Claude Code、触った人がみんな「これは体験が違い過ぎる」と言っているので、さすがに触ってみるか〜、と思い、週末一本勝負で自分の使いたいコード譜管理アプリケーションを作った。
作ったものの紹介
ここで触ることができる。
作ったものの現時点での機能や特徴をClaude Codeにまとめてもらったのでそれをそのまま貼ると、こういうアプリケーションです。
概要
Nekogata Score Managerは、ミュージシャンやバンドメンバーがコード譜の作成・編集・管理を効率的に行うためのWebアプリケーションです。シンプルで直感的なユーザーインターフェースを持ち、バックエンド不要でブラウザ上で完結する軽量なコード譜管理ツールです。
仕様的特徴
🎵 コード譜管理機能
- コード譜の作成・編集・削除
- 複数セクション対応（イントロ、Aメロ、Bメロ、サビ、アウトロ等）
- 楽曲メタデータ管理（タイトル、アーティスト、キー、テンポ、拍子）
- タグ機能による分類・検索
- メモ機能による補足情報管理
🎼 高度なコード入力機能
- オンコード対応（C/E、Am7/G等のベース音指定）
- 複雑なコード記法対応（テンション、分数コード、オルタード等）
- 柔軟な拍数設定（0.5拍刻みでの細かい調整）
- ドラッグ&ドロップによるコード並び替え
- 強制改行機能（任意の位置で楽譜の行を区切り）
🎨 表示・レイアウト機能
- レスポンシブ対応（デスクトップ・タブレット・モバイル）
- フレキシブル小節表示（画面幅に応じた最適な小節数配置）
- 楽譜風UI（小節線、罫線による見やすい表示）
- BPM視覚インジケータ（点滅アニメーションによるテンポ表示）
- 統一デザインシステム（Teal・Sage・Coral の3色アクセントカラー）
📱 ユーザビリティ機能
- リアルタイム入力バリデーション（無効なコード名・拍数の即座検出）
- 保存防止機能（無効入力時の自動ブロック＋詳細エラー表示）
- コピー&ペースト対応（コード進行の一括入力）
- 一括選択・操作（複数コードの同時編集・削除）
- 範囲選択（Shift+クリックによる連続選択）
💾 データ管理機能
- ローカルストレージ保存（オフライン対応）
- JSON形式エクスポート・インポート（データの移行・バックアップ）
- 複数楽譜の一括操作（Gmail風選択UI）
- 自動データ移行（旧フォーマットからの自動変換）
技術的特徴
🏗️ アーキテクチャ
- Frontend: React 18 + TypeScript
- State Management: Zustand
- Storage: LocalForage (IndexedDB/WebSQL/localStorage)
- Build Tool: Vite 6.x
- UI Framework: Tailwind CSS v4
- PWA: Workbox (Service Worker)
🔧 技術スタック詳細
フロントエンド技術
- React 18
- 状態管理 (Zustand)
- スタイリング (Tailwind CSS v4)
- ユーティリティファーストアプローチ
- カスタムカラーパレット（arbitrary values使用）
- レスポンシブデザイン対応
データ永続化
- LocalForage
- IndexedDB → WebSQL → localStorage の自動フォールバック
- 大容量データ対応
- 非同期API（Promise/async-await）
開発・ビルドツール
- Vite 6.x
- 高速な開発サーバー（HMR対応）
- 最適化されたプロダクションビルド
- ES Modules対応
- TypeScript
- 厳密な型チェック
- インターフェース設計による堅牢なコード
- 開発時の自動補完・エラー検出
PWA機能
- Workbox + Service Worker
- オフライン対応
- キャッシュ戦略（Cache First）
- アプリアップデート通知
データ保存にlocalStorageを使いつつ、jsonで状態をimport/exportさせてポータビリティを上げるというのは我ながらちょっと面白いアプローチだと思う（そうさせた）。
どのように作ったのか
最初に、CLAUDE.mdを介して簡単な要件をClaude Codeに与えて、技術スタックの選定、リポジトリの初期化からやってもらった。
プロジェクトのセットアップ
こっちが雑に扱っていると、あっちもけっこう雑にコミットしちゃうので、気をつけないとクレデンシャルをコミットしようとしたりするということが起こり、冷や汗をかくこととなったが、それ以外はまあ順調に進めてくれた。
TODO.mdを通じての指示
CLAUDE.mdを通じて、「タスクはTODO.mdに洗い出してね」と指示してあり、まずはTODO.mdを作成してもらった。これを人力で添削してやったり、もっと優先度高いものがあるときは人力で割り込みタスクを書いたりした
テスト、lint、buildをサボらせない
CLAUDE.mdに指示を書いておいても、油断するとこのへんをサボる。プロンプトでもいちいち叱るけど、そもそも作業単位ごとにブランチ切ってPRを送るようにさせていて、CIでもテストを回すようにした。このへんは普通の開発と同じですね。GitHubActionsの設定自体もClaude Codeにやらせたけど、細かいところは自分でもいじったり添削して書き直させたりしている。
イテレーションを回す
あとは、
- 「TODO.mdからタスクえをひとつとって完了させて」で実装させる
- 「変更内容のPRを送って」でPRを送らせる
- GitHub上で人間がレビュー、netlifyのdeploy previewで人間が動作確認
- レビューや動作確認の結果問題があれば修正をさせる
- 問題がなくなったらmerge
- 「remoteの変更をmainに取り込んで」でローカルにmainの変更をmerge
という具合にイテレーションを回していくと、どんどんTODOが片付いていく。怖いレベル。
人間の介入がまだけっこう必要だと感じたポイント
- 結構テスト書くのサボりがちなので、まずいなと思ったら「この部分のテスト書いて」と介入してやる必要がありそう
- テストが落ちてても平気で「テスト通ったよ」とか嘘つくことがあるのでちゃんとCIで守る & 怪しそうなら自分でもテスト回すなどはしている
- クレデンシャルをコミットしようとするなどはまああるので、そこもちゃんと人間が見てやらないと怖い
- TODOをバンバン片付けていくと、だんだんコードが肥大化していく。今回は「このファイルが肥大化しているので、リファクタリングをして」などのプロンプトで介入を何度かしている
- リファクタリングも、ある程度大きいものだと諦めることがある。そのときは「これはこういう指針でやるときれいになるよね」みたいにおしえてやるとうまくいった。
- あと、使っていない型とか使っていないプロパティとかも結構放置されがちで、「あれ、これ使ってないよな」みたいなものは「使ってないなら削除して」と介入したけど、これは静的解析でやったほうがよさそうな気がする
- たまに問題を修正できなくて当てずっぽうでいろいろやり始めることがある。こういうときは一度Claude Codeを止めて、人間がちゃんとコード読んで「ここが問題だからこう直すといいいんじゃない？」って教えてあげないと無限に試行錯誤し始める。
- 全体の整合性を考えないといけないようなタスクにはまだちょっと弱いかな。そのへんは人間が指針を与えないと「ノールックでaccept」してると詰み始める
どうでもいい感想
- なんか「大幅に」ってのが口癖っぽくて、ちょっとした改善しただけでも「UI/UXが大幅に改善しました！」とか「コードの保守性が大幅に改善しました！」ってすぐに大袈裟に言ってくるの、なんかかわいい
おわりに
- しばらくこのアプリケーションを自分で使いながら改善していく生活をしてみようと思う。変化の早い世界なので、1ヶ月後にはだいぶ違う体験があるのかもしれない。すごいね。
- この記事を書きながら裏でClaudeCodeに作業してもらっていて、この記事を書いている間にもどんどんタスクが終わっている。怖い。
- この規模のアプリケーションを1日で構築できてしまう、というのはちょっとあまりに衝撃だな〜。怖い。
