typescript-implementation-plan.md を運用ルールに沿って再編
決まったことだけを書く文書にし、implementation-plan.md に改名した。 TypeScriptの採否も技術選定のやり直しに含まれるため。 本文には自作の決定と検証用サンプルを残した。データ例は旧形式なので 変換が必要と明記した(変換は後日)。技術スタック・構成・フェーズ・ 優先度・セットアップ手順はjournalに原文のまま移し、未確認事項に P-2 技術選定、P-3 リポジトリ構成を立てた。CLAUDE.md の地図も更新。 Journal: journal/2026-09-18-typescript-implementation-plan.md Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 5
@@ -0,0 +1,182 @@
|
||||
# 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変換機能のプロトタイプ**
|
||||
|
||||
実装を開始しますか？最初にどの部分から取り組みたいでしょうか？
|
||||
Reference in New Issue
Block a user