Claude Codeでワークフロー自動化

Claudeスクリプトディレクトリ

プロジェクトルートに.claudeディレクトリを作成して、カスタムスクリプトと設定を保存します：

Claude Codeは自動的にこのディレクトリを検出し、カスタム自動化に使用します。

基本ワークフロー設定

.claudeディレクトリにconfig.jsonファイルを作成します：

{
  "projectName": "MyAwesomeProject",
  "description": "A React application for financial management",
  "workflows": {
    "component": {
      "templatePath": "./templates/component.tsx",
      "outputPath": "src/components/{name}/{name}.tsx"
    },
    "test": {
      "templatePath": "./templates/test.tsx",
      "outputPath": "src/components/{name}/__tests__/{name}.test.tsx"
    }
  }
}

この設定は、コンポーネントとテスト作成のためのテンプレートベースのワークフローを定義します。

スクリプト構造

.claude/scriptsディレクトリにJavaScriptファイルを作成します：

// .claude/scripts/create-feature.js

module.exports = async (claude, args) => {
  const { featureName } = args;

  // Create feature directory
  await claude.exec(`mkdir -p src/features/${featureName}`);

  // Create component files
  await claude.generateFile(
    `src/features/${featureName}/${featureName}Page.tsx`,
    `Create a React component for the ${featureName} feature page`
  );

  // Create service files
  await claude.generateFile(
    `src/features/${featureName}/${featureName}Service.ts`,
    `Create a service for the ${featureName} feature that handles data fetching and processing`
  );

  // Update route configuration
  await claude.modifyFile(
    'src/routes.tsx',
    `Add a route for the ${featureName} feature page`
  );

  return `${featureName} feature created successfully!`;
};

カスタムスクリプトの実行

claude runコマンドを使用してカスタムスクリプトを実行します：

これは提供された引数でスクリプトを実行し、ユーザープロフィール機能に必要なすべてのファイルを作成します。

テンプレートの作成

.claude/templatesディレクトリにテンプレートファイルを作成します：

// .claude/templates/component.tsx

import React from 'react';

interface {{name}}Props {
  // Add props here
}

export const {{name}} = ({ ...props }: {{name}}Props) => {
  return (
    <div className="{{kebabCase name}}-component">
      {/* Component content */}
    </div>
  );
};

export default {{name}};

テンプレートは、生成時に置き換えられる$nameのような変数を含むHandlebars形式の構文を使用します。

テンプレートの使用

claude generateコマンドを使用してテンプレートからファイルを生成します：

これは、テンプレートに基づいてsrc/components/UserProfile/UserProfile.tsxに新しいコンポーネントを作成します。

CI/CD統合

Claude Code自動化をCI/CDパイプラインに統合します：

# .github/workflows/claude-checks.yml

name: Claude Code Checks

on:
  pull_request:
    branches: [ main ]

jobs:
  code-quality:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - name: Install Claude CLI
        run: npm install -g @anthropic/claude-cli
      - name: Run Claude Code Review
        run: claude run code-review --reporter=github

イベントベースの自動化

プロジェクトイベントに基づいてトリガーされる自動化を設定します：

// .claude/config.json

{
  // ... other config
  "events": {
    "onComponentCreate": "generate-tests",
    "onModelChange": "update-migrations",
    "onApiChange": "update-documentation"
  }
}

この設定は、特定のイベントが発生したときに特定のスクリプトを自動的に実行するようにClaude Codeに指示します。