ブラウザでSQLが書ける学習サイトを、Claude Codeと二人三脚で7ヶ月作ってみた話

はじめに

SQLLearn というブラウザだけでSQLの練習ができる学習サイトを、個人開発でコツコツ作っています。初回コミットが2026年2月24日、今日(10月16日)で約7ヶ月半。この間ほぼ毎回 Claude Code とペアプロ(というかペアプロ以上に向こうが手を動かす)形式で開発してきました。

「AIにコードを書かせた」系の記事は増えてきましたが、今回は数ヶ月単位で運用し続けた中で実際に何が起きたかを、盛らずに数字つきで書いてみます。良かった話だけでなく、AIが見当違いの修正をした話、環境トラブルで作業が吹っ飛んだ話も含めます。

👉 SQLLearn - ブラウザで学ぶSQL入門

この記事で話すこと

• 7ヶ月間の開発ペースの波とその裏側
• 「原因不明のバグ」をAIと一緒にデータドリブンで追いかけた実例
• 1,000箇所以上のハードコードされた色を書き換えた大規模リファクタの泥臭い過程
• 実装前にデザイン案を見せてもらってから進める、という最近のワークフロー
• 7ヶ月やってみて見えてきた、AIと個人開発する上でのコツと注意点

技術スタック

Next.js 16 (App Router) + TypeScript + Prisma 7 + PostgreSQL (Neon) + NextAuth v4 + Stripe、そしてSQL実行エンジンには sql.js (SQLiteのWASM版) を使い、答え合わせも含めて全部ブラウザ内で完結させています。サーバーに生のSQLを投げさせない設計なので、SQLインジェクションの心配がそもそもない、という副産物もありました。

ブラウザ上でSQLを書いて動かしながら学べます。

👉 SQLLearn - ブラウザで学ぶSQL入門

数字で見る7ヶ月

項目	数値
総コミット数	217
バージョン	v2.16.0
登録ユーザー数	104人
プレミアム会員数	4人(月額100円 → 月商400円)
アクティブ率(1問以上解いた人)	69人 / 104人 ≈ 66%
累計の解答数	1,458問
レッスン完了数	408件
公開ブログ記事数	10本

月商400円という数字を出すのは少し恥ずかしいですが、これが個人開発のリアルな数字です。それよりも「作ったものを実際に使って、問題を解いてくれている人が69人いる」ことの方が自分にとっては嬉しい指標でした。

月別の登録者数の推移

3月: 13人   ████████████
4月: 25人   █████████████████████████  ← 開発が一番激しかった月
5月: 14人   ██████████████
6月:  9人   █████████        ← 開発ペースが急落した月
7月: 14人   ██████████████
8月: 13人   █████████████
9月: 14人   ██████████████
10月: 2人(まだ月初)

4月に開発を一気に詰め込んだ後、6月にコミット数が月58本→8本まで激減しています。燃え尽きというより「一段落してリアルの仕事が忙しくなった」時期で、登録者数もそれに連動して落ちているのが正直に出ていて面白いところです。

👉 SQLLearn - ブラウザで学ぶSQL入門

事件1: デザインを変えたら登録がゼロになった

8月中旬、トップページのヒーローセクションを大幅リニューアル(実画面のスクリーンショットをスライド表示する今っぽいデザインに刷新)しました。ところが数日後、新規登録が10日間ゼロという状態に気づきます。

ここでAIに「最近登録が減ってる、分析して」と投げると、Claude Codeは勝手にNeonのMCP連携で本番DBに直接クエリを投げて調査を始めました。

• 日別の登録者数 → たしかにゼロ
• 内部のPV数 → 落ちていない、むしろ横ばい〜微増
• Google Search Consoleの表示回数・クリック数 → 落ちていない
• GA4の新規ユーザー数 → 毎日ちゃんと来ている

という流れで、「流入は健全なのに、来た人が誰も登録していない」という結論にたどり着きました。さらにPVと登録数を期間で割って転換率を出すと、

変更前: 87PVで10登録 ≈ 11.5%
変更後: 147PVで2登録 ≈ 1.4%(約8分の1)

という露骨な数字が出てきて、原因はほぼ確定。実際にコードを見てもらうと、新しいデザインは実画面カルーセルが主役になり、肝心の見出しとCTAボタンが右上の小さいガラスカードに追いやられていて、しかもボタンの強調アニメーションが表示から4.1秒後まで出ない仕様になっていました。これでは見た人がボタンに気づく前に離脱してしまいます。

CTAを画面中央に大きく戻し、アニメーションの遅延をなくしたところ、翌月(9月)には登録者数が通常ペース(14人)に戻りました。「なんとなく良さそうなデザイン」を入れる時は、コンバージョンへの影響を測る仕組みを先に用意しておくべきだった、という学びです。

実際にCTAを直した後のページはこちらです。

👉 SQLLearn - ブラウザで学ぶSQL入門

事件2: 「今日のPVが0のまま動かない」バグ

管理画面の日別PVを見ていたら、「今日のPVがずっと0のまま更新されない」という報告が来ました。これもAIに原因調査を依頼。

