🃏

カードゲーム仲間を見つけるアプリ「タクマ」を3日で爆速開発 ~Claude Codeに全部賭けろ~

に公開
Next.js
webアプリケーション
マッチング
AIエージェント
Claude Code
tech

TL;DR

  • カードゲーム仲間を見つける自作アプリ「タクマ」を作った
  • 技術スタックはNext.js+Supabase。安牌
  • Claude Codeに全部賭けろ

カードゲーム友達を探すアプリ「タクマ」

こんにちは。samayotta（エンジニアのすがた）です。直近、以下のアプリをリリースしました。カードゲーム友達を探すアプリ、「タクマ」です。
https://takuma-app.com/

アプリを開発するモチベーションは、一言で言うと社会人になってからカードゲームする友達がいないというペインを解決するです。

  • ライフステージ/キャリアの問題で、学生のときのようにはTCGにリソースを割けない
  • 勤め先の都合で学生期の友人と切れてしまった
  • Discordはリアルの熱気が足りない

samayottaは、今でもカードショップに通ってフリーしてラーメン食って帰るという「カードゲームうさぎ」的生活にあこがれているのです。
https://x.com/urwataru

開発できるチャンスが巡ってきたのに飛びついた

僕は普段フリーランスとしてWebエンジニアをしつつ、インディーのビジュアルノベルゲーム、「アイリス・オデッセイ」を開発しています（今日はこの話はしない）。開発が最終盤に入り監督としての仕事が落ち着いてきて、三連休、時間がとれそうな瞬間がふっと湧いてきました。手持ちのチケットがなく、自由に動けます。

巷では、Claude CodeがAGIを超えたと騒ぎになっています。エンジニアとして三連休をこれに使わない手はないと、飛びつきました。

つまり、解きたい課題 x 開発のスキマ時間 x 解くための方法が、惑星直列のように一直線に並んだ。この瞬間を逃すまいと、三日間、寝る間も惜しんでひたすらClaude Codeとハックしまくりました。

結果、一週間とたたずに「タクマ」をローンチすることができました。

タクマでできること

タクマはカードゲーマー同士をマッチングするシンプルなアプリです。募集を立てて参加者が応募する、プレイした後またタクマに戻ってきたくなる、また対戦してもらうというループを意識して作りました。
以下のスクリーンショットを見ていただければ、だいたい中身はわかっていただけるものかと思います。

技術スタック

技術スタックは何の変哲もない構成になっています。

  • Next.js
  • Supabase
  • Netlify
  • Cloudflare

掘り下げポイント

  • Supabaseの採用だけは悩みました。通知基盤として、LINE連携を後々に実装しなければならないことはわかっていました。Supabaseは公式にLINEをサポートしていないので、採用することで技術的課題を残す覚悟の上で、実装速度を優先して技術選定しています。

  • Next.jsを選んだのは単純に経験値です。Gatsbyでも致命的な問題は生じないかと思います。

  • netlifyを選んだのは手軽さからですが、Cloudflareのほうがよかったかな……と後悔。無料のCDNが日本にないので、すごくアプリが遅くなっちゃうんですよね。そのためnetlifyはProプランに加入しなければならなかった。Cloudflareなら無料プランで耐えていた可能性があります。

Claude Codeに全部賭けろ

ここからが本題で、今回の技術的挑戦は、一切自分はコードを触らない ということです。すべて、Claude Codeに任せる。仕事で触っているプロジェクトや、『アイリス・オデッセイ』のメインリポジトリではラディカルなAI導入はできないぶん、「タクマ」は完全にAIネイティブな開発、2026年にしかできない開発をやりきろうという意思で臨みました。

結果は大成功。一週間未満で、明らかに自分の力量を超えたWebアプリを実装することに成功しました。正直、自分のエンジニアとしての職能の未来を考えるレベルの実力を目の当たりにし、今後の身の振り方を考えている次第……。

この記事ではその使い方について、説明していきます。

