結合したJSコードでエラーが起こる原因と改善方法

ページ速度を改善するための方法として、圧縮・縮小・キャッシュなどの方法がよく取られますが、時々それらを施すことで、コードが正常に読まれなくなる場合があります。

テーマ「Optimizer」に実装されているファイルマージの機能を使用していると、やはり時々上手くいかない場合があると感じ、原因の解明とコードエラーの修正を施してみました。

ただ、プラグインに実装されて呼び出されるコードに関してはどうしようもないかもしれませんが、自分で書いたJSコードなら簡単に修正できるものばかりですので、一度試してみてください。

結合したJSコードでエラーが起こる原因

コードを縮小すると、正しく読まれないなどのエラーが起こってしまう場合、その原因となっているものを探すのちょっと困難に思えますが、ブラウザのコンソールで調べてみると、案外分かりやすかったりします。そして、一番に多いと気がついたのは、JSコード内においてのエラー処理ができていない場合です。

例えば、３つのファイル「a.js」「b.js」「c.js」をa<-b<-cと言った感じの依存関係を持っているとします。読まれる順はa->b->cとなる筈ですので、結合してしまう場合、この順番通りにコードが読まれるように書く必要があります。

ただ、一見順番を守っておけば何の問題もないように思えますが、このコード内において１箇所でもエラーが起きた場合、結合したファイル内におけるエラー箇所以降は評価対象にならなくなってしまうんです。これは結合していない場合は、各ファイルのエラー箇所以降のみが読まれなくなるだけで、エラーの起こらなかったファイルは正常に読まれますから、結合時のみに起こるエラーにはちょっと気が付きにくいんです。

例えば、「b」でjQueryのセレクタで指定した要素が存在していないのに、そのデータを取得するコードが組まれていた場合、当然「そんな要素は存在せず、指定したデータは得られない」とエラーが返ってきます。通常は「b」のみに起こるエラーで他のファイルには影響しませんが、結合した状態だとそれ以降のコード「c」に書かれていたコードまで読まれなくなってしまいます。

つまり、結合したからエラーが出たのではなく、「最初からエラーは出ていたけど、他のファイルのコードに影響していなかっただけ」という場合が案外多いんです。僕も実際にそうでしたから。

結合ファイルの修正方法

ワードプレスでこれが起こる場合、ある程度改善する方法はありますが、プラグインのJSコードの場合はちょっと難しいです。

まず、カスタマイズするために自分で書いたJSコードの場合、コードが正しく読まれない場合も想定して条件分岐やエラーキャッチが出来るようにしておきます。一番簡単なのはifを使っておくことです。

例えば、僕のテーマ「Optimizer」では、サイドバーの固定機能をJSで書いているのですが、固定部分が存在していればコードを読むという処理がなされています。

jQuery.fn.exists = function() { return Boolean( this.length > 0 ); }

こうしてjQueryに「exists」という関数を追加しておけば、セレクタで指定した要素が存在するかを「if( $( select ).exists() )」でチェックできます。存在する場合には「true」、そうでない場合には「false」を取得できるようになります。

まぁこのコードがどこまで汎用的に有効なのかはチェックしていませんが、大抵これで条件分岐できます。

あとは、これを任意の箇所に指定すればOKです。

固定箇所のセレクタの要素を使用する関数などを使う場合には、先にこれで存在するかどうかを確認すれば、エラーがある程度消えてくれます。

プラグインで読まれるコードへの対処

これは使用するプラグインにもよりますし、プラグインのコード自体を改変して使用するのはリスキーですから、たとえエラーがプラグインのコードにある場合でもこの選択肢はありません。

では、どうするかですが、エラー箇所が出ているコードよりも先に読ませてしまうことで改善することは出来ると思われます。絶対とは言い切りませんが、エラーが出るまでは読まれるわけですから、先に読ませてしまうのが一番だと思っただけです。

その方法としてですが、ワードプレスでJSコードをエンキューする関数「wp_enqueue_script」には「依存関係」「優劣」を指定できます。依存関係が無ければとにかく優先順位を早めて読ませるだけで安全圏に入りますが、実際は「jQuery」に依存するコードが多いので、大体はこの後にJSファイルが読まれるようになっていますので、優先度を「1」くらいまで上げておくと、プラグインより早く読まれるようになるんじゃないでしょうか。