クライアントの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...
}) 

内部処理

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

  1. docReady.isReadyというプロパティを保持。以下の処理が用意されており、それぞれがisReadyをtrueに変更します。

    • document.readyState === ‘complete’
      • MDN: document.readyState
    • documentのDOMContentLoadedあるいは、readystatechangeイベントが発生する。
    • windowのloadイベントが発生する。
  2. isReady === trueならば、渡された関数(上の//your code comes here…部分)を実行。

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

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

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