Google Chromeの拡張機能を作るために久しぶりにjQueryのAjax通信処理を書いたので、その時に苦戦したことをメモしておきます。使ったのはjQuery 3.1 slim minifiedでした。
jQuery 1.8からajaxの書き方が少し変わって、以下のように書くのがスタンダードになりました。
|
1 2 3 4 5 6 7 8 |
$.ajax({ url: 'https://github.com/tomotomo.keys', dataType: 'text' }).done(function (data) { console.log(data); }).fail(function (hoge, status) { console.error(status); }); |
詳しくは、こちらの記事で書かれています。ノンプラグラマでも書き方の違いはわかるので、読んでみてください。
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)
