npm with Claude Code

npmパッケージの公開をClaude Codeで効率化する

自作のユーティリティをnpmパッケージとして公開したいとき、Claude Codeは設定ファイルの生成からテスト、公開手順まで一貫してサポートしてくれます。

パッケージの初期設定

> TypeScriptのnpmパッケージプロジェクトを作って。
> ESMとCJS両対応、型定義ファイル出力、vitestでテスト。
> パッケージ名は@example/string-utils にして。

Claude Codeが生成するpackage.jsonの例：

{
  "name": "@example/string-utils",
  "version": "0.1.0",
  "description": "便利な文字列ユーティリティ集",
  "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"],
  "scripts": {
    "build": "tsup src/index.ts --format cjs,esm --dts",
    "test": "vitest run",
    "test:watch": "vitest",
    "lint": "eslint src/",
    "prepublishOnly": "npm run lint && npm run test && npm run build"
  },
  "keywords": ["string", "utils", "typescript"],
  "license": "MIT",
  "devDependencies": {
    "tsup": "^8.0.0",
    "typescript": "^5.4.0",
    "vitest": "^1.6.0"
  }
}

ライブラリの実装

実際のユーティリティ関数を実装します。

// src/index.ts

/**
 * 文字列をキャメルケースに変換する
 */
export function toCamelCase(str: string): string {
  return str
    .replace(/[-_\s]+(.)?/g, (_, c) => (c ? c.toUpperCase() : ""))
    .replace(/^[A-Z]/, (c) => c.toLowerCase());
}

/**
 * 文字列をケバブケースに変換する
 */
export function toKebabCase(str: string): string {
  return str
    .replace(/([a-z])([A-Z])/g, "$1-$2")
    .replace(/[\s_]+/g, "-")
    .toLowerCase();
}

/**
 * 文字列を指定の長さで切り詰める
 */
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 template(str: string, vars: Record<string, string>): string {
  return str.replace(/\{\{(\w+)\}\}/g, (_, key) => vars[key] ?? "");
}

/**
 * 文字列のバイト数を取得する（UTF-8）
 */
export function byteLength(str: string): number {
  return new TextEncoder().encode(str).length;
}

テストの作成

// src/index.test.ts
import { describe, it, expect } from "vitest";
import { toCamelCase, toKebabCase, truncate, template, byteLength } from "./index";

describe("toCamelCase", () => {
  it("ケバブケースを変換する", () => {
    expect(toCamelCase("hello-world")).toBe("helloWorld");
  });
  it("スネークケースを変換する", () => {
    expect(toCamelCase("hello_world")).toBe("helloWorld");
  });
  it("スペース区切りを変換する", () => {
    expect(toCamelCase("hello world")).toBe("helloWorld");
  });
});

describe("toKebabCase", () => {
  it("キャメルケースを変換する", () => {
    expect(toKebabCase("helloWorld")).toBe("hello-world");
  });
  it("パスカルケースを変換する", () => {
    expect(toKebabCase("HelloWorld")).toBe("hello-world");
  });
});

describe("truncate", () => {
  it("長い文字列を切り詰める", () => {
    expect(truncate("Hello, World!", 8)).toBe("Hello...");
  });
  it("短い文字列はそのまま返す", () => {
    expect(truncate("Hi", 10)).toBe("Hi");
  });
});

describe("template", () => {
  it("変数を置換する", () => {
    expect(template("Hello, {{name}}!", { name: "World" })).toBe("Hello, World!");
  });
});

describe("byteLength", () => {
  it("ASCII文字のバイト数", () => {
    expect(byteLength("hello")).toBe(5);
  });
  it("日本語文字のバイト数", () => {
    expect(byteLength("あ")).toBe(3);
  });
});

tsupによるビルド設定

// tsup.config.ts
import { defineConfig } from "tsup";

export default defineConfig({
  entry: ["src/index.ts"],
  format: ["cjs", "esm"],
  dts: true,
  clean: true,
  sourcemap: true,
  minify: false,
  target: "es2020",
});

公開手順

Claude Codeに「npmに公開する手順を教えて」と聞くと、以下の手順を案内してくれます。

# 1. npmにログイン
npm login

# 2. ビルドとテスト（prepublishOnlyで自動実行）
npm run build

# 3. 公開前にパッケージ内容を確認
npm pack --dry-run

# 4. 公開（スコープ付きパッケージの場合）
npm publish --access public

# 5. バージョンアップ時
npm version patch  # 0.1.0 → 0.1.1
npm publish --access public

CLIツールとして公開する方法はCLIツール開発をご覧ください。Claude Codeの効率的な使い方は生産性を3倍にする10のTipsを参照してください。

Summary

Claude Codeを使えば、npmパッケージのプロジェクト構成、ESM/CJS両対応の設定、テスト、公開手順まで一貫してサポートが受けられます。面倒な設定ファイルの作成を任せて、ライブラリの本質的な機能の開発に集中できます。

詳しくはClaude Code公式ドキュメントを参照してください。