【Exmentハック】プラグイン不要！拡張HTMLだけでフォーム項目を動的に表示/非表示にする軽量アプローチ

オープンソースのデータ管理・Webデータベースツール「Exment（エクスメント）」。非常に強力なツールですが、実務で構築を進めていると、必ずと言っていいほどこんな要望にぶつかります。

「『区分』の選択肢に応じて、表示する入力項目をリアルタイムに切り替えたい」

Exmentの標準機能でこれをやろうとすると、「フォーム優先順位設定」を使ってタイプごとに複数のフォーム画面を作成し、条件分岐させるのが一般的です。
しかし、共通の項目を1つ追加・修正するたびに全てのフォームを直して回る必要があり、運用フェーズの保守コストが地味に跳ね上がります。

「かといって、これだけのためにプラグインをわざわざ開発してサーバーにアップロードするのも大げさすぎる……」

そんな時に試してほしいのが、フォーム設定の中にある「拡張HTML」に少しのjQueryを仕込んで、1つのフォーム内で完結させるハックです。

🛠️ 実装コード

Exmentのフォーム内に「拡張HTML」ブロックを配置し、以下のスクリプトを記述します。

HTML

<script>
$(function () {
    $(window).on('exment:form_loaded', function() {
        setInquiryDynamicForm();
    });

    $(document).on('change', '.value_category', function() {
        setInquiryDynamicForm();
    });

    function setInquiryDynamicForm(){
        const val = $('.value_category').val();
        const rowA = $('.value_detail_a').closest('.row');
        const rowB = $('.value_detail_b').closest('.row');

        if(val === 'Ａタイプ') {
            rowA.show();
            rowB.hide();
            // 非表示側の入力欄を無効化してバリデーションから外す
            $('.value_detail_b').prop('disabled', true);
            $('.value_detail_a').prop('disabled', false);
        } else if(val === 'Ｂタイプ') {
            rowA.hide();
            rowB.show();
            $('.value_detail_a').prop('disabled', true);
            $('.value_detail_b').prop('disabled', false);
        } else {
            rowA.hide();
            rowB.hide();
            $('.value_detail_a, .value_detail_b').prop('disabled', true);
        }
    }
});
</script>

🔍 技術的なポイントの解説

このコードの優れている点は、単に要素の show/hide を切り替えているだけではなく、Exmentが持つWebデータベースとしての挙動を壊さないように配慮されている点です。

① exment:form_loaded へのフック

新規作成時だけでなく、「過去にデータを保存した編集画面を開いた時」にも、保存された値（例：Ａタイプ）を読み込んで正しい初期表示にする必要があります。
Exment独自のカスタムイベント exment:form_loaded をトリガーにすることで、画面立ち上がり時の初期表示バグを防いでいます。

② .closest('.row') による「行」単位のレイアウト制御

入力フィールドだけを隠すと、画面に「ラベル（項目名）」が虚しく残ってしまいます。Exmentのレイアウト構造を活かし、.closest('.row') を使用してグリッドの行ごと非表示にしているため、不自然な空白が空くことなく、画面が上に詰まって美しく整います。

③ .prop('disabled', true) によるバリデーション回避（最重要）

ここが実務上もっとも重要なポイントです。
画面上で非表示にしたとしても、HTML要素が有効なままだと、Exment標準の「必須チェック（バリデーション）」が裏で引っかかってしまい、保存ボタンを押したときに画面が進まないという怪奇現象が起きます。

非表示にするタイミングでターゲット要素に対してピンポイントで .prop('disabled', true) を適用することで、ブラウザからのリクエストパラメータおよびExmentのバリデーション対象から完全に除外する安全な設計にしています。

⚠️ ご購入前の注意点（免責事項）

• 本記事に掲載しているコードは、Exmentの標準的なグリッド構造（.row）をベースに動作確認を行っています。今後のExmentのアップデートや、ご利用のテーマ・プラグイン状況によるDOM構造の違いにより、コードの調整が必要になる場合があります。
• 各項目のクラス名（.value_xxx）は、ご自身の環境で作成した列名（カスタム列の物理名）に合わせて適宜書き換えてご使用ください。
• 本コードの導入によるシステムの不具合やデータ損失等について、筆者は一切の責任を負いかねます。必ず事前にテスト環境（検証環境）にて動作を確認した上で、本番環境へ適用してください。

⚖️ プラグイン方式との比較

今回の「拡張HTML方式」と、王道の「プラグイン開発方式」のトレードオフをまとめました。

「ちょっと画面の操作感を良くしたい」レベルの要望であれば、拡張HTMLで実装する方が圧倒的にタイムパフォーマンス（タイパ）に優れています。

🚀 さらに実戦的なパターンへ

今回はセレクトボックスによる2分岐の基本形を紹介しましたが、実務の現場では「3択以上の複雑な条件分岐」や「ラジオボタンでの切り替え」、「金額が〇〇万円以上だったら入力欄を出す」といった数値連動のロジックを求められることが多々あります。

それらの「実務でそのままコピペして使える」応用テンプレート集をnoteにて公開しました。

📔 有料noteにて公開中

【Exmentハック】標準機能の限界を突破する！拡張HTMLを使った動的フォーム制御の完全ガイド

• パターンA： 3つ以上の多分岐（A、B、Cタイプなど）を行（row）単位でスマートに裁く設計
• パターンB： ラジオボタンや単一チェックボックス（ON/OFF）と連動させるセレクタの書き方
• パターンC： カンマ付き数値入力に対応！「〇〇円以上で表示」をリアルタイムに判定する安全な数値キャスト処理

バグになりやすいポイントを潰した、即戦力のコードをストックしておきたい方はぜひご活用ください！した、即戦力のコードをストックしておきたい方はぜひご活用ください！

👉【Exmentハック】標準機能の限界を突破する！拡張HTMLを使った動的フォーム制御の完全ガイド