【JavaScript】Uncaught TypeError: $(…).fadeIn is not a functionの解決方法

こんにちは、シロウです。

最近、PHP/Laravelを勉強していて、デザインもしっかり作り込みたいと思い、JavaScripi/jqueryの勉強もしているのですが、そんな時にエラーが発生しました。

design_view.js:8 Uncaught TypeError: $(...).fadeIn is not a function
    at HTMLButtonElement.<anonymous> (design_view.js:8)
    at HTMLButtonElement.dispatch (jquery-3.3.1.slim.min.js:2)
    at HTMLButtonElement.v.handle (jquery-3.3.1.slim.min.js:2)

こんな感じのエラーが発生して、フェードインが実装できないって状態になってしまい、「なんでだーーーー」って2時間ぐらい迷走しました。

その日は諦めて別のことを勉強して、次の日にやると秒速で解決できたので、メモ程度に残しておきます。

解決方法

エラーを解消する方法はとっても単純で「.slimの拡張子」を消してあげればいいだけでした。

僕の場合は下記のように、jqueryを読み込んでいたので、

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>

この.slimを外して、下記のようにしてあげることでエラーが解消しました。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

たったこれだけかよーーーってなりました。はい。笑

.slimとは何なのか？

エラーを解消できたのでまぁよかったのですが、こういうのはとことん調べないと気が治らない質（たち）なので、.slimについて調べてみました。

わかったことは以下の通りです。

• .slimは軽量のjquery
• 軽量の代わりに使えないメソッドがある

ってな感じです。

つまり、その使えないメソッドの中に今回のfadeInが含まれていたって話でした(*´ω｀*)ﾉ

なぜ、slim版を読み込んでいたのか？

最後に「どうして通常版ではなくて、slim版を読み込んでしまったのかなー」と思ったので調べてみるとどうやらBoostrapが原因でした。

Boostrapを使うためには下記のコードを記述してねーと公式サイトには書かれています。

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

もうお分かりの通り、こちらで.slim拡張子を含んだjqueryを読み込んでしまっていたわけです。

シロウ

NFT・仮想通貨投資家 / エンジニア

TwitterInstagramYouTubeLINEContact

仮想通貨・NFTに400万以上投資しています。

本業エンジニア・副業ブロガー。

ブログ最高月80万円。累計200万以上。