public/
└── javascripts/
└── admin/
└── members/
├── main.js # 初期化、寺院・グループ選択ロジック
├── renderMembersCollapsible.js # 家族リスト描画・並べ替え・削除
├── memberForm.js # 家単位の登録・編集（name, memoなど）
├── familyMemberForm.js # 家族単位の登録・編集（名前、続柄、戒名など）
├── kaimyouForm.js # 戒名サブフォーム制御（生没日など）
├── addressForm.js # 住所サブフォーム制御（もし存在すれば）
├── service.js # fetchラッパーやAPI定義群
└── utils.js # PokpokUtils など汎用関数
| ファイル名 | 目的 |
|---|---|
main.js |
初期DOM操作と寺院/グループ選択、最初のエントリーポイント |
renderMembersCollapsible.js |
選択されたリポジトリに対するメンバーリスト描画・並べ替え・削除 |
memberForm.js |
家単位の登録・編集フォーム表示・保存・バリデーション |
familyMemberForm.js |
各家族の登録・編集フォームの制御（モーダルなど） |
kaimyouForm.js |
戒名データ（kaimyou）の表示・入力支援・検証など |
addressForm.js |
住所欄が必要な場合のフォーム制御（optional） |
service.js |
API通信（GET/POST/PUT/DELETE）関数を統一して管理 |
utils.js |
汎用 escapeHtml, formatDate 等を集約（window.PokpokUtils → ES module化） |
main.js にだけ以下を置くようにします：
import { renderMembersCollapsible } from "./renderMembersCollapsible.js";
import { fetchTemples, fetchDisplayGroups, fetchMembers } from "./service.js";
// ※ M.FormSelect.init や event listener 初期化もここで完結
<!-- layout.pug または members.pug -->
script(type="module" src="/javascripts/admin/members/main.js")
各 JSファイルを export / import 構文に統一
例（renderMembersCollapsible.js）:
export function renderMembersCollapsible(repoName, members, onBack) {
// ...（今あるコードをそのまま）
}
memberForm.js / familyMemberForm.jskaimyouForm.js or utils.js に分けやすいservice.js に統一できる（DRY原則）React や Svelte 等にリプレイスする際、ロジック分割がそのまま再利用可能TypeScript 変換も容易（型を service.js に追加しておけば他に波及）main.js を抽出してセレクト・初期化に絞るrenderMembersCollapsible.js を完全切り出し（そのまま export）memberForm.js に実装開始この構造であれば機能追加・UI変更にも強く、保守性も高いです。
必要なら各ファイルのひな形も生成できます。やりますか？