背景や目的
以前の記事では、Claude Coworkを使った製品改修を試しました。
（記事はこちら：AI駆動開発で製品改修を試した）
今回は、Claudeメニューのもう１個の方の “Claude Code” を使い、同じように製品改修を試してみます。
トライアルの方針
利用ツールをClaude Codeに変更し、前回と同じ改修をしてみます。
１．利用ツール
コードに強いと言われるAnthropic Claudeを引き続き使いますが、
今回ツールはClaude Codeを試します(前回はCowork)。
２．開発の種類
今回も製品の改修開発をします。
３．ベースのアプリ
自社製品の管理画面を改修。node.jsベースのコードをコンテナ化しAWS上で動作中です。
４．開発内容
今回も以下の2つの修正をやってみます。
【TRY1：表面的な修正】画面内の文言を変更。該当箇所複数あり。
【TRY2：ロジックの修正】特定入力項目の入力チェック仕様を修正。
進め方の案
１．Claudeの準備
Claude Codeが使えるようセットアップをし、Claude Desktopをダウンロードします。
２．開発用ファイルの参照設定
開発フォルダを自分で再確認し、正しい場所をClaudeが参照できるようにします。
３．改修TRY1の実施
Claude Code画面で改修指示をし、最終的に改修ファイルを貰う。
４．デプロイと動作確認
前回と同様に手作業で実施します。差替ファイルを得たら自分でやります。
デプロイ後は、要求した事が実現されたか確認します。
５．改修TRY2の実施
前回と同様TRY1が上手くできたら、同じ方法でTRY2もやってみます。
１．Claudeの準備
Claudeのサイト(→リンク)にアクセスして使えるように準備します。
Claude Desktop内のClaude Codeを使うため、まずClaude Desktop アプリをインストールします。
なお、Claude Codeの利用にはアップグレードも必要です。
インストール方法が分からない場合は、手順は、前回の記事「１．Claudeの準備」と同じ流れで進めますので、必要に応じて参考にしてください。
インストールが完了すると、以下の画面が表示されます。
・「始める」を押すと、以下の画面が表示されます。
・左メニューにある「Code」タブを押して、Claude Codeの画面を開きます。
はい。これでClaudeの準備は完了です。
Claude CodeはDesktop App以外にも、いくつかの利用方法があります。
用途に応じて、以下のように使い分けできそうです。ご参考まで。
・ターミナル：普段からCLI/Unix系の画面で操作やビルドを行う人が、その流れの中でClaude Codeを使いたい場合
・IDE拡張機能：VS Codeなど、普段使っている開発環境の中で使いたい場合
・Web：ブラウザ上で手軽に試したい場合（まだプレビューでβ版みたいです）
これらは今後試すかもしれませんが、まずは一番良さそうなClaude Desktopで試します。
それでは、次に進みます。
２．開発用ファイルの参照設定
Claudeがベースのコードを参照できるようにします。
まず、自分のPC内の開発環境を再確認しておきます。今回使うアプリはWindowsPC内のWSL/Ubuntuでビルド＆コンテナプッシュをしていて、以下の３フォルダで構成されています。
v-hegde@PC999:~$ ls |grep jibunbosai_work
jibunbosai_work_api
jibunbosai_work_apri_admin
jibunbosai_work_apri_userちなみに、***_apri_userはユーザ向けアプリ、***_apri_adminが管理画面のアプリです。***_apiは両アプリからの要求を処理するAPIです。
さて、環境の確認が出来たので、Claudeでの参照設定に進みます。
・先程ダウンロードしたClaude Desktopの画面を開きます。
開発対象のフォルダ（WSLパス）を選択します。
・「フォルダを選択」ボタンをクリックすると、以下のファイルエクスプローラーが表示されます。
・上記で再確認した開発対象フォルダ（jibunbosai_work_apri_admin）を選択します。
・以下画面が表示されるので、ワークスペースを信頼します。
さらに、ローカルセッションを実行するには Git for Windows が必要と表示されました。
※ローカルファイルを直接編集するリスク対策としての提案みたいです。元に戻す事が可能です。
そのため、
・「Gitをダウンロード」を押します。
Gitのサイトが表示されました。
・該当するWindows用のファイルをダウンロードします。
・ダウンロードしたファイルを実行し、画面の指示に沿ってインストールします。
・最後に「Finish」を押します。
Claudeの画面に戻ります。
まだ「ローカルセッションにはGitが必要です。」と表示されていました。
そのため、
・Claude Desktopを一度閉じて、再度起動します。
再起動後、メッセージが消え、入力欄が使える状態になりました。
これで参照設定は完了です。次に進みます。
３．改修TRY1の実施
トライアルの方針で記載した通り、ここでは画面内の文言修正をしてみます。
具体的には、下図の (月単位) を消去する修正をしてもらいます。
人が軽く画面でみたレベルで、対象箇所は上の２箇所あります。
それでは、実際に修正を試してみます。
・Claude Codeの画面を開きます。
・画面下部の入力欄に、以下の修正指示を入力します。
| 既存アプリの改修をしてください。 まず、対象のソースコードを参照してください。パスは以下のとおりです。 \\wsl.localhost\Ubuntu\home\v-hegde\jibunbosai_work_apri_admin 修正内容は以下の通りです。 ・画面内の「（月単位）」を削除する。 ・対象箇所は複数箇所あり、全て対応する。 進め方は以下の通りです。 ・いきなり修正はせず、開発フォルダを参照して対象ファイルを特定し、それをまず報告する。 ・その報告内容に対して、私がファイル修正を許可した後に修正をする。 ・修正後は、改めて変更したファイル名とその変更内容を報告する。 |
入力欄下部には、複数のモードが用意されているようです。
・押してチェックします。今回は「許可を確認」モードで進めます。
また、画面右下から利用モデルも選択できます。
・モデルの選択欄から、前回試した「Opus 4.7」を選択します。
・準備が完了後、実行します。enterキーを押します。
実行後、以下のように処理が進みました。途中で検索許可を求められたため、
・「一度だけ許可」を押しました。
結果は以下の通りです。
あれ！1箇所のみと言ってます！NGですね。
・やり直しさせます。以下のメッセージを入力し、Enterを押します。
| ソースコードをもう一度確認してください。 これは、修正箇所が1箇所だけであることを再確認するためです。 |
再確認の結果、修正対象は2件あることが分かりました。
最初は一部しか検出できていなかったようですが、追加確認によって必要な修正箇所を確認できました。
承認を伝えたら修正するよ、と言っているので、
・以下を入力してみます。
| 承知いたしました。 その修正方針を承認します。修正ファイルを下さい。 ファイルをどのように入手すれば良いか、も教えて下さい。 |
実行されたら、読み取り許可を聞いていたので、「一度だけ許可」を押しました。
押すと、色々結果出力された。下図は完了報告の様子です。
もともと指定したWSLパス上の開発フォルダ内のファイルを、その場で直接編集したよ、との事なので、別途ファイルをダウンロードする手順は不要で、そのままビルドとデプロイに進めます。
ファイルをダウンロードして差し替える必要がないため、便利ですね。
ちなみに、Claude Coworkでは、
「Claude上にプロジェクトを作る → そのプロジェクトフォルダに開発フォルダをコピーする → 修正指示を出す → 修正ファイルをもらう」
という流れでした。（※プロジェクト作成時に”既存のフォルダを使用”を選択すれば、同じ事が出来ます。後で確認済。）
Claude Codeでは、
「ローカルの開発フォルダを選ぶ → Claude Code画面で指示を出す → そのフォルダを見ながら修正してもらう」
という流れでした。
４．デプロイと動作確認
Claude Codeの修正が期待通りか確認します。
今回のアプリはAWS上のコンテナ環境で動作するため、まずローカルでビルドしてプッシュします。
・ビルド手順は省略しますが、以下のように最後にプッシュします。
v-hegde@PC999:~/jibunbosai_work_apri_admin$ docker push ***.dkr.ecr.ap-northeast-1.amazonaws.com/jibunbousai-apri-admin:latest
The push refers to repository [***.dkr.ecr.ap-northeast-1.amazonaws.com/jibunbousai-apri-admin]
4059154fef6b: Pushed
86491a076010: Pushed
・・・略
689195d1c9ad: Pushed
418dccb7d85a: Layer already exists
latest: digest: sha256:*** size: 2410
v-hegde@PC999:~/jibunbosai_work_apri_admin$プッシュ成功です。
なので、管理画面を開いて確認します。
OK！期待通り (月単位) が消えましたね。
これでTRY1は成功です。
５．TRY2(ロジック修正)も実施
同じアプリ内で、今度は入力欄「新しい交換上限」の入力チェックロジックを修正してみます。
・今度は以下を入力します。TRY2の改修指示です。
| 先程と同じように、既存アプリの改修をお願いします。 対象のソースコードは、以下のディレクトリに収容されています。 1. 管理画面フロント jibunbosai_work_apri_admin 修正内容は以下の通りです。 ・画面内の入力項目「新しい交換上限」の入力チェックとして、100未満を受理しない処理を追加する。 ・該当時には、画面上で「100円以上の金額を入力して下さい。」を表示する。 進め方は以下の通りです。 ・いきなり修正はせず、開発フォルダを参照して対象ファイルを特定し、それをまず報告する。 ・その報告内容に対して、私がファイル修正を許可した後に修正をする。 ・修正後は、改めて変更したファイル名とその変更内容を報告する。 |
改修指示を出したら、
内容に齟齬は無いので、とにかく進めてみます。
・言われた通りに、修正実行をお願いする入力をします。
| その修正方針を承認します。ファイルを修正してください。 ファイルを入手する必要があるか、も教えて下さい。 |
しばらくすると、許可と編集承認を求められました。
それぞれ承認して進めたところ、修正報告が表示されました。
開発フォルダをみたら、修正報告で示されたファイル(page.tsx)が更新されていました。
次はデプロイし、動作確認をします。
結果は、こちらです。まず、初期状態の見た目は問題無しですね。
・入力してみますと、
エラーメッセージが赤字で表示されました！良いです。
・ボタンを押そうとして、マウスを乗せてみると、
マウスカーソルが進入禁止マークに変わり、ボタンは押せませんでした。OK！
こちらも期待通りです。
ロジックの修正もできました。
Claude CodeとCoworkの差異
Claude Codeを触ってみて、Claude Coworkとの違いを整理してみます。
主な違いは、以下の3点だと感じました。
・Git利用の提案
Claude Codeでは、作業開始時にGitの利用が提案されました。
・作業モード
Claude Codeでは、許可確認や編集承認など、作業の進め方を選ぶモードがありました。
・UIの違い
Claude Coworkは「プロジェクト」を作って進める形で、Claude Codeは「セッション」で作業する形でした。
Git利用提案以外は、本質的な違いでは無いような気がします。同じLLMを使っているので、内部的には同じ動きをするはずなので。
まとめ
今回はClaude Codeを使い、前回のClaude Coworkと同じように製品改修を試してみました。
実際に触ってみると、操作方法やGit利用の有無に違いはありましたが、今回のような簡単な改修では、得られる結果や作業工数に大きな差はない印象でした。
このレベルの改修はどちらでも対応できそうなので、次回は新規開発やデプロイまで含めた、より難しい内容で試してみたいと思います。
AI ಹೀಗೆ ವಿಕಸನಗೊಳ್ಳುವುದನ್ನು ನಾನು ಭಾವಿಸುತ್ತೇನೆ.
(AIの進化が楽しみです。)