Changesetsとは
Changesetsは、Svelte.jsのリポジトリでも採用されているバージョン管理ツールです。Changesets自体はnpmパッケージとして提供されており、Node.jsプロジェクトの管理を行うためのCLIツールとして利用できます。
Changesetsには以下の主要機能があります:
- PR単位またはコミット単位で変更メッセージをMarkdownファイルで生成し管理（Gitにコミット）
- Semantic Versioningに基づいたタグのバンプ（生成したMarkdownはバンプ時に自動削除）
- Changelogの自動生成
Svelte.jsのReleasesを見ると、Semverに基づいたリリースがなされ、リリースノートでは各PRへのリンクが付いていて、とても見やすくなっています。これはChangesetsを利用して作成されています。
リリースプロセスにChangesetsを組み込むには、changesets/actionというGitHub Actionsを利用できます。
また、changeset-botというGitHub Appを導入することで、Pull RequestにChangesetsが適切に適用されているかを自動でチェックすることもできます。
本記事では、Changesetsのインストールから、GitHub Actions、GitHub botの設定方法について解説します。
Changesetsの設定
1. Changesetsのインストールと初期設定
まず、Changesetsのコマンドラインインターフェース（CLI）をインストールします:
pnpm add -D @changesets/cli次に、Changesetsの初期設定を行います:
pnpm changeset init.changeset/ディレクトリが作成され、設定ファイルが生成されます。生成されたファイルはコミットしておきます:
git add .
git commit -m "chore: Changesetsの初期設定を追加"2. package.jsonの更新
package.jsonのscriptsセクションに以下のコマンドを追加します:
"scripts": {
...
+ "changeset": "changeset",
+ "tag": "changeset tag"
},1つ目のpnpm changesetは、新しいChangesetを追加するためのコマンドです。ローカルで変更を行った場合、このコマンドを実行して変更内容を記録します。
2つ目のpnpm tagは、Changesetを元にバージョンを更新するためのコマンドです。後述するGitHub Actionsで使用します。
3. Changelogのカスタマイズ
GitHubリポジトリを使用している場合、changesets-changelog-github-compactプラグインを導入すると、より洗練されたChangelogを生成できます。
Svelte.jsでも利用されており、必須ではありませんが導入をおすすめします。
プラグインのインストール:
pnpm i -D @svitejs/changesets-changelog-github-compact次に、.changeset/config.jsonを編集してChangelogの設定を変更します:
- "changelog": "@changesets/cli/changelog",
+ "changelog": ["@svitejs/changesets-changelog-github-compact", { "repo": "your-username/your-repo" }],your-username/your-repoは、実際のGitHubリポジトリのパスに置き換えてください。
プラグインの設定は以上で完了です。 その他のプラグインに関する詳細はこちらを参照してください。
GitHub Actionsの設定
GitHub Actionsでchangesets/actionを使用してリリースプロセスを自動化します。様々なワークフローの設定パターンが存在するので、詳細はREADMEを参照してください。
changesets/actionでnpmへのパッケージのpublishまで行うことができますが、npmへのpublish以外のデプロイも柔軟に設定できます。
以下は、Changesetsでのnpmへのpublishは行わず、独自のデプロイを実施するGitHub Actionsの設定例です:
name: Release
on:
push:
branches: [main] # リリースブランチを指定
jobs:
release:
runs-on: ubuntu-latest
permissions:
contents: write # Changesets to create releases
pull-requests: write # Changesets to create PRs
#deployments: write # uncomment if your deploy task creates deployments
steps:
- uses: actions/checkout@v4
- name: Use Node.js
uses: actions/setup-node@v4
- uses: pnpm/action-setup@v4
name: Install pnpm
with:
version: 8
run_install: false
- name: Get pnpm store directory
id: pnpm-cache
shell: bash
run: |
echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT
- uses: actions/cache@v4
name: Setup pnpm cache
with:
key: "${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}"
path: "${{ steps.pnpm-cache.outputs.STORE_PATH }}"
restore-keys: |
"${{ runner.os }}-pnpm-store-"
- name: Install dependencies
run: pnpm install
- name: Run Changesets
id: changesets
uses: changesets/action@v1
with:
title: "Update version"
# just needs to echo `New tag: @somename/{pkgName}}@{tagName}` for changesets action to create GitHub release
publish: pnpm tag
env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- name: Build and Deploy
if: steps.changesets.outputs.hasChangesets == 'false' # リリース時のみ実行
run: |
pnpm build
# ここにデプロイ用のコマンドを追加Run Changesetsタスクで、changesets/actionを実行しています。
changesets/actionは、2通りの動作を実施します。
mainブランチで.changesets/に新しいChangesetがpushされた場合
mainブランチに対してリリースPull Requestを作成/更新します。
リリースPull Requestの差分は:
- package.jsonのバージョンアップ
- Changelogの更新
.changesets/にあるChangesetsの削除
参考としてSvelte.jsのリリースPull Requestを見てみてください。
- リリースPull Requestのマージによって
mainブランチがpushされた場合
Changesetsによってリリース処理を行います:
- with.publishに指定したコマンド
pnpm tagが実行され、タグを作成します。 - 作成されたタグに対応するGitHub Releaseを作成します。
Build and Deployタスクは、リリースPull Requestがマージされた場合にのみ実行されます。
GitHub botの設定
Changeset botを導入することで、Pull RequestにChangesetsが適切に適用されているかを自動でチェックできます。設定手順は以下の通りです:
- Changeset botのページにアクセスします。
- “Install”ボタンをクリックし、指示に従ってリポジトリに対してbotを有効化します。
Changesetsの使用方法
ここまでで、Changesetsの設定は完了です！
開発時に、適宜pnpm changesetコマンドを実行してChangesetを追加します。
pnpm changeset
# プロンプトに従って変更内容を入力
# ./changesetに変更内容を記録したMarkdownファイルが生成されるので、コミットする
git add .
git commit -m "feat: 新機能を追加"次回リリースまでの変更内容が.changeset/に記録されていきます。
あとはこれらの変更をmainブランチにマージすれば、リリースPull Requestが作成されます。
リリース時には、リリースPull Requestをマージするだけで、バージョンアップとリリースノートの作成が自動で行われます。
まとめ
Changesetsを導入することで、タグ、Changelog、リリース作成が大幅に効率化されます。 これらを手動で行うことを手間に感じている場合は、ぜひChangesetsを導入してみてください。