jQueryなどのCDNのフォールバックの正しい実装方法【CDN障害への備え】

CDNから読み込みしてる次のライブラリ

jQuery（jquery.js）
Bootstrap（bootstrap.js）
その他CSSライブラリ

不安に思うのは「もしCDN障害が起きたらどうなるの？」ということです。もしCDNだけに依存していたら、その時点でサービスが機能崩壊してしまいます。

そこで安心安全のためにCDNのフォールバックを作る方法ってのがあります。主にjQuery・Bootstrao・CSSライブラリなどで有効な方法です。

このページの目次

JavaScriptライブラリのCDNフォールバックの作り方
- １．jQueryのCDNフォールバックの実装コード例
- ２．BootstrapのCDNフォールバックの実装コード例
CSSライブラリでのCDNフォールバックの実装
ここまでのまとめ

JavaScriptライブラリのCDNフォールバックの作り方

初めに断っておくと万能ではありません。

なぜならjQueryなどのJSライブラリは読み込み失敗したかの判断ができないからです。（具体的には <script> には onerror のような属性が設定できない）

そこでJSライブラリの場合・・・jQueryなどの主要ライブラリ限定の方法になりますが、そのライブラリ固有オブジェクトが定義されているかをCDNフォールバック起動の発動条件にします。

具体的な例を出してくなら次の通り

１．jQueryのCDNフォールバックの実装コード例

初めはjQueryをCDNから読み込む場合について。

まず次のように普通にCDNから読み込みします。

▼ 例えばGoogleAPIsを使ってみる

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

1	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

▼ この後にCDNフォールバックのJSコード追加

<script>{
  /// フォールバック for jquery.min.js
  const srcValue = "./js/jquery.min.js";
  window.jQuery || document.write(
    '<script src="'+srcValue+'"><'+'/script>'
  );
}</script>

<script>{

/// フォールバック for jquery.min.js

const srcValue = "./js/jquery.min.js";

window.jQuery || document.write(

'<script src="'+srcValue+'"><'+'/script>'

);

}</script>

これは window.jQuery が未定義ならjQuery読み込み失敗と判断し、ローカル（例 : "./js/jquery.min.js"）からjQueryを読み込みしてるだけです。

もしCDN経由で使っているJSライブラリがあるなら、こういった風にCDNのフォールバックを作ることが可能です。（もちろん汎用的なやり方ではないが・・・）

２．BootstrapのCDNフォールバックの実装コード例

ついでに bootstrap.min.js についても紹介

こちらもCDNから呼び出すことが多いと思います。

▼ こんな風にCDNから読み込みしてるとする

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

1	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

▼ この後にCDNフォールバック用コードを追加

<script>{
  /// フォールバック for bootstrap.min.js
  const srcValue = './js/bootstrap.min.js';
  $.fn.modal || document.write(
    '<script src="'+srcValue+'"><'+'/script>'
  )
}</script>

<script>{

/// フォールバック for bootstrap.min.js

const srcValue = './js/bootstrap.min.js';

$.fn.modal || document.write(

'<script src="'+srcValue+'"><'+'/script>'

)

}</script>

Bootstrapの場合は「Bootstrap固有のオブジェクト」みたいなものはないので、 $.fn.modal が定義されてるかを判断基準にしてます。

他JSライブラリでも似たような方法は使えるはず

もし無理そうだったら諦めてください

CSSライブラリでのCDNフォールバックの実装

CSSの場合は汎用的なフォールバックが作れます。

手順としてはこうです。

フォールバック用の適当な関数を作る
onerror属性からその関数呼び出し
CDN障害時だけローカルから読み込み

こういったシンプルな実装ができます。

具体的な方法を解説するなら次の手順です。

１．CDNフォールバック関数を作成

▼ CSS読み込み前に定義しておく

<script type="text/javascript">
function cdnStylesheetFallback(value) {
  $("head").append(
    '<link rel="stylesheet" href="' + value + '">'
  );
}
</script>

function cdnStylesheetFallback(value) {

$("head").append(

'<link rel="stylesheet" href="' + value + '">'

);

}

</script>

これは引数の value にCSSのローカルパスを指定し、ヘッダー内にlinkタグを追加できる関数です。この関数を適当な場所に定義しておいてください。

２．linkタグのonerror属性で関数呼び出し

▼ CDNからCSSライブラリを呼び出し

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      onerror="cdnStylesheetFallback('./css/bootstrap.min.css');"
      rel="stylesheet" >

onerror="cdnStylesheetFallback('./css/bootstrap.min.css');"

rel="stylesheet" >

CSSのフォールバックはこれだけ

onerror属性があるから汎用性高いです。

ここまでのまとめ

ということで簡単にまとめ

JSライブラリのCDNフォールバック
scriptタグにはonerror属性がないため、JSライブラリは読み込み失敗したかの判断ができない。そのためjQuery・Bootstrapのような特別なオブジェクトがある場合だけフォールバックが用意できる
CSSライブラリでのCDNフォールバック
linkタグではonerror属性が使えるから汎用的なフォールバックが用意できる。フォールバック用のJSコードを追加しておけばOK

以上、jQueryなどのCDNフォールバックでした。