JQuery エラー表示 $ is not defined; please fix or add /* global $*/

Question

前提

JQuery初心者です。JQueryを用いて画像などがふわっと右から現れるような実装を作りたいと思っておりますが、思った挙動になりません。というかおそらくJQueryが読み込めていない？のかなと思っております。＄を使う行全てにおいて$ is not defined; please fix or add /* global $*/が出てしまいます。
以下のサイトから引っぱってきております。何か御助言をいただけますと幸いです。
https://www.jsdelivr.com/package/npm/jquery

.
.
.
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery-waypoints@2.0.5/waypoints.min.js"></script>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
</body>
</html>

$(function(){
    
    $(function() {
  //画面をスクロールするとイベントが発動する
  $(window).scroll(function() {
    //フェードインさせたい要素の位置をずらす
    $('.fadein').css({
      'opacity': '0',
      'transform': 'translateX(30px)'
    });
    
    //スクロールバーの位置を取得
    var scroll = $(window).scrollTop();

    //ウィンドウの高さを取得
    var windowHeight = $(window).height();

    $('.fadein').each(function() {
      //フェードインさせたい要素の縦位置を取得
      var elemPos = $(this).offset().top;

      //要素がウィンドウの中に入ってからさらに100pxスクロールしたら要素をフェードインする
      if (scroll > elemPos - windowHeight + 100) {
        $(this).css({
          'opacity': '1',
          'transform': 'translateX(0)'
        });
      }
    });
  });
});

});

Answer 1

提示のコードがjQuery読み込みより前に書かれているからでしょう。

現象再現する最小構成のコード

<script>
console.log($("body"))
</script>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>

jQuery本体は定義の羅列なので、機能を使う場合は最初に読み込ませる必要があります。

蛇足：
$(function(){が重なってるのは意味がないような。

Comments

[tatacons331]

とても助かりました。まだまだ基礎がなっていないことが分かりました。ありがとうございました。

[m.ts10806]

解決されたようで何よりです。
>まだまだ基礎がなっていないことが分かりました
jQueryも少しずつ廃れていく運命ですし、これを機に普通にJavaScriptを学んでいった方が良いように思います。

あと、
受付中のままになっていますが、解決したのでしたらベストアンサーを選び解決済みにしてください。
https://teratail.com/help/question-tips#questionTips4