おくみん公式ブログ

おくみん公式ブログ

Claude Codeにokumin.comを作り直してもらった話

作ってもらったページ

「Claude Codeのコーディング能力は凄いらしい」と最近よく耳にします。最新の生成AIを使った開発体験がどのようなものか試すべく、Maxプランを契約して自作ホムペokumin.comの改善を依頼してみることにしました。

元の構成と悩み

okumin.com on Google Cloud

以前のokumin.comはGoogle Cloud上に構築していました。ギリギリのスペックで運用していたので、Nginxやcert-managerが止まって面倒な事態が発生することも度々。CI/CDをちゃんと作り込んでいなかったからページの更新も大変です。Claude Codeを使えば便利なインフラへ移行しつつ今後の開発も楽になると期待し、claudeコマンドを打ち込みました。

元のサイト。ただのリンク集

完成したホムペ

Hugoで構築したサイトをNetlifyにホストしています。とりあえず2ページ作ってもらいました。

トップページ

トップページ

元のページと同様にSNSやブログへのリンク集として作成し始めました。デザイン上の問題で画面がやや味気ない感じになったため、とりあえずGitHubのアクティビティを追加してもらって今に至ります。

/wip/: Work in Progress

/wip/

OSSのメンテナをしているとレビュー依頼が大量に降ってきます。今どのPull Requestに関わっているのか、他人はおろか自分にもよくわからなくなったりします。この状況をうまい具合に可視化すれば日々の作業やコミュニケーションが楽になると思い、作業中やレビュー中のPull Requestをまとめてくれるページを作ってもらいました。

Claude Codeを使ってみた感想

今回の制作ではほぼすべての工程をClaude Codeに実行してもらいました。自分で行うのはただ単に願いを伝え続けるだけ。具体的には「Hugoってやつでホムペを作ってみたいので雛形を作ってください」「ローカル開発用のDockerfileがほしいです」「GitHubで自分が関わっているPull Requestを一覧するページを作ってください」「日本語と英語に対応させたいです」「やっぱURLのパスを変えたいです」「Netlifyってやつにデプロイするための何かを作ってください」「データを定期的にリフレッシュしたいです」「/wip/にソートするボタンを足してください」という抽象度で指示を出し続けました。Hugoテンプレートは数えるほどしかいじっておらず、CSSやJavaScriptに至ってはClaude Codeが生成した余分なスペースを手で取り除く以外何もしていません。数少ないつまずきも自分がChatGTP o3-proのプロキシとなることで解決できました。

新しいokumin.comは自力でも作れるし、お金を出せば他の人に制作してもらうこともできるでしょう。とはいえここまで気軽に自分専用のシステムを作ってもらえるのは新しい体験でした。Claude Codeの真の実力は自分にはまだ未知数ですが、少なくとも時間の制約により着手できていなかった課題の一部は解決してくれるのでないかと期待を持ち始めています。

関連記事