TypeError: $.ajax is not a function エラーが出た時の対策(jQuery 3.x)

  • このエントリーをはてなブックマークに追加

Google Chromeの拡張機能を作るために久しぶりにjQueryのAjax通信処理を書いたので、その時に苦戦したことをメモしておきます。使ったのはjQuery 3.1 slim minifiedでした。

jQuery 1.8からajaxの書き方が少し変わって、以下のように書くのがスタンダードになりました。

詳しくは、こちらの記事で書かれています。ノンプラグラマでも書き方の違いはわかるので、読んでみてください。
jQuery モダンAjaxな書き方を目指して 〜Deferredを使ったAJAX〜

さて、先ほどのコードを実行してみると、Chromeのコンソールにエラーメッセージが表示されました。

TypeError: $.ajax is not a function

はて?jQuery.ajax()関数が無いだと?その後、Javascriptの書き方が悪いのか、jQueryの仕様が変わったのか、2時間ほど解決策を探しまわった末に見つけたのがこちらの記事。

jQuery 3.0 が正式リリース、通常の Web サイト制作で利用するなら軽量版 「Slim build (スリムビルド)」 が便利

jQuery 3.0 の正式版がリリースされました。次バージョンからはバージョン番号を統一して 3.0 にすると発表されてから 1年半後、やっとの正式リリース。Ajax モジュールなどを省いた軽量版 「スリムビルド」 も提供されています。

Ajax モジュールなどを省いた軽量版 「スリムビルド」

僕が使っていたjQueryのバージョンはjQuery 3.1.0 slim minifiedスリムビルド版だったのでajax関数がありませんでした。jQuery 3.1.0 minifiedを使ったら、普通に動きました。

結論

jQuery 3系を使う時にAjax処理を書く際は、うっかりスリムビルドを選択しないように気をつけましょう。僕みたいに時間を無駄にしてしまいます。

 

  • このエントリーをはてなブックマークに追加

SNSでもご購読できます。

コメントを残す

*