こんにちは、Karouです。Sorting Cinemaの開発は2026年4月1日に始まり、翌4月2日にUI調整を終えてリリースしました。2日間・14コミットの開発記録を振り返ります。
Day 1 — 怒涛の13コミット
初日だけで13コミットを重ね、アプリの全機能をほぼ完成させました。
骨格構築 — ソート可視化 × 音の融合
最初のコミットで、ソートアルゴリズムの可視化とTone.jsによるサウンド再生を同時に実装。「比較・スワップのたびにペンタトニックスケールの音が鳴る」という核となる体験が、初手で形になりました。
続けて、ソートアルゴリズムを一気に21種類まで拡充。比較ソート11種、非比較ソート3種、並列向け2種、独特な構造2種、ジョーク3種——カテゴリ分けUIも同時に実装し、遅いアルゴリズムには要素数の自動制限を組み込みました。
基盤整備 — Firebase・SEO・i18n・About
3つ目のコミットで、Firebase Hosting/Analytics、OGタグ・構造化データによるSEO対策、日英多言語対応（i18n）、Aboutページを一括追加。「作って終わり」ではなく、公開を見据えたインフラを早い段階で整えました。
機能の大量投入
ここからが怒涛の機能追加です。
- ドラムビート：比較→ハイハット、スワップ→スネア、確定→キックの3層パーカッション
- ステップ実行：1操作ずつ進めながらリアルタイム解説を表示（日英対応）
- クイズモード：ソートの動きから「何ソート？」を当てる4択ゲーム
- URL共有：アルゴリズム・要素数・音階・速度をクエリパラメータ化、Xシェアボタン付き
UI統合とナビゲーション
シネマ・レース・クイズの3モードをタブバーに統合。backdrop-blur付きのスティッキーヘッダーで、モード切替がワンタップに。各モードにテーマカラー（シアン/オレンジ/グリーン）を割り当て、視覚的にも区別しやすくしました。
さらに、モード切替ボタンの分離、ページ遷移時のスクロールリセット、タグのレイアウトシフト修正など、細かなUX改善も同日中に対応。
クイズモードの磨き込み
クイズモードの挙動を修正。回答選択時にソートを即停止する仕組みを入れ、「ソート実行中でも回答できるが、回答後は必ず結果画面に遷移する」という直感的なフローに。スコア表示も「正解数 / 出題数」形式に改善しました。
Day 1 後半 — デザインの仕上げ
フルレスポンシブ対応
640px以下のモバイル対応を一気に実装。ビジュアライゼーションの高さ調整（420px→260px）、レースグリッドの1列化、クイズ選択肢の縦積み、タッチ操作用のスライダーサム拡大など、全コンポーネントにメディアクエリを追加しました。
ネオンデザインの統一
スライダーをネオンテイストにリデザイン。トラックを3pxに細くし、サムにcurrentColorのグロー（box-shadow）を追加。ホバーでscale(1.2)、アクティブで1.3に拡大するインタラクションも。Firefox対応も含めて対処しました。
バンドルサイズ最適化
最後にパフォーマンス改善。AboutPage、SortRace、QuizModeをReact.lazyで遅延読み込みにし、Tone.jsをmanualChunksで別チャンクに分離。メインバンドルを512KB→275KBに削減しました。
Day 2 — 最終調整
2日目はコントロールUIのレイアウト整理のみ。スライダーとボタンを行分離し、操作しやすい配置に調整して開発完了です。
振り返り
2日間で14コミット。初日にアプリの全機能（25アルゴリズム、3モード、3層オーディオ、レスポンシブ、i18n、SEO）を一気に構築し、2日目に最終調整という流れでした。
KUKU BATTLE MASTER（6日間）、ラプる？（3日間）と同様、Claude Codeとの協業による爆速開発です。特に今回は、21種類のソートアルゴリズムの実装と8つの音階マッピングという「量」が多いタスクをAIに任せ、自分はモード設計やUX判断に集中できたのが大きかった。
「アルゴリズムの動きが音楽になる」というアイデアを思いついてから48時間以内にリリースまで到達できる——個人開発のスピード感が、AIとの協業で確実に変わってきています。