nyabicode
開発記録

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 円（無料枠のみ。独自ドメインは今後取る予定で年 2,000 円弱）

Vercel でなく Cloudflare なのは、Vercel の無料プランが商用利用不可だから。 このサイトは将来的に投げ銭や有料コンテンツを載せる予定があるので、無料のまま商用に使える Workers を選びました——という比較検討も、やったのは Claude Code です。私は結論に「それで」と言っただけ。

人間がやったこと・やらなかったこと

1 日の内訳を正直に書くと、私がやったのはこれだけです。

  • 作りたいものを伝える（発信の場が欲しい・ブログ＋プロフィール＋作品一覧・猫の名前を使いたい）
  • 要所の判断（ホスティングの選定 OK・デザインの方向性 OK・デプロイ実行 OK）
  • アカウント作業（Cloudflare のアカウント作成と API トークン発行。ここだけは人間しかできない）

コードは 1 行も書いていません。設計文書も、テストも、デプロイ設定も書いていません。 デバッグに至っては、問題が起きたことすら事後の報告で知りました。

やり取りは「続けて」だけで進む

Claude Code 側には、要件→設計→タスク分解を文書で合意してから実装する進め方と、 「タスクを 1 つ終えるごとに検証して報告する」ルールをあらかじめ仕込んであります。 なので実際の会話はこんな感じになります。

私「進めたい」
CC（現状を確認して）「次は記事機能です。スキーマ検証をテスト先行で作ります。進めますか?」
私「はい」
CC（実装して）「テスト 15 本緑・型チェック緑。次は記事ページです。続けますか?」
私「続けて」

ほぼ相槌です。それでも勝手に暴走しないのは、お金が絡む操作・本番反映・外に出る変更だけは 必ず確認が来るように線を引いてあるから。逆に言うと、確認が来ない範囲は全部任せています。

Claude Code が勝手にハマって勝手に抜けた穴

面白いのは、開発中のトラブルも自走で解決されていたことです。 報告を読み返すと、例えばこんな穴を踏んで抜けていました。

ビルドは緑なのに本番だけ 500。Next.js 16 デフォルトの Turbopack ビルド出力を Cloudflare 用アダプタが解釈できず、本番アクセスだけ ComponentMod.handler is not a function で 死ぬ。Claude Code はログからこれを特定して、ビルドを webpack に固定して解消。 私がこの問題を知ったのは「解消しました、教訓として記録済みです」の報告からです。

クライアントコードがサーバー専用モジュールを引き込んでビルドが赤に。記事一覧の カテゴリタブからカテゴリ定数を import したら、同じファイルにあったファイル読み込み処理 （node:fs）まで連れてきてしまう React Server Components あるある。純粋なロジックと IO を別ファイルに割って解消——という定石も、指示せずとも打たれていました。

ライブラリ選定が実行環境の制約で覆る。コードのシンタックスハイライトは高機能な Shiki が候補でしたが、Cloudflare Workers 無料枠にはバンドル 3MB（gzip）の上限がある。 これを理由に、必要な言語だけ登録する highlight.js のサブセット構成へ方針転換。 この判断は事前に理由つきで報告に上がってきて、私は読んで頷いただけです。

変な記事はビルドごと落とす。CMS がない代わりに、記事の frontmatter（タイトル・日付・ カテゴリ）を zod で検証して、不正ならビルド自体を失敗させる品質ゲートが入っています。 これも「CMS なしで運用するならここで守るべき」という提案ベースで、わざと壊した記事で ビルドが落ちるところまで検証済みで出てきました。

感想

「AI がコードを書く」はもう驚きではないですが、トラブルシューティングまで含めて 人間の手番が回ってこないのは体験として新しかったです。

一方で、人間の仕事がなくなったわけではなくて、「何を作るか」「どこまでを任せて、 どこから確認を挟むか」「お金と公開に関わる判断」は全部こちら側に残っています。 むしろそこの線引きの設計が、AI と組む開発の本体なのかもしれません。

これから

  • 月 2 本ミニマムで更新します（開発記録 / AI 活用 / 収益公開 / 暮らし×開発の 4 本柱）
  • 独自ドメイン公開・投げ銭・Zenn への転載も順次
  • 作ったものは プロダクト一覧 に並べていきます

作って、記録して、積み上げる。よろしくお願いします。