jQueryのアニメーションでエラー… Uncaught TypeError : $(…).animate is not a function が出た時の解決内容

今回はこちらのJSのエラーについてです。

Uncaught TypeError: $(...).animate is not a function

これは、jQueryを使ってanimateメソッドを使用しようとした時に出たエラーです。いつも使用しているコードを記述していて、今までこのエラーが出たことがなかったので不思議でした。

しかしこの時にいつもと違って変更したことがあります。それはjQueryの.slim.js や .slim.min.js といった jQueryのslim版を使用したことです。

jQuery CDN

使おうとしたjQueryのCDNコードがこちら。

<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

jQueryのslim版はajax系の関数といくつかのアニメーション系のメソッドのサポートがされていないそうです。なので jQuery のslim版を使っていると、animate だけでなく以下のメソッドを使用した場合もエラーになります。

【参照】jQuery 3.0のスリムビルド版で使えないメソッド等を確認してみた | Another Sky

CDNコードを変えたらエラーは無くなりました。

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

実はこの時に初めて jQueryのslimバージョンを使ったのですが、どういう違いがあるのかということをこのエラーで学びました。
またエラーは学びの機会でもあります。嫌なものでもありますが、いろいろ試して知識を増やしていくのもプログラミングには必要なことです。

数をこなす必要がありますが、エラーに慣れてくるとメッセージを読むだけでどこの何が悪いのか分かることも増えていきます。
プログラミングにエラーはつきものです。エラーになった時に表示される内容の意味、そして原因がわかれば対応しやすくなります。