ChatBot 開発スキル

このスキルはChatBotプロジェクトの開発全般を支援します。

プロジェクト概要

フロントエンド: HTML5/CSS3/JavaScript (ES6+)
バックエンド: Node.js + Express (app/server/index.js)
AI API: OpenAI, Claude, Gemini, Azure OpenAI対応
コード実行: JavaScript, Python (Pyodide), C++ (g++/JSCPP), HTML
RAG: Transformers.js + IndexedDB（ローカル埋め込み）
ポート: 50000（デフォルト）

主要ディレクトリ

| パス | 説明 | |------|------| | app/public/js/core/ | コアモジュール（API、config、storage等） | | app/public/js/core/rag/ | RAG機能（ベクトルストア、埋め込み、検索） | | app/public/js/components/ | UIコンポーネント | | app/public/js/modals/ | モーダルダイアログ | | app/public/js/utils/ | ユーティリティ関数 | | app/public/css/ | スタイルシート | | app/server/ | バックエンドサーバー |

クラス設計パターン

シングルトンパターン（必須）

すべてのクラスはシングルトンパターンで実装：

class ClassName {
    static #instance = null;

    constructor() {
        if (ClassName.#instance) {
            return ClassName.#instance;
        }
        ClassName.#instance = this;
    }

    static get getInstance() {
        if (!ClassName.#instance) {
            ClassName.#instance = new ClassName();
        }
        return ClassName.#instance;
    }
}

プライベートメソッド

ES2022のプライベートフィールド/メソッドを使用：

#privateField = null;
#privateMethod() { /* ... */ }

設定管理

すべての設定値は window.CONFIG オブジェクトで管理：

window.CONFIG.AIAPI.ENDPOINTS.OPENAI  // APIエンドポイント
window.CONFIG.STORAGE.KEYS.API_TYPE   // ストレージキー
window.CONFIG.AIAPI.DEFAULT_PARAMS    // デフォルトパラメータ

開発手順

関連するコアファイルを確認
既存パターンに従って実装
適切なエラーハンドリングを追加
JSDocコメントで型情報を記載
ドキュメント更新（下記参照）

ドキュメント更新ルール

実装変更後は必ず以下を確認・更新すること：

| 変更内容 | 更新対象 | |----------|----------| | 新機能追加 | README.md、CLAUDE.md、references/project-structure.md | | ディレクトリ追加 | CLAUDE.md（構造）、references/project-structure.md | | 設定値追加 | CLAUDE.md、config.jsコメント | | API変更 | README.md、CLAUDE.md、該当Skillファイル | | 技術スタック変更 | README.md（技術スタック節）、CLAUDE.md | | 既存機能の仕様変更 | 関連するすべてのドキュメント |

更新対象ファイル一覧

| ファイル | 内容 | 対象読者 | |----------|------|----------| | README.md | ユーザー向けガイド、機能説明、技術スタック | エンドユーザー | | CLAUDE.md | 開発者向け概要、必須ルール、主要ファイル | AI/開発者 | | references/project-structure.md | 詳細ディレクトリ構成 | AI/開発者 |

チェックリスト

実装完了時に確認：

[ ] README.md の主な特徴・技術スタックは最新か
[ ] CLAUDE.md の機能説明は最新か
[ ] references/project-structure.md のファイル構成は正確か
[ ] 新しいモジュールは主要ファイル表に追加されているか
[ ] 技術スタック（ライブラリ等）の変更は記載されているか

参照ファイル

詳細は以下のファイルを参照：

references/project-structure.md: 詳細なディレクトリ構成
references/coding-conventions.md: 命名規則、JSDoc
references/development-workflow.md: 開発フロー