JavaScript の自動化で悩んでいるなら MutationObserver が役立つかもしれない

MutationObserver とは

DOMの変更を監視してくれる機能。変更があった時だけコールバックを実行してくれる。 addEventListener などに近いイメージだ。

https://developer.mozilla.org/ja/docs/Web/API/MutationObserver

個人的な経緯

私が働いている会社はコロナ以降ほとんど在宅勤務なのだが、 Web 上の勤務表に日数分だけ「在宅勤務」と書き込む作業がある。明らかにルーチンワークだったため、自動化することにした。

綺麗な方法で実装するなら API を使うのが良いと思われる。しかし、とにかく楽をしたかったので Chrome Extension 上の JavaScript でボタンをクリック・テキストを入力する方法を採った。認証や API の仕様を調べて実装するのは手間がかかり過ぎるので断念した。

なぜ MutationObserver が必要か

上記の経緯で自動化アプリを作り始めたのだが、1つ問題があった。同時に複数日のリクエストを行うとエラーになってしまうのである。それなら前のリクエストが終わるまで待てばいい、と思ったがそれを知る方法が UI の変化しかなかった。

そこで MutationObserver が役に立った。リクエストが終わるとダイアログが見えなくなる仕様だったので、それを検出することにした。ダイアログが display: none になったタイミングで処理を行うコードはこんな感じになる。

const dialog = document.getElementById('dialog');
const observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (dialog.style.display === 'none') {
      // 処理
    }
  });
});
observer.observe(dialog, { attributes: true, attributeFilter: ['style'] });

まとめ

今回、非常に限定的な用途で MutationObserver が役立った。このように他のアプリの振る舞いを利用する アプリには向いている機能だ。他には UI テストにも上手く使えるかもしれない。逆に、同じアプリ内のやり取りならコールバックやメッセージの送受信で実装するべきなので、出番はなさそうだ。

使いどころを弁えれば非常に便利な機能なので、ぜひ使ってみてほしい。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です