Zenn
🎎

Project単位でコード解析してみよう!Claude Code

2025/03/01に公開
7

はじめに

現地時間2025年2月25日にAnthropic社からClaude Codeがリリースされました!
Claude Codeは、まるで人間のプログラマーのようにコードを理解し、プログラムの作成やバグの発見などを支援します。Claude Codeはコマンドラインツールとして提供され、プログラマーはターミナルから自然言語でAIに指示を出すことができます。 例えば、「この関数のバグを修正して」と指示すれば、AIがコードを解析し、バグを修正するためのコードを提案してくれます。さらに、ファイルの編集やシェルコマンドの実行など、様々な操作をAIに指示できますが、安全のため、これらの操作にはユーザーによる明示的な承認が必要です。 また、GitHubと連携することで、リポジトリの読み込み、編集、コミットまで自動化できます。
https://www.anthropic.com/news/claude-3-7-sonnet

Claude Codeは下記場面で役に立ちます。

  • バグ修正: プログラムの間違い(バグ)を見つけて、修正案を提案してくれます。例えば、コードの中でタイプミスがあった場合、Claude Codeはそれを指摘し、正しいコードを提案します。
  • コードの説明: 難解なコードの内容を、わかりやすく説明してくれます。例えば、「このコードは何をしているの?」と質問すると、Claude Codeはコードの機能や目的を自然言語で説明してくれます。
  • テストの実行: プログラムが正しく動くか、自動でテストしてくれます。例えば、「この関数をテストして」と指示すると、Claude Codeは自動的にテストコードを作成し、実行結果を報告してくれます。
  • 新しい技術の学習: 新しいプログラミング言語を学ぶ際に、コードの書き方や使い方を教えてくれます。例えば、「Reactでコンポーネントを作る方法を教えて」と質問すると、Claude CodeはReactのコンポーネントの書き方をコード例とともに教えてくれます。
  • Webデザイン: Webサイトのデザインを、コードで表現するのを助けてくれます。例えば、画像ギャラリーやアニメーションなどを簡単に作成することができます。
  • WordPressのカスタマイズ: WordPressでPHPコードを編集し、リンクプレビューなどの機能をカスタマイズすることができます。

構築方法

Claude Codeが実行できる環境

システム要件を確認すると、下記となっています。

  • macOS 10.15+、Ubuntu 20.04+/Debian 10+、またはWSL経由のWindows

つまり、Windowsで直接実行ができません。
なので、macOSやUbuntu等のLinuxを用意する必要があるのですが、それ自体ハードルに感じる方が多いと推察しています。
今回、Windows上にVMWareをインストールして、VMWare上に仮想マシンUbuntuを構築する方法を紹介します。ただ、これでもハードルが高いのは理解しつつも、参考になる方がきっといると思い記事に組み込みました。

アーキテクチャ図にすると下記イメージとなります。


APIキーの準備

Claude CodeはClaudeとのAPI連携が必要となります。
使えるAPIは下記となります。


VMWareとUbuntu

下記URLを参考にインストールします。
https://zenn.dev/isi00141/articles/321cd65539ee60


SSHの設定

デフォルトだとSSHが使えないので、下記手順でSSHを使えるようにします。

## 新しいバージョンのパッケージがあるかどうかを確認し、インストール可能なアップデートの情報を入手する
sudo apt update

## OpenSSH サーバをインストールする
sudo apt install openssh-server

## UbuntuのIPアドレスを確認する
## TeratermやWinSCPからUbuntuへ接続するときに使う
ip a

TeratermからUbuntuへ接続する

Tera TermはWindows向けのターミナルエミュレータで、SSHやTelnet接続が可能です。今回のようにVMWare上で動作するUbuntuへリモートログインする際にも利用でき、軽量ながら安定した操作性を持っています。設定が簡単で、日本語ドキュメントも多く、初心者から上級者まで幅広く活用されているフリーソフトウェアです。
インストールしていない場合、下記GitHubからダウンロードしてインストールしましょう。
https://github.com/TeraTermProject/teraterm/releases
Teratermを起動して、UbuntuのIPアドレスを入力して「OK」ボタンを押下します。

初回のみダイアログが表示されます。「続行」ボタンを押下します。

UbuntuのユーザのIDとPasswordを入力して「OK」ボタンを押下します。

