はじめに
株式会社ネクストスケープ エンタープライズサービス部の小野塚です
前回の私の記事から約1カ月半経ちました。
AI界隈も１カ月半も経つとまた更に色々と動きがありまして、私個人としてはコードを書く時はCursor＋Claude、コードに関係無いこともClaude for Desktopで。。というですっかりClaudeばかり使う毎日でした。
社内では私に限らずあらゆる部署でAIによる開発が行われており、Claude以外にも様々なAIツールが利用されておりまして、共有会等も開かれております（以下の記事、第２弾もありますので是非）。
Claudeが普段使いとなっていた私もClaude Codeはまだ触っていなかったため、キャッチアップしなくてはという思いもありまして、やや今更感はあるものの、Claude Codeのインストールから始まり、色々と試した結果を書いてみたいと思います。
今まではLinux、Macでしか動かせなかったということも食指が動かない理由だったのですが、早くも先月7月半ばにはWindowsで動かせるようになったということも今回のきっかけの１つではあります。
ちなみに私はClaudeのProプランを購入しておりますのでその前提で書かせていただきます。
Claude Codeインストール
まずはnpmでClaude Codeをインストールします。
インストールは上記のスクショ通りあっさり終わりました。
さて、次はClaude Codeの起動なのですが、その前に今回Claude Codeの対象とするのはVisual Studio2022で作成した.NETのWebサイトのプロジェクトになります。とりあえず何も手を入れず、サンプルとして作られた直後の状態から始めます。
コマンドプロンプトでプロジェクトが存在するディレクトリに移動し、Claude Codeを起動します。
すると以下の通り画面表示についての選択画面になります。
今回は先頭のDark modeで。
すると以下のようにWelcome画面が表示されて、１と２の選択肢、いずれかを選ぶように促されます。
この選択肢ですが、１番目は「Claude account with subscription」、つまり、一般ユーザー向けのClaude.aiのアカウントでProプランなどの月額サブスクリプションを購入している方はこちらを選ぶ形になります。
もう１つのAnthropic Console accountはAPI開発者向けのアカウントで、プログラムからClaudeにアクセスするためのAPI利用する人向けです。
もう少し言い換えると自分でアプリケーションを開発してClaudeのAPIを組み込む開発者が使うものになりますので、今回は１を選びます。
すると、以下のようにブラウザが開きますのでログインを行います。
ログインが成功すると以下の表示が。。
そして、また選択肢が出てきます。
これはClaude Codeのセキュリティに関する注意事項画面となりまして「Claudeは間違いを犯す可能性がある」「信頼できるコードでのみ使用すること」等の注意事項が表示されてます。
Claude Codeは強力なツールですが、AIが生成するコードをそのまま実行するのは潜在的なリスクがあるため、このような警告が表示されています。
Enterキーを押すと次に進めますが、まずはこれらの注意点を理解してからご利用ください。特に、Claudeが提案するコードは必ず内容を確認してから実行することが重要です。
更にClaude Codeが特定のフォルダへのアクセス許可を求める確認画面が表示され、以下のいずれかを選びます。
１．Yes, proceed - 許可して続行
２．No, exit - 許可せずに終了
今回のプロジェクトの中身のファイルが信頼できるものであれば「1」を選択して続行します。もし不明なファイルが含まれている可能性があるなら、先にフォルダの内容を確認してから判断することをお勧めします。
その結果、以下のようにClaude Codeが正常に起動し、メイン画面（というのもちょっとおかしいですかね。メインの文章？）が表示されます。
Claude Codeによるコード改修
では、いよいよコード改修を試みてみましょう。
現時点でのコマンドプロンプトの表示内容を見ると、現在のディレクトリ「C:\git\WebApplication1」が表示され、利用開始のヒントが表示されてます。
日本語に訳すと以下の通り。
１．/initを実行してCLAUDE.mdファイルを作成（Claude向けの説明書）
２．ファイル分析、編集、bash/gitコマンドなどでClaudeを活用
３．他のエンジニアと同じように具体的な指示を出すと良い結果が得られる
下部のプロンプト（Try "refactor <filepath>"）で、Claudeに自然言語でプログラミングタスクを依頼できます。例えば「このファイルをリファクタリングして」「新しい機能を追加して」などと指示できるわけです。
ここまで来ると他のAIツールと同じですね。
まずは指示通りrun /initで初期化を行いましょう。
すると、 ClaudeがWebApplication1フォルダの中身を調べ、
ASP.NET Coreのウェブアプリケーションだと認識し、複数の設定ファイル（.csproj、appsettings.jsonなど）を発見します。
次に初期化の提案、つまり、Claudeがdotnet restoreコマンドの実行を提案してくれます。
.NETを使われている方には言わずもがなですが、このコマンドはNuGetパッケージを復元するコマンドであり、プロジェクトのビルドに必要な依存関係をダウンロードしてくれます。
このサンプルプロジェクトを作った時点でビルドとデバッグ起動も行っていますので、このコマンドも正直不要ではあるのですが、今回はアドバイスに従ってみましょう。
すると、dotnet restoreが実行し、更にビルド及び実行を促されますので、それにも従って進めていきます。
サラッと書きましたが、これらの作業は本来Visual StudioやそのSDKで自分たちでやらなければならない作業でした。今回は全てClaude Codeがやってくれます。
更に実行もしてくれて、https://localhost/xxxxにアクセスしてね。と言われたので、言われるがままにURLを叩くと以下の画面が表示されます。
Claude for DesktopやClaudeのWeb版しか使っていない方ですとプロジェクト全体に対してコード実装・改修を行う経験が無いかもしれませんのでこれだけでも便利さを痛感するかもしれませんね。
では、いよいよコードの改修を行っていきましょう。
以下のように「現在のホームページをもっとモダンでレスポンシブなデザインに更新して、Bootstrap5を使って、カードレイアウトやグラデーション背景を追加してください」とざっくり指示を出してみます。
すると以下のように自らTodoを挙げてくれて、その通りに作業を進めていってくれます。
ソースコードを変更した場合は以下のように差分を表示し、更新して良いかどうか聞いてくれます。
以下も同様で、改修に対して確認を取ってくれます。
結果、以下のように完了した旨を連絡してくれました。
エラーの文字が見受けられたので念のため聞いてみます。
dotnet runコマンドのタイムアウトで問題無いとのこと。
そこで表示されたURLにアクセスすると先ほどの殺風景な画面から以下のような画面へと変わっていることが確認できます。
仕様書作成
Claude Codeでできることがコード改修だけではないことを確認するため、ここまでの改修内容について仕様書の作成を依頼します。
すると以下のようにMarkdown形式で仕様書を作成します。
「ホームページ改修仕様書.md」というファイルを作ってくれたようなのですが、どこに作成したかわからないので作成場所を確認します。
すると以下のような回答が。。
実際にエクスプローラーで確認しますと確かに存在しますね。
以下が上記のファイルをVS Codeで開いた結果です。
CLAUDE.mdファイル設定
最初のやり取りは英語で回答していましたが、今後は全て日本語でやり取りしてもらいたいと思います。
その場合はCLAUDE.mdファイルを作成することで設定できるのですが、それも自分で作るのではなくお願いしてしまいましょう。
すると、以下のようなお約束事を設定してCLAUDE.mdファイルを作ってくれます。プロジェクト概要も書いてくれてますね。
- すべての説明とコメントは日本語で記述してください
- ユーザーとのやり取りは日本語で行ってください
- コード内のコメントも日本語で書いてください
Claude Code for VS Code
コマンドプロンプトではUI・UX的に物足りないという方にはVS CodeでClaude Codeを使えるようにすることもできます。
Claudeを提供しているAnthropic社が以下のように公式の拡張機能を用意してくれてますのでそれをインストールします。
もしくはVS CodeのTERMINALでインストールすることもできますが、いずれにしても無事インストールが終わると最初に紹介したようなClaude Codeのメイン画面が表示され、VS CodeでClaude Codeが使えるようになるわけです。
ファイル共有
ここまで見てきて、ある程度色々とAIツールを触った方であれば画像等のファイル共有はできるだろうかと思った方もいらっしゃるかもしれません。
実際、Claude for DesktopやCursorで入力エリアに画像を貼り付けて共有し、その画像に関して質問するといったことをしている方もいらっしゃるかと思います。
試してみた結果としてはこれも可能でした。
例えばWindowsにおいてコマンドプロンプト上でClaude Codeを利用している場合、テキストファイルや画像ファイルを共有したい場合にはそのコマンドプロンプトにドラッグ＆ドロップしてみてください。
先ほど紹介したClaude Code for VS Codeのサイトのスクリーンショットをpngファイルで保存し、コマンドプロンプトにドラッグ＆ドロップしますと以下のように[Image #1]と表示されます。そこで更に以下のように質問します。
すると以下のように説明してくれます。合ってますね。
テキストファイルもドラッグ＆ドロップというよりはパス指定になりますが同じように読み取ってくれます。
Excelファイルも試してみたところ、こちらは駄目でした。Claude for DesktopであればExcelファイルも読み取ってくれますので扱えるファイルに違いや制限があるようです。
最後に
最初に書いた通り、今まではCursor＋Claudeでも間に合ってはいたのですが、当社の共有会でも話題に出ているようにAIツールは同じモデルを使っていてもそれぞれに強みであったり、得手不得手があり、色々と使ってみることも非常に大事ではありますので、Claude Codeももう少し試してみたいと思います。
社内でも非常に評判が良いのでもしかするとこちらがメインになるかも。。
当社ネクストスケープはこのように生成AIを始めとした新しい技術・知識を日々取り入れており、Webサイト、スマホアプリ、Hololensアプリの開発をはじめ、CMSを利用したサイトの新規構築やリニューアルなど、お客様のニーズに幅広く対応いたします。お困りのことがございましたら、いつでもお気軽にお問い合わせください。
（以下当社お問合せフォーム）
