# Decap CMS

## 概要

Decap CMS（旧 Netlify CMS）は、静的サイトジェネレータ向けの拡張可能なオープンソース Git ベース CMS です。React で構築されており、GitHub・GitLab・Bitbucket 等の Git リポジトリをバックエンドとして、Web ブラウザ上でコンテンツの編集・管理を行えます。40 以上のパッケージから構成されるモノレポ構成で、プラグインアーキテクチャにより、カスタムウィジェット・バックエンド・メディアライブラリの拡張が可能です。

## 主な機能

| 機能カテゴリ | 説明 |
| --- | --- |
| コンテンツ編集 | ビジュアルエディタ、プレビュー、ドラッグ&ドロップ対応のリッチなコンテンツ編集インターフェース |
| マルチバックエンド | GitHub, GitLab, Bitbucket, Azure DevOps, Gitea, Git Gateway, プロキシバックエンドに対応 |
| ウィジェットシステム | 15 種類の標準ウィジェット（文字列, テキスト, 数値, ブール, セレクト, リスト, オブジェクト, コード, Markdown, 画像, ファイル, 日時, 地図, リレーション, カラー）に加え、カスタムウィジェットの拡張が可能 |
| メディア管理 | ローカルファイルアップロード、Cloudinary・Uploadcare との統合 |
| 認証・アクセス制御 | OAuth2、JWT、GoTrue.js によるセッション管理 |
| 国際化（i18n） | Polyglot による多言語対応、言語パック管理 |
| コンテンツモデル | YAML 設定ベースのコンテンツモデル定義、JSON Schema（AJV）による検証 |
| Markdown/TOML サポート | Front matter パース、Markdown エディタ、TOML ファイル編集 |
| プロキシサーバー | ローカル開発用の Express.js プロキシサーバー（decap-server） |

## 技術スタック

### コア

- フレームワーク: React 19.1.0
- 言語: JavaScript / TypeScript 4.9.4
- 状態管理: Redux + Redux Toolkit 1.9.1
- CSS-in-JS: Emotion 11.11.x
- ルーティング: React Router DOM 5.2.0
- モジュールバンドラー: Webpack 5.75.0
- トランスパイラー: Babel 7
- サーバー: Express.js 4.18.2（decap-server）

### 主要ライブラリ

- Apollo Client（GraphQL クライアント、GitHub バックエンド向け）
- Lodash / Lodash-ES（ユーティリティ）
- Immutable.js（イミュータブルデータ構造）
- CodeMirror 5.46.0（コードエディタ）
- React DnD 14.0.0（ドラッグ&ドロップ）
- React Markdown 6.0.2 / Remark 7.0.0（Markdown レンダリング）
- GoTrue.js 0.9.24（認証）
- Gray-matter（Front matter パーサー）
- AJV 8.17.1（JSON Schema 検証）
- Dayjs（日時操作）
- Polyglot 2.3.0（i18n）
- React Toastify 9.1.1（通知）

## ディレクトリ構成

```
decap-cms-main/
├── packages/                  # モノレポ: 40+ パッケージ
│   ├── decap-cms/             #   メイン配布パッケージ
│   ├── decap-cms-app/         #   CMS アプリケーション層
│   ├── decap-cms-core/        #   CMS コア機能
│   ├── decap-cms-backend-*/   #   バックエンド統合 (9種類)
│   ├── decap-cms-widget-*/    #   ウィジェット (15種類)
│   ├── decap-cms-ui-default/  #   デフォルト UI
│   ├── decap-cms-ui-auth/     #   認証 UI
│   ├── decap-cms-lib-*/       #   共有ライブラリ
│   ├── decap-cms-locales/     #   多言語リソース
│   ├── decap-cms-media-library-*/  # メディアライブラリ統合
│   └── decap-server/          #   ローカル開発用プロキシサーバー
├── cypress/                   # E2E テスト (Cypress)
│   ├── e2e/                   #   テストスペック
│   ├── fixtures/              #   テストデータ
│   └── support/               #   サポートコード
├── dev-test/                  # 開発テスト環境・サンプル設定
├── scripts/                   # ビルド・デプロイスクリプト
├── functions/                 # Netlify Functions
├── .github/                   # GitHub Actions CI/CD
├── .storybook/                # Storybook 設定
├── __mocks__/                 # Jest モック
├── babel.config.js            # Babel 設定
├── jest.config.js             # Jest 設定
├── cypress.config.ts          # Cypress 設定
├── tsconfig.json              # TypeScript 設定
├── lerna.json                 # Lerna 設定（独立バージョン管理）
├── nx.json                    # NX タスク実行・キャッシュ設定
└── package.json               # ルート package.json (npm workspaces)
```

## セットアップ

### 必要条件

- Node.js: LTS 版（v10.22.1 以上）
- npm: 9.9.2 以上
- nvm（推奨）: `.nvmrc` でバージョン指定済み

### インストール手順

```bash
# リポジトリクローン
git clone https://github.com/decaporg/decap-cms
cd decap-cms

# 依存パッケージのインストール
npm install
```

### 開発環境の起動

```bash
# ホットリロード対応の開発サーバーを起動
npm start
# または
npm run develop

# ブラウザで http://localhost:8080/ にアクセス
```

### ビルド

```bash
# 本番ビルド（ESM + UMD）
npm run build

# ESM のみビルド
npm run build:esm

# ビルド後プレビューサーブ
npm run build-preview
```

## 開発

### テスト

```bash
# lint + 型チェック + ユニットテスト
npm test

# すべてのテスト（ユニット + E2E）
npm run test:all

# ユニットテストのみ（Jest）
npm run test:unit

# E2E テスト（Cypress）
npm run test:e2e

# E2E テスト開発モード（Cypress UI）
npm run test:e2e:dev
```

### Lint & フォーマット

```bash
# ESLint + Stylelint 実行
npm run lint

# コードフォーマット（ESLint + Prettier）
npm run format

# TypeScript 型チェック
npm run type-check
```

### クリーンアップ

```bash
# dist ディレクトリ + キャッシュ削除
npm run clean

# dist + node_modules 削除（フルリセット）
npm run reset
```
