MutationObserver で input hidden の変更をイベント通知・状態監視する

Toshihiko Arai

投稿日: 2025-03-19

はじめに

通常、<input type="hidden"> の値変更は change イベントが発火しないため、値の更新を検知できません。本記事では、DOM API の MutationObserver を活用し、jQuery拡張として簡単に監視できる実装例を紹介します。

MutationObserverとは

MutationObserverはDOMツリーの変更（属性・子要素・テキストなど）を非同期に検知するブラウザ標準APIです。従来のMutation Eventsより高性能で、主要ブラウザで広くサポートされています。

jQuery拡張としての実装

(function($) {
  $.fn.observeValue = function(callback) {
    return this.each(function() {
      if (this.tagName.toLowerCase() !== 'input' || this.type !== 'hidden') {
        throw new Error('observeValue(): 対象は input[type="hidden"] のみです');
      }
      var observer = new MutationObserver(function(mutations, obs) {
        callback.call(this, mutations, obs);
      }.bind(this));
      observer.observe(this, { attributes: true, attributeFilter: ["value"] });
    });
  };
})(jQuery);

使用例

// 単一要素
$("#myHidden").observeValue(function() {
  console.log("hiddenの値が変更されました:", this.value);
});

// 複数要素
$("#myHidden, #yourHidden").observeValue(function() {
  console.log("hiddenの値が変更されました:", this.value);
});

解説ポイント

対象制限

input[type="hidden"] のみ監視対象とし、それ以外の要素が指定された場合はエラーを投げる

コールバック内の this

callback.call(this, mutations, obs) を使うことで、コールバック内の this が監視対象の要素を指す

属性変更の限定監視

attributeFilter: ["value"] により、value 属性の変更のみを検知

コールバック引数

• mutations：変更された属性や以前／新しい値などを含む MutationRecord の配列
  
• obs：MutationObserver インスタンス。obs.disconnect() で監視停止が可能

パフォーマンス注意

MutationObserver はコストが高いため、監視対象を input[type="hidden"] に限定して不要な監視を避けること

ブラウザ対応状況

MutationObserver インターフェースは 2012年頃（DOM Level 4 の仕様として） に登場し、主要ブラウザでは以下のバージョンからサポートされています：

まとめ

MutationObserverを用いることで、<input type="hidden"> の値変更を確実に検知可能になります。jQuery拡張として導入すれば、コードもシンプルで再利用性が高く、Web制御画面などでも活用できます。