NGW開発BLOG
← 記事一覧へ
·#039

セレクトボックスは6行で作る共通ヘルパー（function）に揃える

NGWには数えきれないほどのセレクトボックスがある。それを、たった6行とひとつの共通関数ngwFunc_MakeSelectBoxに統一している。しかもその6行はCreateDBWebが生成する。手書きしないから、ばらつきが入らない。

NGWPHP保守性設計

同じUIは、同じ書き方で

NGWには、セレクトボックス（ドロップダウン）が山ほどある。部門、区分、役職、施設……画面のあちこちで「一覧からひとつ選ぶ」が繰り返される。

これを画面ごとに <select> と <option> のループで手書きしていたら、どうなるか。見た目のクラスが揃わない、エスケープの抜け漏れ、選択済みの付け方の癖、コード値を併記したりしなかったり——小さなばらつきが、数百のセレクトぶん積み上がる。

NGWは、すべてのセレクトボックスを「6行」に統一している。作るのは、たったひとつの共通関数 ngwFunc_MakeSelectBox と、option の配列だけだ。

セレクトボックスは、この6行

たとえば「部門CD」のセレクトは、こう書く。

// 選択肢の配列から select box を作成する
$ObjName  = "fdtDivisionCd";                        // ① select box の名称・ID
$optionArray = ngwFunc_MakeSelectItemsArraySample();   // ② 選択肢データ（関数から取得）
$default  = "$fdtDivisionCd";                       // ③ デフォルト値（選択状態）
$onChange = '';                                     // ④ onChange で起動する JS / jQuery
$ViewCode = FALSE;                                  // ⑤ コード値を併記するなら TRUE
$fdtDivisionCdSelectBoxHtml = ngwFunc_MakeSelectBox($ObjName, $optionArray, $default, $onChange, $ViewCode); // ⑥ 出力

変数を5つ並べて、最後の1行で <select> のHTMLを組み立てる。どのセレクトボックスでも、変わるのは中身だけで、形はいつも同じだ。

  • ① $ObjName … セレクトの name／id。NGWの規約どおり fdt* で始まる。
  • ② $optionArray … 選択肢のデータ。ngwFunc_MakeSelectItemsArrayXxx() という「その項目専用の関数」から受け取る。選択肢の出どころもひとつの関数に閉じている（どのマスタや定数から来るかが、この一行で辿れる）。
  • ③ $default … 既定値。編集時は保存値、新規時は初期値が入る。
  • ④ $onChange … 選択が変わったときに動かすJS。課を選ぶと係が変わる、といった連動が要るときだけ書く。
  • ⑤ $ViewCode … TRUE にすると「01：総務課」のようにコード値を併記する。表示の好みをフラグひとつで切り替えられる。
  • ⑥ 出力 … 組み上がった <select> のHTML文字列が $fdtDivisionCdSelectBoxHtml に入る。画面PHPは、この変数を埋め込むだけでよい。

出力は、こう出る

この6行が実際に吐くのが、次のセレクトボックスだ。

生成された「部門CD」セレクトボックスを開いたところ。選択肢が並んでいる

6行が生成した実物。前回のNGWT_SAMPLEアプリで「部門CD」を開いたところ。先頭の「選択」と選択肢（SELECT 1・2・3…）は `ngwFunc_MakeSelectItemsArraySample()` が返すサンプルデータ。`custom-select` のクラスも既定で付く。

ngwFunc_MakeSelectBox の中では、name／id を付け、共通のクラス（custom-select）をあて、選択肢を回して <option> を並べ、既定値に selected を打つ——という定型を一手に引き受けている。呼ぶ側はその中身を知らなくていい。

共通ヘルパー（function）に揃える意味

セレクトボックスひとつは、取るに足らない部品だ。だが、それがシステム全体で数百あるとなると話は変わる。

6行とひとつの関数に寄せておけば、まず全セレクトの見た目・エスケープ・クラス・onChangeの規約が同一になる。そして仕様を変えたくなったとき——たとえば全部のセレクトのスタイルを差し替える——ngwFunc_MakeSelectBox を一箇所直せば、全画面に一斉に効く。唯一の基準を、UI部品でも実践しているわけだ。

さらにこの6行、人は書かない。前回のCreateDBWebで列を「セレクト」として定義すると、この6行がそのまま生成される（NGWT_SAMPLEの DIVISION_CD がまさにこれだった）。手書きしないから、ばらつきが原理的に入り込まない。命名も型どおりで、$ObjName = "fdtDivisionCd" から出力変数は $fdtDivisionCdSelectBoxHtml へと機械的に決まる。

AIとの協働作業での学び

一貫性は、繰り返す小さなものほど効く。セレクトボックスのような「どうでもいい部品」こそ、数が多いぶん、手書きすればそこが不整合とバグの温床になる。だから「同じUIは同じ6行で」。ひとつのヘルパーと固定の型に——しかも生成で——寄せておけば、数百のセレクトが全部同じ顔で動く。

派手な工夫ではない。だが、こういう地味な統一の積み重ねが、10年動き続けるシステムの土台になっている。