ダウンロード時に注意！　「Modernizr」のエラーが起こる原因。

CSSアニメーションを追加したのですが、ブラウザのチェックのために「Modernizr」を導入することに決めたのですが、中々上手く行かず「なんでやねん！」と嘆いていました。

というのは、ダウンロードしたJSファイルをインクルードしただけなのに、「Modernizr」が定義されていない（Uncaught ReferenceError: ‘Modernizr’ is not defined）というエラーが出てしまっていたんですね。

「何故そんなことが？」と疑問に思って調べてみると、「Modernizr」のダウンロードページにその秘密がありました。

コードの自動生成による時差

「Modernizr」はダウンロードの際、チェックを入れるだけで様々なオプションを付ける事ができます。

僕の場合だとCSS3の対応状況を知りたいだけでしたが、「今後他のプロパティでも使うことがあるかも知れない」と、全てのオプションを選択しました。

あとは「BUILD」をクリックしてダウンロードできます。

ただ、実はこのダウンロードページのコード生成機能は、オプションの項目をクリックする度にコードを生成しているのですが、非同期的にリアルタイムに生成されており、チェックする毎にその処理が行われています。ただ、問題はその処理が行われている最中でもダウンロードが出来てしまい、生成が完了したというサインが出ないことです。

処理速度が速いパソコンだとサクッと生成してくれるのかもしれませんが、僕みたいに古いパソコンを使っていたり、後ろで何か処理していて十分な処理速度が出ていない状態でダウンロードすると、生成途中でダウンロードされ、未完成のコードがダウンロードされてしまいます。「クリップボードにコピー」も同様でした。

何度も試したんですが、酷い場合、ダウンロードしたJSファイルの中身が「undefined」の1単語のみが書かれているだけ、なんてこともありました。

解決方法

多くのオプションを選択すればするほど、生成時間が長くなるようですので、ブラウザのデベロッパーツールでコンソールを見ながら、処理が終わるのをちゃんと確認する必要があります。

一応、チェックを入れる度にコンソールにメッセージが出ますので、「BUILD」をクリックするのは、最低限全ての処理が終わったと判断できてからにした方が無難です。

「Modernizr」って凄く便利なのに、何故ダウンロードページがこんなにもユーザーに優しくないのか疑問です。

コード生成処理時にプログレスバーでも表示してくれればいいんですけどね。