Zenn
😀

React npm パッケージの作成方法

に公開
Node.js
React
npm
pnpm
tech

「React コンポーネント・機能を npm パッケージとして公開する手順」を紹介します。

目的

React コンポーネントを npm に公開し、Zenn での共有や他プロジェクトで再利用できるようにする。

そもそもnpmとは

npm（Node Package Manager）は、JavaScript/Node.jsのパッケージを管理・配布するシステムです。
開発者はライブラリを npm に公開し、他の人はそれを簡単にインストールして使えます。

要はnode.js向けのライブラリを公開できるってことです。
もちろんReactだけでなくAnular,やVue向けのパッケージなども公開できます。つ

ステップ 1: プロジェクトの初期化

mkdir my-react-lib
cd my-react-lib
npm init -y

npmパッケージの収益化方法

npm に公開したパッケージそのものは無料でも、以下の方法で間接的に収益を得ることが可能です。

1. GitHub Sponsors や OpenCollective

OSS 支援プラットフォームを通じて寄付を受け取ります。

2. 有料版Pro機能を別パッケージで提供

例無料版は @your/lib、有料版は @your/lib-pro

3. バックエンド連携による課金

フロントエンドライブラリから自社APIを呼び出し、APIで課金

4. 有償サポート・導入支援

企業向けに導入支援やカスタマイズサービスを提供

5. 教育コンテンツ販売との連携

Udemy、Zenn、note などで使い方を教材として販売

収益化導線の例

収益モデル 導入のしやすさ 特徴
GitHub Sponsors OSS 寄付文化がある
有料版Pro ライセンスや差別化が必要
API連携課金 バックエンド開発が必要
サポート販売 OSS実績を活かせる
教材販売 日本国内でも人気

ステップ 2: 必要な依存関係のインストール

npm install react react-dom
npm install --save-dev typescript @types/react @types/react-dom vite vite-plugin-dts

ステップ 3: ディレクトリ構成

my-react-lib/
 src/
    MyButton.tsx
    index.ts
 tsconfig.json
 vite.config.ts
 package.json

ステップ 4: コンポーネント作成

title=src/MyButton.tsx
import React from 'react';

export const MyButton = ({ label }: { label: string }) => {
  return <button>{label}</button>;
};

ステップ 5: エントリーポイント

title=src/index.ts
export { MyButton } from './MyButton';

ステップ 6: tsconfig.json

title=tsconfig.json
{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "jsx": "react",
    "declaration": true,
    "emitDeclarationOnly": false,
    "outDir": "dist",
    "strict": true,
    "esModuleInterop": true,
    "moduleResolution": "node",
    "skipLibCheck": true
  },
  "include": ["src"]
}

ステップ 7: Vite 設定

title=vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import dts from 'vite-plugin-dts';

export default defineConfig({
  plugins: [react(), dts()],
  build: {
    lib: {
      entry: 'src/index.ts',
      name: 'MyReactLib',
      fileName: 'index',
      formats: ['es', 'cjs'],
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
    },
  },
});

ステップ 8: ビルド

npm run build

ステップ 9: package.json の調整

title=package.json
{
  "name": "my-react-lib",
  "version": "1.0.0",
  "main": "dist/index.cjs",
  "module": "dist/index.js",
  "types": "dist/index.d.ts",
  "files": [
    "dist"
  ],
  "peerDependencies": {
    "react": "^18.0.0",
    "react-dom": "^18.0.0"
  }
}

ステップ 10: npm 公開

npm login
npm publish --access public

補足: prepublish スクリプト

"scripts": {
  "build": "vite build",
  "prepublishOnly": "npm run build"
}

おわりに

今回はnpmパッケージの公開方法について解説しました。
学びの参考にしていただけると幸いです。

Discussion