取り組みの背景 — なぜ AI IDE で npm パッケージを作るのか
npm レジストリには 200 万を超えるパッケージが公開されています。自分だけのユーティリティライブラリや OSS ツールを公開したいと考えている方も多いのではないでしょうか。しかし、TypeScript のビルド設定やテストの整備、バージョン管理、公開作業など、ライブラリ開発特有のボイラープレートに手間取ることも少なくありません。
Antigravity の AI エージェントを活用すれば、こうした定型作業を大幅に自動化できます。プロジェクトの初期スキャフォールディングから型定義の生成、テストケースの自動作成、そして npm publish に至るまで、エージェントと対話しながら効率よく進めることが可能です。
プロジェクトの初期化 — AI にスキャフォールディングを任せる
Antigravity でまず行うのは、エージェントにプロジェクトの骨組みを作ってもらうことです。ターミナルまたはチャットパネルから以下のように指示します。
TypeScript npm パッケージのプロジェクトを作成してください。
- パッケージ名: @myorg/utils
- ESM + CJS デュアル出力
- tsup でバンドル
- vitest でテスト
- biome でリント&フォーマット
エージェントは以下のようなディレクトリ構成を自動生成します。
@myorg/utils/
├── src/
│ └── index.ts # エントリポイント
├── tests/
│ └── index.test.ts # テストファイル
├── tsconfig.json # TypeScript 設定
├── tsup.config.ts # バンドル設定(ESM + CJS)
├── vitest.config.ts # テスト設定
├── biome.json # リント&フォーマット設定
├── package.json # npm メタデータ
├── README.md # ドキュメント
├── LICENSE # ライセンスファイル
└── .gitignoreポイントは、tsup を使って ESM と CommonJS の両形式でビルドする構成を最初から用意してもらう点です。これにより、モダンな import 文と従来の require() のどちらからでも利用できるライブラリになります。
package.json の設計 — exports フィールドを正しく構成する
npm パッケージで最も重要なのは package.json の構成です。AI エージェントに依頼すると、以下のような最適な設定を生成してくれます。
{
"name": "@myorg/utils",
"version": "0.1.0",
"type": "module",
"main": "./dist/index.cjs",
"module": "./dist/index.js",
"types": "./dist/index.d.ts",
"exports": {
".": {
"import": {
"types": "./dist/index.d.ts",
"default": "./dist/index.js"
},
"require": {
"types": "./dist/index.d.cts",
"default": "./dist/index.cjs"
}
}
},
"files": ["dist", "README.md", "LICENSE"],
"scripts": {
"build": "tsup",
"test": "vitest run",
"test:watch": "vitest",
"lint": "biome check .",
"prepublishOnly": "npm run build && npm run test"
}
}exports フィールドの conditional exports を使うことで、Node.js のバージョンやモジュールシステムに応じて適切なファイルが解決されます。types を各条件の先頭に配置するのは TypeScript の型解決を正しく動作させるためのベストプラクティスです。
Antigravity のエージェントはこうした細かな仕様にも対応してくれるため、手動で調べる時間を大幅に節約できます。
tsup によるビルド設定 — ESM と CJS のデュアル出力
tsup は TypeScript ライブラリのバンドルに特化したツールで、設定が簡潔です。
// tsup.config.ts
import { defineConfig } from "tsup";
export default defineConfig({
entry: ["src/index.ts"],
format: ["esm", "cjs"], // デュアル出力
dts: true, // 型定義ファイルを自動生成
splitting: false,
sourcemap: true,
clean: true, // ビルド前に dist/ をクリーン
outDir: "dist",
target: "es2022",
minify: false, // ライブラリは minify しないのが一般的
});ビルドは以下のコマンドで実行できます。
# ビルド実行
npx tsup
# 出力結果の確認
# dist/index.js — ESM 形式
# dist/index.cjs — CommonJS 形式
# dist/index.d.ts — 型定義
# dist/index.d.cts — CJS 用型定義Antigravity のエージェントに「ビルドして結果を確認して」と依頼するだけで、ビルドの実行とファイル生成の検証まで自動で行ってくれます。
AI によるテストケースの自動生成
ライブラリ開発では、公開 API の信頼性を保証するテストが欠かせません。Antigravity のエージェントは実装コードを読み取り、エッジケースを含むテストを自動生成します。
たとえば、以下のようなユーティリティ関数があるとします。
// src/index.ts
export function slugify(text: string): string {
return text
.toLowerCase()
.trim()
.replace(/[^\w\s-]/g, "")
.replace(/[\s_]+/g, "-")
.replace(/-+/g, "-")
.replace(/^-|-$/g, "");
}
export function truncate(str: string, maxLength: number, suffix = "..."): string {
if (str.length <= maxLength) return str;
return str.slice(0, maxLength - suffix.length) + suffix;
}
export function groupBy<T>(arr: T[], key: keyof T): Record<string, T[]> {
return arr.reduce((acc, item) => {
const group = String(item[key]);
(acc[group] ??= []).push(item);
return acc;
}, {} as Record<string, T[]>);
}エージェントに「src/index.ts のテストを作成して」と指示すると、以下のようなテストが生成されます。
// tests/index.test.ts
import { describe, it, expect } from "vitest";
import { slugify, truncate, groupBy } from "../src/index";
describe("slugify", () => {
it("基本的な文字列をスラッグに変換する", () => {
expect(slugify("Hello World")).toBe("hello-world");
});
it("特殊文字を除去する", () => {
expect(slugify("Hello, World! @2026")).toBe("hello-world-2026");
});
it("先頭と末尾のハイフンを除去する", () => {
expect(slugify(" --hello-- ")).toBe("hello");
});
it("空文字列を処理する", () => {
expect(slugify("")).toBe("");
});
it("連続するスペースをハイフン1つにまとめる", () => {
expect(slugify("a b c")).toBe("a-b-c");
});
});
describe("truncate", () => {
it("上限以下の文字列はそのまま返す", () => {
expect(truncate("short", 10)).toBe("short");
});
it("上限を超えた文字列を切り詰める", () => {
expect(truncate("this is a long sentence", 10)).toBe("this is...");
});
it("カスタム suffix を適用する", () => {
expect(truncate("abcdefghij", 8, "…")).toBe("abcdefg…");
});
});
describe("groupBy", () => {
it("指定キーでグループ化する", () => {
const data = [
{ category: "a", value: 1 },
{ category: "b", value: 2 },
{ category: "a", value: 3 },
];
const result = groupBy(data, "category");
expect(result.a).toHaveLength(2);
expect(result.b).toHaveLength(1);
});
it("空配列は空オブジェクトを返す", () => {
expect(groupBy([], "key" as never)).toEqual({});
});
});テストの実行もエージェントに任せることができます。vitest run を実行してもらい、全テストがパスすることを確認しましょう。テスト駆動開発(TDD)のアプローチに興味がある方は、Antigravity × TDD テスト自動化ガイド も参考になります。
バージョン管理と CHANGELOG の自動化
パッケージの公開にあたって、セマンティックバージョニング(semver)に従ったバージョン管理が重要です。Antigravity のエージェントを使えば、変更内容の分析からバージョンバンプの判断、CHANGELOG の更新まで一連の作業を自動化できます。
# エージェントへの指示例
「最新のコミット履歴を確認して、semver に基づいたバージョンバンプを提案してください。
CHANGELOG.md も Keep a Changelog 形式で更新してください。」エージェントはコミットメッセージを分析し、以下のように判断してくれます。
- fix: パッチバージョン(0.1.0 → 0.1.1)
- feat: マイナーバージョン(0.1.0 → 0.2.0)
- BREAKING CHANGE: メジャーバージョン(0.1.0 → 1.0.0)
生成される CHANGELOG は以下のような形式です。
## [0.2.0] - 2026-03-31
### Added
- `groupBy` ユーティリティ関数を追加
- ESM + CJS デュアル出力に対応
### Fixed
- `slugify` で連続ハイフンが残る問題を修正npm publish — 公開前チェックと実行
パッケージを公開する前に、Antigravity のエージェントに最終チェックを依頼しましょう。
公開前の最終チェックを行ってください。
- package.json の files フィールドが正しいか
- dist/ にビルド成果物があるか
- README.md が存在し、使い方の説明があるか
- LICENSE ファイルが存在するか
- npm pack --dry-run で含まれるファイルを確認
エージェントは npm pack --dry-run を実行し、パッケージに含まれるファイル一覧を確認してくれます。
# 公開前の確認コマンド
npm pack --dry-run
# 出力例:
# npm notice Tarball Contents
# npm notice 1.2kB dist/index.js
# npm notice 1.0kB dist/index.cjs
# npm notice 892B dist/index.d.ts
# npm notice 892B dist/index.d.cts
# npm notice 2.1kB README.md
# npm notice 1.1kB LICENSE
# npm notice 580B package.json
# npm notice Tarball Details
# npm notice name: @myorg/utils
# npm notice version: 0.2.0
# npm notice package size: 3.2 kB問題がなければ、以下のコマンドで公開します。
# npm にログイン(初回のみ)
npm login
# 公開(スコープ付きパッケージの場合は --access public を指定)
npm publish --access publicpackage.json の prepublishOnly スクリプトにより、公開前に自動でビルドとテストが実行されるため、壊れた状態のパッケージが公開されるリスクを軽減できます。
CI/CD との連携 — GitHub Actions で自動公開する
手動で npm publish を実行する方法だけでなく、GitHub Actions を使った自動公開パイプラインを構築すると、さらに効率的です。Antigravity のエージェントに「GitHub Actions で npm パッケージを自動公開するワークフローを作成して」と依頼すると、以下のような設定を生成してくれます。
# .github/workflows/publish.yml
name: Publish Package
on:
release:
types: [published]
jobs:
publish:
runs-on: ubuntu-latest
permissions:
contents: read
id-token: write
steps:
- uses: actions/checkout@v4
- uses: actions/setup-node@v4
with:
node-version: "22"
registry-url: "https://registry.npmjs.org"
- run: npm ci
- run: npm run lint
- run: npm run test
- run: npm run build
- run: npm publish --provenance --access public
env:
NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}--provenance フラグを付けることで、npm のサプライチェーンセキュリティ機能(provenance attestations)に対応し、パッケージの信頼性を高めることができます。
より高度な CI/CD パイプラインの構築方法については、Antigravity × GitHub Actions 上級CI/CDパイプライン構築ガイド で詳しく解説しています。
まとめ
Antigravity の AI エージェントを活用することで、TypeScript npm パッケージの開発サイクル全体を効率化できます。プロジェクトの初期化、package.json の最適な構成、テストケースの自動生成、バージョン管理、そして CI/CD 経由の自動公開まで、エージェントと協力しながら進めることで、ライブラリ開発者はコアロジックの設計と実装に集中できるようになります。
ぜひ Antigravity でお気に入りのユーティリティを npm パッケージとして公開し、開発コミュニティに貢献してみてください。