下記の通り、TeratermからUbuntuへ接続できます。


curlコマンドのインストール

後続のnode.jsのインストールでcurlコマンドを使うのでインストールします。

sudo apt install -y curl


node.jsのインストール

Node.js 18+が必要となります。インストールします。

# Node.js 20.x をインストールするための公式スクリプトをダウンロードし
# 管理者権限で bash へ渡して実行しています。
# このスクリプトが Node.js のリポジトリ追加設定を行ってくれます。
curl -fsSL https://deb.nodesource.com/setup_20.x | sudo -E bash -
# aptのパッケージ情報を更新し、最新の情報を取得します。
sudo apt-get update
# Node.js をインストールします。
# 「-y」を付けることで、インストール確認のプロンプトに自動的に "yes" と答えます。
sudo apt-get install -y nodejs


Claude Codeのインストール

sudo npm install -g @anthropic-ai/claude-code

Claude Codeを起動してみる

作業用のディレクトリを作成する

# ディレクトリ「claude_test」を作成する
mkdir claude_test
# ディレクトリ「claude_test」へ移動する
cd claude_test

Claude Codeを初回起動する

claude


テキストスタイル選択(Light text / Dark textなど)を選択するように求められます。
「Preview」が選択した場合のイメージになります。
ご自身が見やすいテキストスタイルを選択して「Enter」を打鍵しましょう。

「APIの利用はAnthropic Consoleアカウントにひもづいた課金になる」などの注意書きが出てきます。「Enter」を打鍵してAnthropic社のコンソールアカウントへのログインしましょう。

URLが表示されるのでご自身のWebブラウザで開きましょう。

Webブラウザで開くとこのような画面になります。「Authorize」ボタンをクリックしましょう。

「Authentication Code」が表示されるのでコピーします。

貼り付けて、「Enter」を打鍵します。

認証が成功しました。「Enter」を打鍵します。

このような画面になります。内容を確認して「Enter」を打鍵します。

日本語訳
# Claude Code リサーチプレビューへようこそ!

セキュリティ上の注意事項:

1. Claude Codeは現在リサーチプレビュー段階にあります
   このベータ版には制限や予期せぬ動作がある場合があります。
   問題を報告するには、いつでも/bugを実行してください。

2. Claudeは間違いを起こす可能性があります
   特にコードを実行する際は、常にClaudeの応答を確認してください。

3. プロンプトインジェクションのリスクがあるため、
   信頼できるコードだけを使用してください
   詳細については以下を参照してください:
   https://docs.anthropic.com/s/claude-code-security

続行するにはEnterキーを押してください…

こちらも内容を確認したうえで「Enter」を打鍵してください。

日本語訳
# Claude Code リサーチプレビューへようこそ!

Claude Code を効果的に使うには:

1. プロジェクトのディレクトリから始める
   必要に応じてファイルが自動的にコンテキストに追加されます。

2. Claude Code を開発パートナーとして使う
   ファイルの解析、編集、bashコマンド、
   そしてgitの履歴などの助けを得ることができます。

3. 明確なコンテキストを提供する
   他のエンジニアに伝えるくらい具体的にしてください。
   コンテキストが明確であればあるほど、結果も良くなります。

Claude Code の詳細については以下を参照してください:
https://docs.anthropic.com/s/claude-code

続行するにはEnterキーを押してください…

こちらも内容を確認したうえで「Enter」を打鍵してください。

日本語訳
このフォルダ内のファイルを信頼しますか?
/home/myoshida/claude_test

Claude Codeはこのフォルダのファイルを読み取る場合があります。信頼されていないファイルを読み取ると、Claude Codeが予期しない動作をする可能性があります。
あなたの許可があれば、Claude Codeはこのフォルダ内のファイルを実行する可能性があります。信頼されていないコードを実行するのは安全ではありません。

https://docs.anthropic.com/s/claude-code-security

> はい、続行する
  いいえ、終了する

Enterキーで確定 - Escキーで終了

こちらも内容を確認したうえで「Enter」を打鍵してください。
Claude Codeのユーザに権限付与が必要そうですが、今回の確認では問題ないのでスキップします。

日本語訳
自動アップデートを有効にしますか?

Claude Codeは十分な権限がないため、自分自身をアップデートできません。

