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処理を書く際は、うっかりスリムビルドを選択しないように気をつけましょう。僕みたいに時間を無駄にしてしまいます。

Javascriptプログラミングに興味がある方は、動画で本格的に勉強してみませんか? 【世界で2万人が受講】JavaScriptエンジニアのためのES6完全ガイド  (Udemy)

参加対象者は以下のとおりです。
  • JavaScriptの基本的な知識(配列、関数、オブジェクト)が分かる人
  • なんとなくES6(ES2015)を使ってきたが、もっと理解を深めたい人
  • JavaScriptをもっとスッキリとキレイに書きたい人

なお、初心者の方はまずこちらの講座を受けることをおすすめします。 実例でわかる JavaScript 初心者講座(Udemy)

この記事は役に立ちましたか?

⭐をクリックして評価してね!

Average 4.7 / 5. 投票数: 6

おめでとう!あなたがこの記事の最初の評価者です

役に立たなくて申し訳ありません…!

この記事の改善点を教えていただけますか?

SNSでもご購読できます。