Beyond-KLE/journal/2026-09-18-typescript-implementation-plan.md

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. プロジェクト初期化

# プロジェクト作成
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. パッケージ構成

# 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. 開発ツール設定

# 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変換機能のプロトタイプ

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