結論は単純なタイムゾーンバグでした。PVを記録するAPIだけ new Date().toLocaleDateString("sv-SE") にタイムゾーン指定が抜けていて、本番(Vercel、UTC)では JSTの深夜0時〜朝9時のアクセスが前日分としてカウントされてしまう仕様になっていたのです。他の日付集計処理は全部 timeZone: "Asia/Tokyo" を明示していたので、この1箇所だけの指定漏れでした。

直してみると、まさに報告があった「朝7時台」というタイミングと一致していて、腑に落ちる原因でした。こういう「全体の中の1箇所だけ条件が違う」系のバグは、人間が目視でコードを読んでいるとわりと見逃しがちで、AIに横断的にgrepしてもらう方が早いなと感じた場面です。

事件3: カラーテーマ機能、1,000箇所以上の色を書き換える

これが一番骨が折れた作業でした。「別で作っているVueの学習サイトと同じように、4色のカラーテーマ切り替えをつけてほしい」という要望から始まったのですが、SQLLearnは最初から色をCSS変数化せず、60ファイル・1,000箇所以上に直接 #667eea のような16進数カラーをベタ書きしていました。

まずAIに影響範囲をgrepしてもらったところ、本当に1,018箇所ヒットして、さすがに手作業では無理だと判断。「色の対応表を作って、機械的に一括置換するスクリプトを書いて適用し、diffを目視レビューする」という方針で進めてもらいました。

ここで印象的だったのが、一発ではうまくいかなかったことです。

• rgba(255,255,255,0.08) のような半透明の白は、「背景として使われているか」「枠線として使われているか」で明るいテーマでは全く違う色にする必要があったのに、最初のスクリプトは単純な正規表現だったため区別できず、<style> タグ内の生CSS(border: 1px solid rgba(...))を誤って背景色として変換してしまうバグがありました
• ダーク背景専用に用意した「薄い紫」を、他の7ファイルでも「ちょっと明るいアクセント色」として使い回していたため、明るいテーマにすると今度はコントラスト不足で文字が読めなくなる、という問題が後から複数箇所で見つかりました
• SQLエディタ部分は「常にダークでいい」と勝手に判断して固定色にしたら、「いいえ違います、テーマに合わせてください」とダメ出しをもらって方針転換、という場面もありました

結局このテーマ機能だけで10回以上コミットを重ねることになりましたが、「1回で完璧を目指す」のではなく「スクリーンショットを撮って見せる→指摘をもらう→直す」のループを高速に回せたのは、AIと作業する上でのメリットだと感じました。人間だけだと、この量のスクリーンショット確認は心が折れると思います。

// 実際に使ったトークン設計の一部（globals.css）
:root, :root[data-theme="dark"] {
  --color-accent: #667eea;
  --color-accent-rgb: 102, 126, 234; // rgba()合成用
  --color-surface-faint: rgba(255, 255, 255, 0.03);
}
:root[data-theme="green"] {
  --color-accent: #2fa876;
  --color-accent-rgb: 47, 168, 118;
  --color-surface-faint: #eaf6f0; // 明るいテーマでは半透明ではなく実色に
}

最近のワークフロー: 実装前にデザイン案を見せてもらう

直近で追加した「スマホで開くとPC推奨モーダルを出す」機能では、いきなりコードを書かせるのではなく、先に Artifact機能でモーダルのデザイン案を2パターン作ってもらい、実際にクリックして動く状態で見比べてから、気に入った方を選んで実装してもらう、という流れにしました。

これが地味に良くて、「言葉で説明してOKをもらってから実装する」よりも、実物を見て「これでいこう」「このボタンの色だけ変えて」とやり取りする方が圧倒的に認識のズレが起きにくいです。コードを書く前にUIのすり合わせができる、という意味で、個人開発のスピード感を保ったままレビューの質を上げられる方法だと感じています。

👉 SQLLearn - ブラウザで学ぶSQL入門

AIと7ヶ月開発して感じたこと

良かったこと

• 「なんとなく変」という曖昧な報告から、本番DBへのクエリ・Search Console・GA4を横断して原因を特定するような調査は、人間が一人でやると心が折れる作業を苦にせずやってくれる
• 1,000箇所規模の機械的な書き換えのような「量はあるが単純な」作業を、スクリプト化して高速に回せる
• デザインの叩き台を複数パターンすぐ出せるので、意思決定が早い

気をつけていること

• AIの最初の提案を鵜呑みにしない。カラーテーマの件のように、一見正しそうな一括変換でも、文脈(背景か枠線か)を見落とすことがある
• 「このコードベースはこうなっている」という土地勘は結局人間側にも必要で、丸投げだと変な方向に突き進むことがある(SQLエディタを勝手に固定ダークにされた話がまさにそれ)
• 地味なところで、作業用の一時ディレクトリ(/tmp)の中身が時間が経つと消えていて、コミット前の作業が吹っ飛んだこともありました。こまめにコミットする習慣は、AIと組んでいても(むしろAIと組んでいるからこそ)大事だと痛感しました

おわりに

月商400円、ユーザー104人という決して大きくはない数字ですが、7ヶ月間ほぼ毎日AIと一緒に手を動かし続けてこられたのは、一人だと間違いなく途中で止まっていたと思います。次は未マージのまま2ヶ月放置しているSEO修正のPRを片付けつつ、引き続き地道にやっていく予定です。

もし同じようにAIと個人開発している方がいたら、ぜひ知見交換したいです。

SQLを学びたい方へ

👉 https://www.sql-learning.net