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公式ドキュメントも確認しておきましょう。
Related Posts
Mastering Claude Code Hooks: Auto-Format, Auto-Test, and More
Mastering Claude Code Hooks: Auto-Format, Auto-Test, and More. A practical guide with code examples.
Claude Code MCP Server Setup and Practical Use Cases
Claude Code MCP Server Setup and Practical Use Cases. A practical guide with code examples.
The Complete Guide to Writing CLAUDE.md: Best Practices for Project Configuration
The Complete Guide to Writing CLAUDE.md: Best Practices for Project Configuration. A practical guide with code examples.