# WP Advanced Form - JavaScript モジュール構成

## 概要

管理画面のJavaScriptコードを機能別にモジュール化し、保守性と拡張性を向上させました。

## モジュール構成

### 1. `init.js` - モジュール初期化管理
- 各モジュールの読み込みと初期化を管理
- 依存関係の解決と読み込み順序の制御
- モジュールの状態監視と再初期化機能

### 2. `form-builder.js` - フォームビルダー機能
- フィールドの追加・編集・削除・並び替え
- ドラッグ&ドロップによるフィールド配置
- フィールドタイプ別の設定管理

### 3. `field-settings.js` - フィールド設定モーダル
- フィールド設定モーダルの表示・非表示
- フィールド設定の保存・読み込み
- バリデーション設定の管理

### 4. `preview.js` - プレビュー機能
- HTMLプレビューとフォームプレビューの切り替え
- リアルタイムプレビュー更新
- CSSプレビューモーダル

### 5. `mail-settings.js` - メール設定機能
- 自動返信メール設定
- 管理者通知メール設定
- メールテンプレートの自動生成
- テストメール送信機能

### 6. `utilities.js` - ユーティリティ機能
- 通知表示機能
- フォームデータ保存
- ショートコードコピー機能
- フォーム一覧画面の機能

### 7. `submissions.js` - 送信データ管理機能
- 送信データの詳細表示
- 既読状態管理
- 送信データの削除
- 一括操作機能

### 8. `settings.js` - 設定機能
- 送信ボタン設定
- カスタムCSS設定
- フォームフロー設定
- IPブロック設定
- セキュリティ設定
- データエクスポート設定

## 依存関係

```
FormBuilder (独立)
├── FieldSettings
├── Preview
└── MailSettings

Utilities (独立)
├── Submissions
└── Settings
```

## 使用方法

### 1. モジュールの読み込み
HTMLで各モジュールを順番に読み込みます：

```html
<!-- 依存関係のないモジュール -->
<script src="modules/utilities.js"></script>
<script src="modules/form-builder.js"></script>

<!-- 依存関係のあるモジュール -->
<script src="modules/field-settings.js"></script>
<script src="modules/preview.js"></script>
<script src="modules/mail-settings.js"></script>
<script src="modules/submissions.js"></script>
<script src="modules/settings.js"></script>

<!-- 初期化管理 -->
<script src="modules/init.js"></script>
```

### 2. モジュールの初期化
`init.js`が自動的に全モジュールを初期化します。

### 3. モジュールの状態確認
```javascript
// モジュールの状態を確認
var status = window.WPAF.ModuleLoader.getStatus();
console.log(status);

// 特定のモジュールが読み込まれているか確認
if (window.WPAF.ModuleLoader.isLoaded('FormBuilder')) {
    // FormBuilderモジュールが利用可能
}
```

### 4. モジュールの再初期化
```javascript
// 特定のモジュールを再初期化
WPAF.ModuleLoader.reinitialize('FormBuilder');

// 全モジュールを再初期化
WPAF.ModuleLoader.reinitialize();
```

## 開発ガイドライン

### 1. 新しいモジュールの追加
1. `modules/`ディレクトリに新しいJSファイルを作成
2. モジュールの依存関係を`init.js`の`moduleDependencies`に追加
3. モジュールに`init()`関数を実装
4. モジュールの機能を`WPAF.ModuleName`として公開

### 2. モジュール間の通信
- 直接的な依存関係は避ける
- イベントシステムを使用する
- グローバルな`WPAF`オブジェクトを介して通信

### 3. エラーハンドリング
- 各モジュールで適切なエラーハンドリングを実装
- コンソールログでデバッグ情報を出力
- ユーザーに分かりやすいエラーメッセージを表示

### 4. パフォーマンス
- 必要な時のみモジュールを初期化
- イベントハンドラの適切な管理
- メモリリークの防止

## トラブルシューティング

### 1. モジュールが読み込まれない
- 依存関係が満たされているか確認
- コンソールでエラーメッセージを確認
- モジュールの読み込み順序を確認

### 2. 機能が動作しない
- モジュールの初期化状態を確認
- イベントハンドラが正しく設定されているか確認
- 必要なDOM要素が存在するか確認

### 3. エラーが発生する
- ブラウザのコンソールでエラーメッセージを確認
- モジュールの依存関係を確認
- 必要なライブラリが読み込まれているか確認

## 今後の拡張予定

- TypeScriptへの移行
- モジュールの遅延読み込み
- テスト環境の整備
- ドキュメントの充実