# typescript-implementation-plan.md の再編

## 結論

- ファイル名を implementation-plan.md に変更。TypeScriptの採否も技術選定のやり直しに含まれるため
- 決まったことだけを書く文書にした。本文に残したのは次の2つ
  - PHY Editor の土台(300fb18 で追記した自作の決定)
  - 検証用サンプル(テストケース4種とデータ例)。データ例は旧形式のため変換が必要と明記した。変換はユーザーが後でやる
- 技術スタック・プロジェクト構造・開発フェーズ・実装優先度・セットアップ手順・次のアクションは、以下に原文のまま移した
- 未確認事項に P-2 技術選定、P-3 リポジトリ構成を立てた
- 原本: `git show 9ebe302:typescript-implementation-plan.md`

## 各記述の行き先

| 元の記述 | 行き先 | 理由 |
|---|---|---|
| PHY Editor の土台 | 本文 | 決定済み |
| テストケース4種、データ例 | 本文「検証用サンプル」 | ユーザー判断で残す。データ例は要変換 |
| 技術スタック | ここ + P-2 | 選定をやり直す(Vue案もNuxtに慣れているだけ、ユーザー談) |
| プロジェクト構造 | ここ + P-3 | 技術選定に依存 |
| 開発フェーズ 1a/1b | ここ | 未決。keyboard-design-layers.md の Phase 1〜3 と重複 |
| 実装優先度 | ここ | 優先度評価。期間の根拠なし |
| 開発環境セットアップ | ここ | 技術スタックに依存 |
| 次のアクション、「実装を開始しますか？」 | ここ | AIとの会話の残骸 |

## 移した原文

## プロジェクト構造

```
beyond-kle/
├── packages/
│   ├── core/                 # 共通型定義とユーティリティ
│   │   ├── src/
│   │   │   ├── types/       # 各レイヤーの型定義
│   │   │   ├── validators/  # JSON Schema バリデーター
│   │   │   └── utils/       # 共通ユーティリティ
│   │   └── package.json
│   ├── phy-editor/          # PHYレイヤーエディタ
│   ├── matrix-mapper/       # IDX/ELCレイヤーマッパー
│   ├── keymap-designer/     # MAPレイヤーデザイナー
│   ├── converter/           # 既存フォーマット変換
│   └── firmware-gen/        # ファームウェア生成
├── tools/
│   ├── cli/                 # CLI ツール
│   └── web-editor/          # Web統合エディタ
├── schemas/                 # JSON Schema定義
├── examples/               # サンプルプロジェクト
└── docs/                   # ドキュメント
```

## 開発フェーズ

### Phase 1a: 基盤実装

1. **型定義とSchema**
   - TypeScript型定義
   - JSON Schema validation
   - テスト用サンプルデータ

2. **変換エンジン**
   - KLE JSON → PHY変換
   - PHY → IDX自動生成
   - QMK/VIA出力

3. **CLIツール**
   - 変換機能のコマンドライン提供
   - バリデーション機能

### Phase 1b: エディタプロトタイプ

1. **PHY Editor (Web)**
   - React + Canvas での編集機能
   - KLE互換インポート

2. **Matrix Mapper**
   - 視覚的マトリックス割り当て
   - 最適化アルゴリズム

## 技術スタック

### コア

- **言語**: TypeScript
- **ランタイム**: Node.js / Bun
- **パッケージ管理**: pnpm + workspace
- **バリデーション**: Ajv (JSON Schema)

### CLI

- **フレームワーク**: Commander.js
- **出力**: chalk (色付き), table

### Web Editor

- **フロントエンド**: React + Vite
- **描画**: Konva.js / Fabric.js
- **状態管理**: Zustand
- **UI**: Mantine / shadcn/ui

### テスト

- **テストランナー**: Vitest
- **E2E**: Playwright

## 実装優先度

### 最優先 (2週間)

1. 型定義とJSON Schema
2. KLE → PHY変換
3. PHY → IDX基本変換
4. CLIでの変換確認

### 高優先 (1ヶ月)

1. QMK/VIA出力
2. 基本的なWebエディタ
3. マトリックス最適化

### 中優先 (2ヶ月)

1. 高度なエディタ機能
2. プロジェクト管理
3. 既存ツール連携

## 開発環境セットアップ

### 1. プロジェクト初期化

```bash
# プロジェクト作成
mkdir beyond-kle-proto
cd beyond-kle-proto

# pnpm workspace設定
echo 'packages:\n  - "packages/*"\n  - "tools/*"' > pnpm-workspace.yaml

# TypeScript設定
pnpm add -D typescript @types/node
npx tsc --init

# 共通依存関係
pnpm add -D vitest ajv
```

### 2. パッケージ構成

```bash
# Core package
mkdir -p packages/core/src/{types,validators,utils}
cd packages/core && pnpm init

# CLI tool
mkdir -p tools/cli/src
cd tools/cli && pnpm init

# 各エディタパッケージ
mkdir -p packages/{phy-editor,matrix-mapper,keymap-designer}
```

### 3. 開発ツール設定

```bash
# Linting & Formatting
pnpm add -D eslint prettier @typescript-eslint/eslint-plugin

# Testing
pnpm add -D @vitest/ui

# Build tools
pnpm add -D tsup
```

## 次のアクション

1. **GitHub リポジトリ作成**
2. **開発環境セットアップ**
3. **型定義の実装開始**
4. **KLE変換機能のプロトタイプ**

実装を開始しますか？最初にどの部分から取り組みたいでしょうか？