とりあえずClaude Code流行りに飛び込んでみる

:::note warn
この記事は走り書きになります。見づらかったらすみません
私は、Claude Max($100/月)プランかつWindsurf Editor上での利用になります。
:::

## Claude Codeとは
- 自律駆動がかなり優れているコーディングエージェントツール
- CLIで動く
- Claudeモデル制作元であるAnthropicが開発した


3番目のAnthropic社g開発したというのがかなり大きいと思います。
なぜならモデルの開発のために学習させたデータの形式など非公開情報を知っており、モデルが最大限生きるようにツールを開発・調整できるためです、

2025/6/5現在〜 Claude Proプラン（$20/月）でもClaude Codeが利用できるようになりました。ただし、Maxよりは使用量少ないらしいのでとりあえず遊ぶ場合は良さそう。

## Claude Maxプランとは
詳しくは以下を見てください。
要約すると、高品質なClaude Sonnet・Opus 4.0モデルをいっぱい使い倒せるプランです。

このプランを課金するとClaude Codeも**割と**制限無しで使うことができます。
↑↑↑これが今盛り上がってる要因（そのうち制限かかりそうな気がするけど）


![b9179aab-404b-4932-843d-9f9f6e2dbbca.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624902/9d2ed0bf-b935-4077-9c2e-5f531f6b791b.png)

参考：https://zenn.dev/ks0318/articles/693e54b7b871d3#max%E3%83%97%E3%83%A9%E3%83%B3%E3%81%AF2%E3%81%A4%E3%81%AB%E5%88%86%E3%81%8B%E3%82%8C%E3%82%8B

$100 = 14000円くらい
$200 = 28000円くらい

Maxプランに課金すると、Claude Code以外にもClaudeアプリ上でのリサーチ機能やOpusの利用上限アップなどの恩恵が多々あります。リサーチ機能は個人的にGPT o3のDeep Researchと張ると思います。

## 導入
詳細は、以下を参照してください。
https://docs.anthropic.com/ja/docs/claude-code/getting-started

基本的にIDEのターミナルで以下を叩けば、インストールからIDE統合、利用まで簡単にできます。

:::note warn
ただ、偶にいきなりコマンドが迷子になることがあります。
ターミナル再起動したりすると直ります。
:::
``` terminal
// グローバルインストール
npm install -g @anthropic-ai/claude-code

// 起動
claude

// CLAUDE.mdの初期設定
/init
```

`claude`コマンド初回起動時に色々設定がありますが、その中で、以下の選択で`2 Claude app...`を選択しないと従量課金版になるので注意です。
![4ff1f712-f632-4b7c-aea6-7073b1f4f615.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624902/7b26be6f-fdf4-4295-b69f-2d219a679b26.png)


Maxプランでの利用に関しては以下を参照してください。
https://support.anthropic.com/ja/articles/11145838-max-%E3%83%97%E3%83%A9%E3%83%B3%E3%81%A7%E3%81%AE-claude-code-%E3%81%AE%E4%BD%BF%E7%94%A8

## 感想（個人の意見です）
**長時間の自律駆動や並列処理が上手**
正直使うまでは、本当にいいの？って思っていました。
実際に使ってみると、よく使っているWindsurfよりもClaude Codeの方が長時間の自律駆動や並列処理が上手に感じました。

今でこそWindsurfもPlanning Modeが尽かされ、計画立てた上で実装しやすくなりましたが、Claude Codeは与えられたタスクに対して自動で**Todoリスト**を作成し、精度高く遂行していきます。

↓↓↓ターミナル分割して並列処理
![e3c86f7f-e2d2-4fd8-a1e1-79558bd12cbf.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624902/0793e3c9-93e1-48db-bef2-3594d9eeabd2.png)


**Claude 4系モデルがかなり使いやすい**
個人的な感想として、「暴走しづらい・トークンの使い方が上手・自走力は高い」の3点が強いなと感じました。
Claude Code自体もすごいなと思うのですが、Claude 4系モデルを使いまくれるのが一番すごいメリットに感じています。

**プロンプトに特定のテキストを含めると、拡張思考機能を使える**
![581fb199-7d5b-4a46-aa7d-5dc940b02af6.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3624902/cf828110-9ae7-4482-b913-786e8c18d564.png)

「しっかり考えて」などを入れると、確かに通常モードと思考量が全然違う。ただし、制限がくるのは早まる。
並列作業 + 拡張思考を連発してると$100 MAXプランでも割と早くrate limitがきます。
※もっとトークン節約しながら使えば、limitきづらくなるかも。

