クライアントのJSを書くとき、DOMのロードを待つ必要がある時があります。そんなとき、jQueryなら、以下のように書きますね。

$(document).ready(function() {
  // your code comes here...
})

ただ、JSの小さなモジュールを作るためにいちいちjQueryを使うのかは悩みどころです。 DOMの取得やイベントの付与には、document.getElementByIdやaddEventListenerで事足りてしまうことがあります。

DOMのロード完了待機にも、jQuery以外の方法を使ってみましょう。

doc-ready

npmのパッケージにdoc-readyというものがあります。今回はこれを使ってみます。

公式の説明によると、

Cross browser document ready helper. Supported by IE8+ and good browsers.

とのこと。IE8にも対応しているのが特徴のように見えます。

使い方

まずはdoc-readyをインストール。

$ npm i doc-ready --save

JSファイルで以下のように書きます。

// main.js
import docReady from 'doc-ready'

docReady(() => {
  // your code comes here...
})

内部的には、以下のようなことを行っています。

docReady.isReadyというプロパティを保持。以下の処理が用意されており、それぞれがisReadyをtrueに変更します。
- document.readyState === ‘complete’
  - MDN: document.readyState
- documentのDOMContentLoadedあるいは、readystatechangeイベントが発生する。
- windowのloadイベントが発生する。
isReady === trueならば、渡された関数（上の//your code comes here…部分）を実行。

また、IE8に対応するため、イベントのバインドにはeventieというパッケージのbindを利用しています。

ライブラリのソースコードはこちらです。

これで、jQueryに頼らずにDOMのロード完了を待つことができます。 IE8に対応しない場合は、documentのDOMContentLoadedイベントを使えば良さそうです。