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

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

著者: YUKI

カテゴリ: 生成AI

タグ: Claude Code, ノーコーディング, 生成AI, 企業ホームページ

要約

Claude Code は Claude 3.7 Sonnet をAPI経由でアクセスしますが、月額固定とかではなく従量課金です。 ざっくり言うと、前払いでトークンを購入して使い...

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

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

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

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

# 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 の記憶で実施していた

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

第1回目でお話した通り、Claude は とてもサービス精神旺盛です。

ということは、ここだけ直してと言っても要らぬお世話をして、プロジェクト全体のファイルを作業対象にて修正してしまう事がしばしばあります。

こんな時、Git を入れずプロンプトで「違う。戻して」なんて言うと、Claude 記憶エリアを辿って健気にソースを直してくれます。

ここで問題なのが、

• 戻すだけなのに API 処理が発生し従量課金のカウンターが進んでしまう

• 戻す際、完全に戻しきれず中途半端な再現しかできない

Claude と Git の蜜月

元々 Claude Code では Git と合わせて使うことを推奨しています。

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

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

頭いいですね。

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

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



Claude による Git 差分分析

また、Claude は Git ソースの差分分析も実施してくれます。

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



これには大分助けられました。

自動コミットの失念

兎にも角にも Claude Code を入れる際には、Git も入れてプロジェクトルートで以下の呪文を唱えましょう。

 git-init



これだけで安心安全が手に入ります。

因みに、自動コミットを実施するのを疎かにする傾向があります。忘れてるなと思ったらリテンションしてあげて下さい。

 コミットは？



私は放置していたせいで、1時間ほどの成果とお金をドブに捨てました💦

終わりに

今回は、Claude Code における Git の活用についてご紹介しました。

また順次ご紹介します。