**AIエディタ + Claude Codeが良さげ**
また、個人的にはCursor・Windsurf + Claude Codeの併用が好きです。
自分で書き溜めたcursor/rules/.md or windsurf/rules/.md + CLAUDE.mdが割と安定感高めかつ、タスクに応じてCursor/Windsurf・Claude Codeの切り替えで行けるので体験がいいです。とりあえず自分のrulesファイルは育てておいて損はないと感じました。

**auto-acceptモードが革命**
デフォルトの設定だと作業に対し一々許可が必要ですが、許可なしモードにも切り替えができます。
こっちの許可なしモードの方が新感覚感はあります。Roo Codeも同じような体験はできそうですが。

**やり方はわかるけど、量が膨大な作業をやってくれるのがありがたい**
自分の場合、プロジェクトの中でCSS/Sass変数などを定義し使い回す・Storybookのストーリーを作成することが多いのですが、切羽詰まってる時などは、とりあえずハードコードして見た目上は良きなものを作ることがあります。
この場合、後々負債になることなど想定されるのですが、このようなリファクタリング作業をCCはかなりよしなにやってくれます。頭が上がりません。

他にもGitHub Actionと連携したり、さまざまな連携で業務効率化を図れそうなので、使い倒していきたいです。

## よく使うコマンド
```
// コンテキスト削除
/clear
```
Claudeのモデルは、基本的にコンテキスト保持力が他社のAIモデルよりも低い・少ないため、一定程度作業したらこの`/clear`コマンドで会話内容を削除するのが良さそうです。
その場合、記憶しておきたい内容は外部.mdファイル内に保存しておくといいと思います。

```
// コンテキスト圧縮
/compact
```
基本的には、`/clear`コマンドと一緒でコンテキスト保持力の問題を軽減するためのコマンドです。デフォルトの設定だと一定量の会話をしたら、自動で`/compact`されます。

その他コマンドについては以下を参照
https://zenn.dev/oikon/articles/b14af9c62b4010
https://docs.anthropic.com/en/docs/claude-code/cli-usage

## MCPサーバー接続
MCPサーバーは、以下のコマンドで管理できます。
```
// サーバー追加（例：Figma Dev Mode MCP）
claude mcp add --transport sse figma-dev-mode-mcp-server http://127.0.0.1:3845/sse

// 設定サーバー一覧
claude mcp list

// 設定サーバー情報取得
claude mcp get my-server

// 設定サーバー削除
claude mcp remove my-server

// mcpの状態確認（Claude Code内で叩く）
/mcp
```

プロジェクト内にMCPサーバー情報を格納したい場合は、ルートディレクトリに
`.mcp.json`を配置し、その中に以下のように記載します。（以下はSSE接続の例）
```
{
  "mcpServers": {
    "figma-dev-mode-mcp-server": {
      "transport": {
        "type": "sse",
        "url": "http://127.0.0.1:3845/sse"
      }
    }
  }
}
```
:::note warn
一度MCPサーバーに接続しても、PCを再起動・スリープモードにしたりするとIDE統合・MCP接続の失敗が起こる時があります。その場合は、ターミナルと立ち上げ直してください。
:::


その他詳細情報はAnthropic公式チュートリアルを参照
https://docs.anthropic.com/ja/docs/claude-code/tutorials#model-context-protocol-mcp-%E3%82%92%E8%A8%AD%E5%AE%9A%E3%81%99%E3%82%8B

また、Figma Dev Mode MCPについては以下を参照
https://help.figma.com/hc/ja/articles/32132100833559-Dev-Mode-MCP%E3%82%B5%E3%83%BC%E3%83%90%E3%83%BC%E5%88%A9%E7%94%A8%E3%82%AC%E3%82%A4%E3%83%89#h_01JVAXW87T435SJDASMZB59AFG

## その他参考になりそうな資料
https://zenn.dev/fbbp/articles/7aa9a46518a609#%E6%8B%A1%E5%BC%B5%E6%80%9D%E8%80%83%E3%81%A8%E3%81%AF%E4%BD%95%E3%81%8B

https://zenn.dev/ks0318/articles/693e54b7b871d3#max%E3%83%97%E3%83%A9%E3%83%B3%E3%81%AF2%E3%81%A4%E3%81%AB%E5%88%86%E3%81%8B%E3%82%8C%E3%82%8B

https://github.com/anthropics/claude-code-action

https://docs.anthropic.com/ja/docs/claude-code/memory

https://docs.anthropic.com/ja/docs/claude-code/tutorials