Advanced

Implementing Changeset Version Management with Claude Code

Learn how to implement Changeset-based version management and automatic CHANGELOG generation with Claude Code. Covers monorepo support, CI integration, and release flow design.

Changesetで体系的なバージョン管理を実現する

Changesetは、パッケージのバージョン管理とCHANGELOG生成を自動化するツールです。特にモノレポ環境で威力を発揮し、パッケージ間の依存関係を考慮した一貫性のあるリリースフローを構築できます。Claude Codeは設定からCI連携まで的確にサポートします。

初期セットアップ

Claude Codeにセットアップを依頼しましょう。

> Changesetをモノレポプロジェクトに導入して。
> GitHub Actionsでの自動リリース、CHANGELOG生成を含めて。
# インストール
npm install -D @changesets/cli @changesets/changelog-github

# 初期化
npx changeset init
// .changeset/config.json
{
  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
  "changelog": [
    "@changesets/changelog-github",
    { "repo": "your-org/your-repo" }
  ],
  "commit": false,
  "fixed": [],
  "linked": [],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch",
  "ignore": [],
  "___experimentalUnsafeOptions_WILL_CHANGE_IN_PATCH": {
    "onlyUpdatePeerDependentsWhenOutOfRange": true
  }
}

Changesetの作成

変更内容を記述するChangesetファイルの作成方法です。

# インタラクティブにChangesetを作成
npx changeset
<!-- .changeset/happy-dogs-fly.md -->
---
"@myapp/ui": minor
"@myapp/utils": patch
---

ボタンコンポーネントにバリアント「outline」を追加しました。
ユーティリティ関数の型定義を改善しました。

Claude CodeにChangeset作成を依頼するプロンプト例です。

> 今回の変更に対するChangesetを作成して。
> @myapp/uiにminorバージョンの変更、説明文も書いて。

npm scriptsの設定

// package.json
{
  "scripts": {
    "changeset": "changeset",
    "changeset:status": "changeset status",
    "version": "changeset version",
    "release": "changeset publish",
    "prerelease": "npm run build"
  }
}

GitHub Actionsでの自動リリース

PRマージ時に自動でバージョンアップPRを作成し、マージ後にnpmへ公開するワークフローです。

# .github/workflows/release.yml
name: Release

on:
  push:
    branches: [main]

concurrency: ${{ github.workflow }}-${{ github.ref }}

permissions:
  contents: write
  pull-requests: write
  packages: write

jobs:
  release:
    name: Release
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 20
          registry-url: "https://registry.npmjs.org"

      - run: npm ci
      - run: npm run build

      - name: Create Release Pull Request or Publish
        id: changesets
        uses: changesets/action@v1
        with:
          version: npm run version
          publish: npm run release
          title: "chore: バージョンアップ"
          commit: "chore: バージョンアップ"
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

モノレポでの高度な設定

パッケージ間の連携を管理する設定パターンです。

// .changeset/config.json
{
  "changelog": [
    "@changesets/changelog-github",
    { "repo": "your-org/your-repo" }
  ],
  "commit": false,
  "fixed": [
    ["@myapp/core", "@myapp/cli"]
  ],
  "linked": [
    ["@myapp/ui", "@myapp/theme"]
  ],
  "access": "public",
  "baseBranch": "main",
  "updateInternalDependencies": "patch"
}
  • fixed - 常に同じバージョンになるパッケージグループ
  • linked - バージョンが連動して上がるパッケージグループ

プレリリースの管理

ベータ版やRC版のリリースフローです。

# プレリリースモードに入る
npx changeset pre enter beta

# Changesetを追加
npx changeset

# プレリリースバージョンを適用
npx changeset version
# => 1.0.0 -> 1.1.0-beta.0

# 公開
npx changeset publish

# プレリリースモードを終了
npx changeset pre exit

Changesetのバリデーション

PRにChangesetが含まれているかをCIでチェックするワークフローです。

# .github/workflows/changeset-check.yml
name: Changeset Check

on:
  pull_request:
    branches: [main]

jobs:
  changeset-check:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: actions/setup-node@v4
        with:
          node-version: 20
      - run: npm ci
      - name: Check for changeset
        run: npx changeset status --since=origin/main

カスタムCHANGELOGフォーマット

CHANGELOG の出力をカスタマイズするパターンです。

// .changeset/changelog-config.ts
import type { ChangelogFunctions } from "@changesets/types";

const changelogFunctions: ChangelogFunctions = {
  getDependencyReleaseLine: async () => "",
  getReleaseLine: async (changeset, type) => {
    const [firstLine, ...rest] = changeset.summary
      .split("\n")
      .map((l) => l.trimEnd());

    const date = new Date().toISOString().slice(0, 10);

    let returnVal = `- ${firstLine}`;

    if (rest.length > 0) {
      returnVal += `\n${rest.map((l) => `  ${l}`).join("\n")}`;
    }

    return returnVal;
  },
};

export default changelogFunctions;

まとめ

Changesetは体系的なバージョン管理とリリースフローを自動化するための強力なツールです。Claude Codeを活用すれば、初期設定からCI連携、モノレポ対応まで効率的に構築可能です。

モノレポの管理手法はモノレポ管理ガイドを、CI/CDパイプラインの設計はCI/CDセットアップガイドを参照してください。Changesets公式ドキュメントも確認しておきましょう。

#Claude Code #Changeset #version management #monorepo #release