Open21

【AI駆動開発】Claude Code について / Claude Code Tips📝

AI駆動開発
Claude Code
Claude Code
まさぴょん🐱まさぴょん🐱

Claude Codeとplaywright mcpを連携する📝

https://zenn.dev/sesere/articles/4c0b55102dcc84

open .claude.json
~/.claude.json
{
   ...略
      "mcpServers": {
        "playwright": {
          "type": "stdio",
          "command": "npx",
          "args": [
            "@playwright/mcp@latest",
            "--config", // **追加する**
            "./playwright-config.json" // **追加する**
          ],
          "env": {}
        }
      },
   ...略
}

touch playwright-config.json && open playwright-config.json
~/playwright-config.json
{
  "browser": {
    "browserName": "chromium",
    "isolated": true,
    "userDataDir": "./tmp/playwright/profile",
    "launchOptions": {
      "channel": "chromium",
      "headless": true,
      "args": ["--no-sandbox", "--disable-setuid-sandbox", "--disable-dev-shm-usage"]
    },
    "contextOptions": {
      "viewport": {
        "width": 1920,
        "height": 1080
      },
      "locale": "ja-JP",
      "timezoneId": "Asia/Tokyo"
    }
  },
  "outputDir": "./tmp/playwright"
}
まさぴょん🐱まさぴょん🐱

Claude Codeが呼び出せるMCPを確認する📝

claude mcp list

# 結果
playwright: npx @playwright/mcp@latest --config ./playwright-config.json
まさぴょん🐱まさぴょん🐱

画像の添付

Claude Codeウィンドウに画像をドラッグアンドドロップする
または、
画像をコピーしてcmd+v（Mac）でCLIに貼り付ける
まさぴょん🐱まさぴょん🐱

Claude Codeの処理を中断する

Claude Codeの処理は、Escキーを押すことで即座に中断することができます。

まさぴょん🐱まさぴょん🐱

ultrathinkモード📝

Claude には、その思考の深さを制御する概念が存在します。
特定の単語を使用することで、消費トークンは増えますが、より深く思考し、回答の精度を高めることができます。
Maxプランならどれだけトークンを消費しても値段は変わらないので常にultrathinkがおすすめです。

ultrathink
まさぴょん🐱まさぴょん🐱

Mode切り替え📝

  1. Auto Edit ON モードにしたい -> Shift+tab でモードが切り替わります
  2. Plan モードにしたい -> Shift+tab でモードが切り替わります

まさぴょん🐱まさぴょん🐱

わざわざ展開するのだるい、Claudeが実行した結果はいつも全部見せてほしい。

/config

/configコマンドで設定画面に入ってVerbose outputをtrueにすると良いです。
もしくはclaude --verboseで立ち上げるといいです
とはいえファイル編集のdiffとかも全部出てくるのでややうざいです。

まさぴょん🐱まさぴょん🐱

Claude Codeに対する権限設定

/permissions

(禁止|許可)したい行動が多い。いちいち /permissions とか打ってられない。

.claude/settings.jsonを編集したら一気に設定できる📝

まさぴょん🐱まさぴょん🐱

Claude CodeにCLAUDE.mdをメンテ/更新させる📝

Test駆動開発のための追記📝

ultrathink.

BackEndの実装を変えたら、必ずTestが通るかの確認と、Testの新規作成や更新をするようにCLAUDE.mdに記載してください。
まさぴょん🐱まさぴょん🐱

Claude Codeが反応しなくなった場合の再インストール手順📝

rm -rf /Users/$USER_NAME/.nvm/versions/node/v20.10.0/lib/node_modules/@anthropic-ai/claude-code
rm -f /Users/$USER_NAME/.nvm/versions/node/v20.10.0/bin/claude
npm cache clean --force
npm install -g @anthropic-ai/claude-code