【jQuery】Nightly BuildsのDataTablesプラグインを使っていたら突如エラーになった

概要

今まで使用できていたページ（jQueryを使用）が突如動かなくなってしまいました。

検証ツールのConsole Logを見ると以下のようにありました。こちらの記事では、以下エラーの原因と解決方法について解説します。

dataTables.buttons.min.js:44 Uncaught TypeError: t.ext.features.register is not a function
    at dataTables.buttons.min.js:44:337
    at dataTables.buttons.min.js:5:281
    at dataTables.buttons.min.js:5:308
(anonymous) @ dataTables.buttons.min.js:44
(anonymous) @ dataTables.buttons.min.js:5
(anonymous) @ dataTables.buttons.min.js:5

jquery.dataTables.js:6188 Uncaught TypeError: val.apply is not a function
    at jquery.dataTables.js:6188:16
    at Array.map (<anonymous>)
    at _fnCallbackFire (jquery.dataTables.js:6187:50)
    at _fnCreateTr (jquery.dataTables.js:3065:4)
    at _fnDraw (jquery.dataTables.js:3346:6)
    at _fnReDraw (jquery.dataTables.js:3435:3)
    at _fnInitialise (jquery.dataTables.js:4577:3)
    at Object.success (jquery.dataTables.js:321:7)
    at i (jquery.min.js:2:27603)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:28369)

この画面にはデータテーブルとして表を表示していましたが、それらをソートや検索しようとしても、Uncaught TypeError: val.apply is not a functionが再度出るだけでした。何をやっても同じエラー。なぜだ...この前まで使えていたのに...!

履歴を確認しましたが、コードをいじっていたのは数ヶ月前で、その時は普通に動作していました。突如動かなくなったので、焦りました汗

原因

エラーが発生したのは、Nightly Buildsと呼ばれる、開発中のバージョンを利用していたからでした。

今回利用していたのは、jQueryのプラグインであるDataTables。
DataTablesは、HTMLテーブルに対してソート、ページング、フィルタリングなどの機能を提供するライブラリです。JavaScript（jQuery）プラグインです。

そのDataTablesのバージョンがNightly Buildという開発版のバージョンだったのです（前任者が書いたコードなのでなぜNightlyだったのかは不明...ですが本番では使うべきではない）。

Nightly Buildはテストが十分に行われていない可能性があり、CDNの方が安定して使えるとのことで、CDNに切り替えてみたらエラーが消えました。

NIGHTLY BUILDSと呼ばれるテスト中のバージョン
引用元：jQueryのダウンロード方法

「ナイトリービルド」とググればたくさん用語の解説が出てきますが、その名の通り毎晩作業や改修があるようなテスト目的のビルドであり、基本的に一般ユーザー向けのものでははありません。

最近だと、Githubでも「GitHub Copilot Nightly」というVSコード向けの拡張機能がありましたね。あれはプレリリース版として提供されたものでしたので、似たような意味合いのはずです。

解決方法

ということで、以下のコードがエラー発生時の該当箇所です。

base.html

    <link href="https://nightly.datatables.net/css/jquery.dataTables.css" rel="stylesheet" type="text/css" />
    <script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>

以下のようにCDN版に修正することでエラーがなくなり解決しました。

base.html

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css">
    <script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>

※ちなみに、datatablesはjQueryのプラグインですので、必ずjQueryのCDNの後に記述します。逆にするとエラーになります

安定版はAPIの変更が少ないですし頻繁に更新されることもないので、一般的には本番環境での使用ではCDNが推奨されていますね。
DataTablesの公式サイトはこちら：DataTables | Table plug-in for jQuery

CDN（Content Delivery Network）は、ウェブコンテンツを効率的に配信するためのネットワークのこと。世界中のデータセンターを使っているので、ユーザーがアクセスした時に近いところからコンテンツを配信してくれます。これにより、読み込み速度がはやくなったり、サーバの負荷を分散させています。AWSのAmazon CloudFrontとかもそうですね。