権限に関する問題を解決し、最新の機能や改善を利用するために、
以下のトラブルシューティングガイドをご覧ください
( https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview#auto-updater-permission-option )

Enterキーを押して続行してください…

現在のnpmプレフィックス: /usr

Claude Codeの画面が表示されました!Claude Codeの初回起動はここまでです。

Claude Codeを停止する

「Ctrl+c」を2回打鍵すると、Claude Codeが停止します。

Claude Codeを使ってみる1:コーディング

試しにコーディングしてもらいましょう。簡単なタイピングゲームを作ってもらいます。

プロンプト
タイピングゲームを作ってほしい
日本語の10文字程度のワードを表示して、入力までの時間を計測する。
10問出題する。
10問終わったら、各問の入力時間と平均時間を表示する。


コーディングしてくれました。Pythonファイルとして出力して良いか聞かれています。「Yes」を選択して「Enter」を打鍵します。

Claude Codeを停止して、Pythonファイルが作られたことを確認します。

動かしてみましょう!

Claude Codeを使ってみる2:コード解析

WinSCPでProjectのフォルダをUbuntuへ転送したり、GitHubからProjectごとCloneするなりしてProjectをUbuntu上に配置します。
その上で、Claude Codeを使ってコード解析ができます。
例えば、開発中の認証機能がうまく動かない時にClaude Codeにコード解析をさせて、原因分析や対応策の検討をしてもらうということもできます。

Claude Codeのアウトプット
● 問題の原因と対策案は以下です:
 
  1. 原因:
    - WebSecurityConfig.javaの61行目でキャッシュコントロールを完全に無効化しています:
    .cacheControl(CacheControlConfig::disable)
    - しかし62行目で特定のCache-Controlヘッダーを設定しています:
    .addHeaderWriter(new StaticHeadersWriter("Cache-Control", "public,max-age=31536000"))
    - この矛盾した設定により、ブラウザの通常モードではOAuth2認証データが正しくキャッシュされず、2回目以降のアクセスで認証が失敗
  しています。
  2. 対策案:
    a. キャッシュ設定の修正:
    .headers(headers -> headers
      .xssProtection(xss -> xss
          .headerValue(XXssProtectionHeaderWriter.HeaderValue.ENABLED_MODE_BLOCK))
      .contentSecurityPolicy(csp -> csp
          .policyDirectives(
              "default-src 'self' 'unsafe-eval' 'unsafe-inline' *.xxx.com; script-src 'self' 'unsafe-inline'
  'unsafe-eval'; img-src 'self' *.xxx.com data:; connect-src 'self' *.xxx.com; font-src 'self' *.xxx.com
  data:; frame-src 'self' *.xxx.com data:;upgrade-insecure-requests;block-all-mixed-content"))
      .frameOptions(FrameOptionsConfig::sameOrigin)
      // .cacheControl(CacheControlConfig::disable) <-- この行を削除または変更
      .addHeaderWriter(new StaticHeadersWriter("Cache-Control", "no-store, max-age=0, must-revalidate")))
    b. セッション関連の修正:
        - ServletContextInitializerに以下の設定を追加:
      servletContext.getSessionCookieConfig().setMaxAge(-1); // セッションCookieをブラウザ閉じるまで保持
    c. OAuth2クライアント設定の確認:
        - application.propertiesに以下の設定を追加:
      spring.security.oauth2.client.registration.azure.scope=openid profile email
  spring.security.oauth2.client.provider.azure.authorization-uri=https://login.microsoftonline.com/xxx/oauth2/v2.0/authorize
  spring.security.oauth2.client.provider.azure.token-uri=https://login.microsoftonline.com/xxx/
  oauth2/v2.0/token
  spring.security.oauth2.client.provider.azure.jwk-set-uri=https://login.microsoftonline.com/xxx/discovery/v2.0/keys
 
  この対策によって、正しいキャッシュ設定が適用され、通常モードでも2回目以降のアクセスでAD認証が正しく機能するようになります。

おわりに

いかがでしたか。Claude Codeですが、まだプレビュー版であるものの可能性を感じることができました。今後こういった生成AIを活用した開発や運用保守が主流になってくる可能性が高いと考えています。ぜひキャッチアップしていきましょう!!!

7
Accenture Japan (有志)

Discussion

ログインするとコメントできます