Claude Code

tags : AI

Claude Code

MCP 導入方法

# local
claude mcp add my-private-server -s local /path/to/server
# project
claude mcp add shared-server -s project /path/to/server
# user
claude mcp add my-user-server -s user /path/to/server

カスタムスラッシュコマンド

official doc - スラッシュコマンド

構文

/<command-name> [arguments]

パラメータ	説明
<command-name>	Markdownファイル名から派生した名前（=.md=拡張子なし）
[arguments]	コマンドに渡されるオプションの引数

プロジェクトコマンドの置き場所 .claude/commands/

個人コマンド ~/.claude/commands/

hooks

official doc - Claude Codeフックを始める

Claude Code ESLint/Prettier自動実行フック

• 設定内容

  {
    "hooks": {
      "PostToolUse": [
        {
          "matcher": "Edit|MultiEdit|Write",
          "hooks": [
            {
              "type": "command",
              "command": "jq -r '.tool_input.file_path | select(test(\"\\\\.(js|ts|jsx|tsx)$\"))' | xargs -r -I {} bash -c 'npx prettier --write \"{}\" && npx eslint --fix \"{}\" && OUTPUT=$(npx eslint \"{}\" 2>&1) && [ -n \"$OUTPUT\" ] && echo \"\\n⚠️  ESLint issues remain in {}:\\n$OUTPUT\"'"
            }
          ]
        }
      ]
    }
  }

• 動作説明

  • 対象: JavaScript/TypeScriptファイル（.js, .ts, .jsx, .tsx）
  • 実行タイミング: ファイル編集時（Edit, MultiEdit, Write操作後）
  • 処理内容:
    1. Prettierによるコードフォーマット
    2. ESLintによる自動修正
    3. 修正不可能な問題の通知

• 出力サンプル

• 問題がない場合

  # 何も出力されない（サイレント）

• 修正できない問題がある場合

  ⚠️  ESLint issues remain in src/components/UserList.tsx:
   
  /path/to/src/components/UserList.tsx
    12:15  error    Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
    45:28  warning  'userId' is defined but never used       @typescript-eslint/no-unused-vars
    78:10  error    Missing return type on function          @typescript-eslint/explicit-function-return-type
   
  ✖ 3 problems (2 errors, 1 warning)

• 複数ファイル編集時の出力例

  ⚠️  ESLint issues remain in src/utils/api.ts:
   
  /path/to/src/utils/api.ts
    23:20  error  Unexpected any. Specify a different type  @typescript-eslint/no-explicit-any
   
  ✖ 1 problem (1 error, 0 warnings)
   
  ⚠️  ESLint issues remain in src/hooks/useAuth.ts:
   
  /path/to/src/hooks/useAuth.ts
    8:15   warning  React Hook useEffect has a missing dependency: 'user'  react-hooks/exhaustive-deps
   
  ✖ 1 problem (0 errors, 1 warning)

• メリット

  • 自動的にコード品質を保つ
  • 手動で修正が必要な問題のみ通知
  • プロジェクトの設定に従う（.prettierrc, .eslintrc）
  • 開発フローを妨げない