Claude Code Desktopのコードモードを使う

僕はClaude Code Desktopを使うのが好きです。Claude Code Desktopは、エディタも開かず、リポジトリを指定しやりたいことをプロンプトで打っていくことで、アプリを作っていくモードです。

基本的にPCのデスクトップクライアントをインストールして使うのがおすすめ。
https://claude.com/ja-jp/download

これは、ある日あるトピックの技術開発をした、実際の画面のスクリーンショットです。「コード」モードは、上タブの右側にあります。

🟡募集設定画面で、今週/来週のロジックに違和感がある。
・2/27(金)に「今週の月曜日」で募集を設定すると、3/2(月)に募集が生成される。
・2/27(金)に「来週の月曜日」で募集を設定すると、3/9(月)に募集が生成される。
日本語では、「今週」という言葉に、”次の”のニュアンスはない。よって、金曜日に「今週の月曜日」で募集の設定を出そうとした場合、バリデーションエラーになり、「来週の月曜日」で3/2の募集を生成するのが正しい挙動となる。

🟡時刻のデフォルト設定時刻がおかしい。
日本時間夕方の17時からが妥当。朝5時からプレイしようという人はいない。
🟡掲示板のリロードが遅い。（あるいはしていない。）定期的に、最低限通知がきたタイミングではリロードするようにせよ。
🟡一度作った募集を編集できない。募集主は、編集できるようにする。

以上が本日の機能的なフィードバックである。実装せよ。

普段の開発はこのくらいの粒度で機能開発を行っていきます。何を開発したいかは、テストプレイを回しながら、メモ帳にどんどん書き溜めておき、それをわかる程度に清書してClaude Code Desktopに渡します。過剰に丁寧に言語化しなくても、Claude Opus 4.6は常識的なコードを生成してくれるので、変に気を使う必要はありません。

少し待っているとコードとコミット、PRが生成されます。

ここではもうレビューすら放棄してマージしてって直接頼んでますね。実際使えばわかるバグフィックスですし時間をかけてみるほどのものではありません。（そしてClaude Opus 4.6は実際間違えない、困ったことに。。。）

最初の一歩

ログを遡ったらこれが最初の会話履歴でした。

takumaアプリを開発したい。
この/docを読んで、まずは状態を理解し、実装プランを練るのにつきあってほしい。
この実装プランは少し前に書いた物なので、あなたと話し合ってもう少しブラッシュアップしたい。

この/docには事前にAIと壁打ちして作ったサービスを定義する文書が設置されています。僕の記憶が正しければ、最初に準備したテキストは3つだけだったはず：

  • README.md
    800文字以下のサービスの超簡単説明書
  • implementation_plan.md
    ページ構成やエンティティ、スキーマ構成などの技術文書、開発フェーズ分け
  • business_plan.md
    タクマアプリをどう伸ばしていきたいか、ビジネス的にどういう戦略なのか

という3つの文書です。この3つは、方向性を決めるためには準備してあった方がいいと思いますし、Claude Codeが無限に壁打ちとテキスト出力を手伝ってくれますから自分の中にある作りたいモノのモチベーションを3、4時間もぶつければできてくると思います。

３連休のぶっ続け3Days開発日誌

Day3までで大枠は全て出来上がりました。
Day4以降はdetailedな機能追加やバグフィックスが中心です。

Day1

すでにこの日にはアプリの骨格が出来上がっていました。

  • next.jsでそれぞれページの動線が繋がっている
  • netlifyにアップロードされ、CI/CD化されている
  • カラースキームが決まっている
  • 基本的なデザインができている
  • レスポンシブ対応している
  • 問題なく対戦募集ができる
  • メール通知が飛ぶ

Day2

  • SPページで一部壊れていたレスポンシブ表示を直す
  • 自動migration。
  • staging環境の開発。
  • OGPなど、SEO対策
  • PWA対応（通知など）
  • 身内を巻き込んで1ループ登録 -> マッチングを回す。バグを見つけて直す。
  • 明らかにアプリが重い課題に気づく。
  • LPのコピーが訴求しない課題に気づく。

