jQueryをCDNで読み込む時のフォールバックの記述「window.jQuery || document.write()」って何ぞや？コードの意味を読み解いてみた

CDN側のサーバーがダウンしてしまった時のリスクに備える「フォールバック」というテクニック、皆さんご存知でしょうか。

「<script>window.jQuery || document.write(...)</script>」ってやつです。

私もつい先日知りまして、さっそく「フォールバック」の記述を加えてみました。

例：jQueryのフォールバック

//CDNの読み込み
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
//フォールバック
<script>window.jQuery || document.write('<script src="./.../jquery.min.js"></script>');</script>

*「./.../jquery.min.js」は自サーバーに用意したjqueryファイルまでのパス

ふぅ。これで安心！

...ちょっと待った、これで本当に安心、なのか？

一体このコードは、何をしてるんだろう？

と気になってしまったので、少し詳しく調べてみました。

「window.jQuery || document.write()」とは何をしてるのか？

フォールバックのスクリプト部分を改めて抜き出してみます。

window.jQuery || document.write('<script src="./.../jquery.min.js"></script>');

この記述、A || Bという構造になっていることがわかるでしょうか？

• Aにあたるのがwindow.jQuery
• Bにあたるのがdocument.write('<script src="./.../jquery.min.js"></script>')

です。

そして、A || Bという記法は、「Aが偽(false)と判断される場合にBが返される」という意味の記述テクニックです。これに関して、詳しくは後述します。

では、A側、B側で何をしているのか？詳しく読み解いてみましょう。

A側

まずはA側から。

まず、jQueryが正常に読み込まれると「windowオブジェクト」に「jQueryプロパティ」が追加されることを前提として知っておいてください。

そして、window.jQueryというのは、「windowオブジェクト」の「jQueryプロパティ」を取得しているということです。

そしてそして、jQueryがまだ読み込まれていない場合は、「windowオブジェクト」に「jQueryプロパティ」は存在しないので、window.jQueryで取得する値はundefinedとなってしまいます。

つまり、A側はjQueryが（CDNがダウンして）読み込まれなかった場合に、undefined、つまり「偽」と判断されるのです。

B側

ではでは、A側が「偽」と判断された時に実行されるB側の記述を改めて確認してみましょう。

document.write('<script src="./.../jquery.min.js"></script>')

document.write()というのはドキュメント(HTMLソース)に好きな文字列を書き加えることのできる処理です。

document.write()で書き加えられる内容は (　)の中身ですので、

<script src="./.../jquery.min.js"></script>

という、「jquery.min.jsを読み込むためのscriptタグ」が書き加えられます。

まとめ

1. window.jQuery || document.write()というのはA||Bという構造をしている。
2. jQueryがCDNのダウンによって読み込まれなかった場合、Aが偽と判断され、Bのdocument.write()が実行される。
3. document.write()によって書き加えられたscritptタグによって、自サーバーに用意してあるjQueryのファイルを読み込むことができる。

という意味の記述でした。

これで納得してフォールダウンのコードが使えます。

A || B について

論理演算子 && や || が、Booleanの値を返すものだ、と勘違いしてしまっている方はこの記法が理解できないかと思います。

しかし、これらの論理演算子については、

&&演算子、||演算子によって生成された値は必ず2つのオペランドのうちの1つとなります。

というのがJavaScriptでの仕様です。

参考：JavaScriptの「&&」「||」について盛大に勘違いをしていた件

「オペランド」とは演算子の左右にある値のことです。例えば、「A || B」の、「A」や「B」のことです

おまけ:CDNで読み込めるCSSファイルのフォールバック方法

CSSをCDNで読み込む時のフォールバックは、CDNの読み込みが完了した時に発動するonloadイベント時に「windowオブジェクト」に任意のプロパティを作成しておくことで同様のフォールバック処理が実装できます。

例：CDN読み込みが完了すればcdncssというプロパティを作成し、そのプロパティの存在でCDNの読み込みを判断する

<link rel="stylesheet" onload="window.cdncss=1;" href="CDN読み込み先" />
<script>window.cdncss || document.write('<link rel="stylesheet" href="サーバーに置いているcss">');</script>

その他にも方法はあります。

こちら の記事が非常に参考になりましたので、さらに詳しく知りたい方は是非