要素出現まで取得を待つ系で便利なnpmパッケージ

2021/08/30（月）

動的に生成される特定の要素を選択する際に便利そうなnpmパッケージのピックアップです。

element-ready

個人的によく利用しています。これと言った理由はないのですがメンテナンスがされていて、且つ過不足もないので自作するまででもない時に使うことが多いです。

npm: https://www.npmjs.com/package/element-ready
ライセンス：MIT

npm i element-ready

import elementReady from 'element-ready'

;(async () => {
  const element = await elementReady('#hoge', {
    timeout: 2500,
    stopOnDomReady: false,
  })
  // init
  if (element) {
    console.log(element)
  } else {
    // some code..
  }
})()

デフォルトではDOMContentLoaded event後に自動でチェックをストップしてしまうので、オプションでstopOnDomReadyをfalseにしてあげるとload eventに関係なくチェックを続けてくれます。

wait-for-element.js

暫くメンテナンスがされていないですがシンプルで使えそうです。ただ私のとあるプロジェクトの環境だとwebpackでprodビルドしちゃうと動かなくなる原因が掴めずで、採用は見送った事があります。使用する際は開発環境毎に適切に動くか確認は必要そうです。

npm: https://www.npmjs.com/package/wait-for-element
ライセンス：MIT

npm i wait-for-element

import waitForElement from 'wait-for-element'

waitForElement('#hoge', 2500)
  .then((element) => {
    console.log(element)
  })
  .catch(console.error.bind(console))

waitForSelector

実務で採用したことはありませんが、対象の要素を配列で複数渡せたり、複数渡した際に一番早く出現した要素のみを返してくれたりするので割と便利に使えそうな雰囲気です。

npm: https://www.npmjs.com/package/waitforselector
ライセンス：MIT

npm i waitforselector

import waitForSelector from 'waitforselector'

waitForSelector('#hoge', (element) => {
    console.log(element)
  },
  { timeout: 2500 }
)

wait-element

出現だけでなく、逆の消滅する要素の待機にも対応しているので、ある要素が消えた時に◯◯という実装を行いたい時には便利そうです。cancelメソッドもあったりします。

npm: https://www.npmjs.com/package/@1natsu/wait-element
ライセンス：MIT

npm i @1natsu/wait-element

import { waitDisappearElement, waitElement } from '@1natsu/wait-element'

// waitElement
;(async () => {
  const element = await waitElement('#hoge', { timeout: 2500 }).catch(
    (error) => console.log(error)
  )
  console.log(element)
})()

// waitDisappearElement
;(async () => {
  const element = await waitDisappearElement('#hoge')
  console.log(element)
})()