Day3

  • トップページの再開発。キャッチコピーを見直し、LPのデザインも改善。
  • アプリの最適化。メトリクスをとってどこが遅いかを洗い出す。それぞれのボトルネックを浚って速度を改善。
  • ここまできたところで友人Aを巻き込んでさらにテストを回す。

Remoteモードを使う

先週追加された機能ですが、据え置きのPCでClaude Codeを起動させておき、そのセッションをiPhoneから操作することで、パソコンの前にいなくてもClaude Codeに指示を出すことができます。

ここの[リモートコントロールを追加]押下で設定できます。

ただ、接続が安定せず重いのが難点で、現状は補助的な用途にとどまるというのが僕の認識です。きっと半年後にはすごく安定して使えるようになるだろうとも思うので、今のうちから導入して慣れておくとRemoteモード古参ヅラできて楽しいと思います。

claude.mdの設定および権限について

基本的には 全ブッパ(権限確認をスキップ) で進めています。 rm -rf / されたら負けですが、承知の上です。今のところ、指定したリポジトリを超えてヤバイ動作をする事象は観測していません。

真面目に管理するなら、

  • READ系のコマンドは全部OK
  • DELETEとinstallを縛る

のが安全だと思います。僕はしませんが。（最悪Mac miniが吹っ飛んでもいいと思って使っているので）

Chromeへの操作権限も全て渡しますが、その時は変に銀行アプリとか触られないかは一応ちゃんと見てます。しかし、マジでClaude Codeってキモくて、Chromeへの操作権限を渡すと自力でSupabaseの設定をブラウザから済ませてしまいます。人間はいらないですね。せいぜいログインで困っているのを助けてあげるくらいしか出る幕はないですね。

Claude Codeと未来への雑感

エンジニアの仕事は確実に変質してしまうだろうと思いました。Claude Code Desktopでの開発を覚えてしまったら、もうVSCodeを開くことすらおっくうです。僕のもう一つの主戦場であるUnityはともかく、Webアプリのようなビルドやデプロイにコストのかからない領域だったら、もうClaudeの方が自分より賢いし、君が言うんならそうなんだろうな、って感じ。デザインも全て、Claudeにお任せしてしまいます。

レビューフローも変わります。Claude Opusが30分で3000行のコードを書いて出してきてしまう時代で、PRを人間が目検するなど不可能です。

いちおう、僕の開発するチームでは、今は、GitHub Copilotによる自動レビューが回っており、それがマージ可能だというまで修正を加えるというルールにしています。

酷な言い方ですが、認知能力において今やAIのほうが人間より優れているし（今日でなくても来年には確実にそうなる）、人間のレビューは間違いがあったら責任を取って自分が直すという意思表示くらいの意味合いしかなくなっています。

Claude Code Desktopで作成したコミットは、全てClaudeの署名付きとなります。

去年までエージェントAIの助けを借りながらVSCodeで作ったコミットは、自分の署名だけでした。今は違います。Claudeの手柄をさも自分がやったように書くことはもうできないのです。僕にはこのPRが、ある種、自分のエンジニアとしての白旗のように見えています。しかし、明らかに未来はこちら側にあり、長期的にはプログラム開発とはこのようになるものだと、タクマの開発を通じて思いました。生産効率が10倍は違うのだから、普通のアプリ開発はこちらに流れない理由はない。

エンジニアという技術に真摯に生きる我々こそは、正々堂々と白旗をあげるべきなのではないか。自らの手作業でのエンジニアリング能力は敗北したのだと。今や、全自動のAIによるコーディングを導入するという技術的な意思決定を行わなければならない最終局面にあるのではないでしょうか。

これからも、Claude Codeとともにタクマを開発していきます。
応援よろしくお願いします。

Discussion