フロント基盤の JS 群を処理の流れから読む
generals/ の _ 始まりの JavaScript は、ブラウザ側の $p を定義し、画面の値を送信し、応答を反映する基盤です。項目の値が取れない、イベントが止まらない、送信後の結果が読めないといった問題は、これらのファイルをつなげて読むと原因を追えます。
ファイル名の一覧だけでなく、どの入口から呼ばれ、どの状態を変更し、何を返すかを軸に解説します。以下は本体ソースで確認した構成です。
12ファイルの担当と詳細解説
| ファイル | 担当・読むポイント | 詳細解説 |
|---|---|---|
| _init.js | $p の入れ物を作る。後続ファイルが関数を追加する | このページの初期化 |
| _elements.js | Hidden 要素・項目・一覧セルを取得し、項目にイベントを登録する | 値の取得、項目とイベントの接続 |
| _data.js | フォーム別バッファ、値登録、必須送信、削除 | 送信バッファ |
| _view.js | 要素の種類に合わせて表示値を変える。バッファ登録とは別 | get・set 系関数 |
| _event.js | 引数の組み立て、共通・コントロール別・アクション別のイベント呼び出し | イベントの振り分け |
| _controllevents.js | DOM イベントを値登録・送信へ接続する | 項目とイベントの接続、自動ポストバック |
| _form.js | 送信先フォーム、検証、収集、通信への引き渡し。clear とタイマーも含む | send と Ajax |
| _ajax.js | CAPTCHA 前処理、確認、通信、成功・失敗・後始末 | send と Ajax |
| _dispatch.js | 応答命令を実行し、必要なら UI を再適用する | 内部動作、実装例 |
| _api.js | API の URL と JSON POST、コールバックと jqXHR | API クライアント |
| _time.js | Date の加算・差分・文字列化・書式変換 | ブラウザの日時処理 |
| _show.js | DOM Ready 時に body の visibility を visible にする | このページの表示開始 |
index.ts は _init.js、_ajax.js などを import し、後ろで _show.js も import します（入口の import、表示開始の import）。これらのファイルにある関数は、名前の先頭に _ を付けて呼ぶものではありません。例えば _form.js の入口は $p.send() です。
初期化は状態の入れ物と関数定義を分けて読む
_init.js が作るのは data・events・ex・modal・store の5つの空オブジェクトです。例えば _data.js は、その後で $p.getData や $p.setData を定義します（初期定義、データ関数の追加）。
| 状態 | ソースで確認できる用途 | 独自処理での扱い |
|---|---|---|
$p.data | フォーム ID ごとの送信バッファ | DOM の値や保存済みの値と区別する |
$p.events | 名前で取り出すイベント関数 | 同じキーへの代入は上書きになる |
$p.store | formId と送信対象の $form など | 取得・送信でも更新されるため、固定した設定値として扱わない |
$p.modal | モーダル関数の登録先 | モーダルのラッパーを参照 |
$p.ex | 初期化時に用意する空オブジェクト | 初期定義だけから自動保存・送信されるとは判断しない |
根拠は getData、イベントの解決、送信対象フォームです。独自状態を追加する場合も、本体が使うキーを上書きしないよう、用途の分かるキーを使います。
操作から応答までの2つの経路
図を読み込み中…
画面操作用の $p.ajax は、成功時に setByJson へ命令配列を渡します。$p.apiExec は API の応答をコールバックへ渡し、dispatch は呼びません。どちらも $.ajax を使いますが、結果の受け取り方が違います（画面応答、API 応答）。
また、項目の自動ポストバックは $p.send を通らず $p.ajax へ進みます。before_validate で処理を追加しても、この経路では実行されません（直接の呼び出し）。
DOM Ready、画面ロード、応答反映を区別する
_show.js は $(function () { ... }) の中で body を表示します。表示開始を、全通信や独自の非同期処理が完了した合図として使う構造ではありません（表示開始）。
本体の初回応答と画面ロードイベントには、サーバーが出力する呼び出しも関係します。編集画面では初回応答が DOM Ready、on_editor_load が window load に対応するコードで呼ばれます。応答反映後の after_set とは別です（初回応答とロードイベント）。
課題から読む順序を選ぶ
| 症状・実装したいこと | 最初に確認するもの | 深める先 |
|---|---|---|
| 値が古い、値を変えても送られない | コントロール、data-raw、フォーム別バッファ | get・set → data |
| 差し替え後にイベントが動かない、何度も呼ばれる | 直接登録か委譲か、登録回数と解除 | 項目イベント |
| false を返しても止まらない | イベントの返却と呼び出し元の中止判定 | イベントの振り分け |
| 送信されない、送信先や値が違う | data-method、data-action、フォームと検証 | send と Ajax |
| API の結果を返却値から取りたい | jqXHR と完了コールバック | API クライアント |
| 応答の途中までしか画面が変わらない | 命令順、型、例外 | dispatch |
| 日付差がずれる、書式の意味が違う | Date と文字列、引き算の向き、対応書式 | 日時処理 |
値の変更が保存まで到達するかは、ブラウザだけで決まりません。全体像とサーバースクリプトで、入力反映・保存・応答の境界も確認してください。
スマートデザインはSvelteのstoreとAxiosを使う別の実装です。起動からサイト設定の保存までの経路はスマートデザインの内部実装で解説しています。