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/ | バックエンドサーバー |
クラス設計パターン
シングルトンパターン（必須）
すべてのクラスはシングルトンパターンで実装：
javascript
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のプライベートフィールド/メソッドを使用：
javascript
#privateField = null;
#privateMethod() { /* ... */ }
設定管理
すべての設定値は window.CONFIG オブジェクトで管理：
javascript
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: 開発フロー