メニュー

WEBMEMOする。とあるクリエイターの個人的な備忘録。

jQueryなどのプラグインの読み込みはどうしていますか?

自サーバーにダウンロードして読み込む方法と、CDNで読み込む方法があるかと思いますが、CDNで読み込んでいる人は少し注意が必要です。

もしCDNに不具合などが生じてダウンしてしまうと、サイトが正常に動作しない・表示されないリスクがあるからです。

リスクがあることは承知の上で、「まぁGoogleだし大丈夫だろう」と、私もつい最近までCDNの読み込みだけで済ませていたのですが、「フォールバック」というリスク回避テクニックがあることを知ったのでメモしておこうと思います。

目次

    ソースコードと解説

    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>

    何をしているのか?

    「 window.jQuery 」という部分では、jQueryが読み込まれているかを調べています。それに続いて条件式で使われる「 || 」が記述されてあります。ここが初心者には分かりにくいと思いますので、少し解説しておきます。(コピペするだけじゃ気持ち悪い人向け)

    まず、「 A && B || C 」 は 「 if (A) B else C; 」という意味になります。この辺についてはプログラミングの基礎的な知識がしっかりしていれば当然の事みたいですが、私は当初、ん? となりました。

    && や || は論理演算子と呼ぶので、基礎的なところは自分でググってみてください。

    さて、上記のコードでは

    A : window.jQuery
    C: document.write(…);

    にそれぞれ対応しており。「  && B 」 の部分がありません。つまり、

    「A && 何もしない || C」 == 「if( A ) 何もしない else C;」

    ですので、実際にコードを書き換えていくと、

    window.jQuery || document.write(...)
    // 以下のように書き換えられる
    if (window.jQuery){ /* 何もしない( Bの部分 ) */ }else{ document.write(...); }
    //もっと書き換えれば、
    if (! window.jQuery) document.write(...);

    つまり、
    jQuery が存在しなければ script 要素を出力して jQuery を読み込む、というだけです。

    「A && B || C」で、trueの場合の実行式がなく、falseの場合の実行式だけ書かれているのが「window.jQuery || ●●●」ということでした。

    その他、CSSなどのフォールバック

    CSSをCDNで読み込む時のフォールバックは、onload時に「window.jQuery」となる部分を自分で作成し、値を「1(true) 」にセットしておくことで同様のフォールバック処理が実装できます。

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

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

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

    - Thank you for reading this to the end. -

    コメントする

    CAPTCHA


    TOPへ Top