2025年04月01日

Claude Codeでホームページをノーコードでリニューアルやってみた(#2)

Claude Code を自社サイトリニューアルで格闘した結果、獲得したノウハウを少し共有の2回目。今回はGitとAPI利用コストとの関係についてご紹介

Claude Codeでホームページをノーコードでリニューアルやってみた(#2)

Claude Code は API 従量課金



Claude Code は Claude 3.7 Sonnet をAPI経由でアクセスしますが、月額固定とかではなく従量課金です。
ざっくり言うと、前払いでトークンを購入して使い切ったらアラートが来るので追加購入の繰り返しです。

このホームページが大凡形になるまで要したのが $25 x 10回購入したので、$250 程度です。
ただ、初めはリニューアルが目的というよりは、お試しで初めてみたらソコソコできるじゃん!てなって、形になる迄頑張ったので余分にかかっています。
多分、遠回りしなければ $25 x 5回購入で $125 程度で済んでいた感覚です。

どの当たりが遠回りだったのかと言うと、大きな点は2点あると思います。
  • ローカルの Node+Next.js で実装を始めたて形にしたがデプロイ先が見つからず、Node からPHP への移植を Claude Code に実施して貰った
  • Git を当初は使っておらず、期待する結果が得れない場合のロールバック(先祖帰り)は Claude Code の記憶で実施していた

1つめの Node → PHP への移植は私がお馬鹿なので一旦無視をするとして、2 が作業初期段階でのコストを大幅に押し上げていたように思います。


Claude の元ソースファイル復元



第1回目でお話した通り、Claude は とてもサービス精神旺盛です。
ということは、ここだけ直してと言っても要らぬお世話をして、プロジェクト全体のファイルを作業対象にて修正してしまう事が屡々あります。
こんな時、Git を入れずプロンプトで「違う。戻して」なんて言うと、Claude 記憶エリアを辿って健気にソースを直してくれます。

ここで問題なのが、
  • 戻すだけなのに API 処理が発生し従量課金のカウンターが進んでしまう
  • 戻す際、完全に戻しきれず中途半端な再現しかできない

単純に命令前のソースに戻すだけなのに、費用はかかるわ、元に戻らないわ、では悲しくなります。


Claude と Git の蜜月



元々 Claude Code では Git と合わせて使うことを推奨しています。
そこで、毎度作業する度にコミットするよう御願いすると、(プロンプト)命令→(ファイル操作)作業→(作業完了)コミットと一連の作業を自動的に実施してくれます。

Claude Codeは丁寧なので「コミットしますか?」と聞いてきますが、質問しなくて良いことを伝えると自動コミットを実施してくれます。
頭いいですね。

もし期待する結果が得れなかった場合や広範囲なファイル破壊が発生した場合は、ロールバックで対処できます。

違います。ロールバック。




Claude による Git 差分分析



また、Claude は Git ソースの差分分析も実施してくれます。
これには大分助けられました。

初期チェックインしたソースと現在ソースの差異を分析し、現在の問題原因を分析して




自動コミットの失念



兎にも角にも Claude Code を入れる際には、Git も入れてプロジェクトルートで以下の呪文を唱えましょう。
これだけで安心安全が手に入ります。

git-init



因みに、自動コミットを実施するのを疎かにする傾向があります。忘れてるなと思ったらリテンションしてあげて下さい。
私は放置していたせいで、時間とお金をドブに捨てました💦

コミットは?




終わりに



今回は、Claude Code における Git の活用についてご紹介しました。
まだまだ会得したノウハウがありますので順次ご紹介します。