Skip to content

AGENTS.md

Latest commit

 

History

History
170 lines (121 loc) · 4.74 KB

AGENTS.md

File metadata and controls

170 lines (121 loc) · 4.74 KB

プロジェクト概要

mooreseditorは、JSONデータをスキーマに基づいて編集するためのTauriアプリケーションです。

重要な設計原則

このプロジェクトはYAMLファイルからスキーマを動的にロードし、そのスキーマを基にJSONデータを編集するマスタデータ編集ソフトウェアです。様々な形式のスキーマが入力されることを想定しているため、絶対にサンプルにあるようなスキーマ構造をハードコードしてはいけません。すべてのスキーマ処理は動的に行い、汎用的な実装を心がけてください。

主要なコマンド

開発環境の起動

pnpm run tauri dev

リントとタイプチェック

pnpm run lint
pnpm run typecheck

テストの実行

pnpm run test

E2Eテストの実行

# 基本的な実行（必ず --reporter=list を付ける）
pnpm run test:e2e -- --reporter=list

# UIモードでの実行
pnpm run test:e2e:ui -- --reporter=list

# 特定のテストファイルを実行
pnpm run test:e2e -- --reporter=list tests/specific-test.spec.ts

# デバッグモードで実行
pnpm run test:e2e:debug -- --reporter=list --debug

Playwrightを使ったデバッグ方法

基本的な手順

  1. ブラウザを開く
mcp__playwright__browser_navigate でhttp://localhost:1420/にアクセス
  1. 要素をクリック
mcp__playwright__browser_click で要素を選択
- element: クリックする要素の説明
- ref: スナップショットからの要素参照
  1. テキスト入力
mcp__playwright__browser_type でテキストボックスに入力
- element: 入力する要素の説明
- ref: 要素参照
- text: 入力するテキスト
  1. キーボードショートカット
mcp__playwright__browser_press_key でキーを押す
例: Control+s（保存）
  1. コンソールログの確認
mcp__playwright__browser_console_messages でブラウザコンソールのメッセージを取得
- エラーの確認
- console.logの出力確認
- 保存されたデータの確認

よく使うデバッグパターン

データ保存のテスト

  1. FileOpenボタンをクリック
  2. メニュー項目（mapObjects等）を選択
  3. フィールドに値を入力
  4. Ctrl+Sで保存
  5. コンソールログで保存されたJSONを確認

複数フィールドの変更確認

  1. 最初のフィールドを変更して保存
  2. コンソールログで確認
  3. 別のフィールドを変更して保存
  4. 前回の変更が保持されているか確認

注意点

アーキテクチャ

ディレクトリ構造

  • /src/components/ - UIコンポーネント
  • /src/hooks/ - カスタムフック
  • /src/utils/ - ユーティリティ関数
  • /src/libs/schema/ - スキーマ関連の型定義

主要なコンポーネント

  • App.tsx - メインアプリケーション、状態管理
  • FormView - フォーム形式でのデータ編集
  • TableView - テーブル形式でのデータ表示
  • EditView - 個別アイテムの編集

データフロー

  1. JSONファイルの読み込み（useJson）
  2. スキーマの読み込み（useSchema）
  3. FormView/TableViewでの編集
  4. onDataChangeによる状態更新
  5. Ctrl+Sで全データを保存

コーディング規約

エラーハンドリング

  • 環境判定のためのif文は避け、try-catchパターンを使用する

  • 本番環境のコードを先に試し、失敗した場合に開発環境用のフォールバックを実行する

  • 例：

    // 良い例
try {
  // 本番環境のファイル読み込みを試行
  const content = await readTextFile(filePath);
} catch (error) {
  // 開発環境用のフォールバック
  const content = await getSampleData();
}

// 避けるべき例
if (isDev) {
  const content = await getSampleData();
} else {
  const content = await readTextFile(filePath);
}

作業完了時のチェック

  • 何らかの実装を終えたら、必ず pnpm run lint と pnpm run build を実行し、Lintおよびビルド結果を確認すること。

Playwrightを使った基本的な動作確認フロー

  • http://localhost:1420にアクセス
  • FileOpenボタンを押す
  • サイドバーに表示されたitems, blocks, mapObjects等を押す（指示によって変わる）
  • 表示されたデータに対して指定された動作を実行