Claude Code とこのサイトを 1 日で作った話
nyabicode 開設の記録。人間がやったのは指示と判断だけ。Next.js＋Cloudflare Workers のサイトが Claude Code の自走で 1 日で立ち上がるまでの、実際のやり取りを書く。
このサイト nyabicode（にゃびこーど）の最初の記事です。名前は飼い猫の「にゃび」から。 猫と暮らす会社員エンジニアが、個人開発で作ったもの・学んだことを記録していく場所として作りました。
初記事のネタは、ベタですが「このサイト自体をどう作ったか」。 AI コーディングエージェントの Claude Code に作ってもらって、構想からデプロイまで実質 1 日です。 寝る前に始めて、翌日には全ページが動いていました。
構成
- フレームワーク: Next.js（App Router・TypeScript・Tailwind CSS）
- ホスティング: Cloudflare Workers（
@opennextjs/cloudflare） - 記事管理: CMS なし。
content/posts/*.mdを git push するだけ - 月額コスト: 0 円（無料枠のみ。独自ドメイン nyabicode.com はこの後に取得し、年 2,000 円弱）
人間がやったこと・やらなかったこと
1 日の内訳を正直に書くと、私がやったのはこれだけです。
- 作りたいものを伝える（発信の場が欲しい・ブログ＋プロフィール＋作品一覧・猫の名前を使いたい）
- 要所の判断（ホスティングの選定 OK・デザインの方向性 OK・デプロイ実行 OK）
- アカウント作業（Cloudflare のアカウント作成と API トークン発行。ここだけは人間しかできない）
設計文書も、テストも、デプロイ設定も、私は書いていません。 デバッグに至っては、問題が起きたことすら事後の報告で知りました。
やり取りは「続けて」だけで進む
Claude Code 側には、要件→設計→タスク分解を文書で合意してから実装する進め方と、 「タスクを 1 つ終えるごとに検証して報告する」ルールをあらかじめ仕込んであります。 なので実際の会話はこんな感じになります。
私「進めたい」
CC（現状を確認して）「次は記事機能です。スキーマ検証をテスト先行で作ります。進めますか?」
私「はい」
CC（実装して）「テスト 15 本緑・型チェック緑。次は記事ページです。続けますか?」
私「続けて」
ほぼ相槌です。それでも勝手に暴走しないのは、お金が絡む操作・本番反映・外に出る変更だけは 必ず確認が来るように線を引いてあるから。逆に言うと、確認が来ない範囲は全部任せています。
Claude Code が勝手にハマって勝手に抜けた穴
面白いのは、開発中のトラブルも自走で解決されていたことです。 報告を読み返すと、例えばこんな穴を踏んで抜けていました。
ComponentMod.handler is not a function で死ぬ。Claude Code はログからこれを特定して、ビルドを webpack に固定して解消。私がこの問題を知ったのは「解消しました、教訓として記録済みです」の報告からです。node:fs）まで連れてきてしまう React Server Components（サーバー側でだけ動かすコードとブラウザで動かすコードを分ける仕組み）あるある。計算だけの部分とファイル読み込みを別ファイルに割って解消——という定石も、指示せずとも打たれていました。感想
「AI がコードを書く」はもう驚きではないですが、トラブルシューティングまで含めて 人間の手番が回ってこないのは体験として新しかったです。
一方で、人間の仕事がなくなったわけではなくて、「何を作るか」「どこまでを任せて、 どこから確認を挟むか」「お金と公開に関わる判断」は全部こちら側に残っています。 むしろそこの線引きの設計が、AI と組む開発の本体なのかもしれません。
このサイトの月額コストは？
これから
- 月 2 本ミニマムで更新します（開発記録 / AI 活用 / 収益公開 / 暮らし×開発の 4 本柱）
- 作ったものは プロダクト一覧 に並べていきます
- Claude Code の使い方そのものは wiki にまとめています
コードを 1 行も書かずにサイトが立ち上がる時代に、こちらの仕事は「何を作るか」と 「どこで確認を挟むか」の設計に寄っていきます。その線引きを、これからも記録していきます。