Uncaught ReferenceError: $ is not defined atのエラーをどう修正すればよい？

Question

javascriptでこのようなコードを書きました。

$(document).ready(function () {
  $(document).on("click", "input[type='file']", function () {
      var id = $(this).attr("id");
      $("#" + id + " + label").css("background-image", "");
      $(this).val("");
  });
  $(document).on("change", "input[type='file']", function () {
      var id = $(this).attr("id");
      $("#" + id + " + label").css("background-image", "");
      var files = !!this.files ? this.files : [];
      if (!files.length || !window.FileReader) {
          return;
      }

      if (/^image/.test(files[0].type.toLowerCase())) {
          var reader = new FileReader();
          reader.readAsDataURL(files[0]);
          reader.onloadend = function () {
              $("#" + id + " + label").css("background-image", "url(" + this.result + ")");
          };
      }
  });
});

実行した際にこのようなエラーが出ました。

Uncaught ReferenceError: $ is not defined at main.js:147:1

サイトで調べたりしたのですが、うまくいきません。
アドバイスをいただけると嬉しいです。

Comments

[m.ts10806]

https://www.google.com/search?q=+%24+is+not+defined+

出ますよ。

[m.ts10806]

ただ、JavaScriptのコードだけ提示されてもそこに問題はありません。
定義されていない変数、オブジェクトを利用しようとして出るものなので。

Answer 1

先にjQuery本体を読み込んでください

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

Answer 2

解決方法

質問にご提示のコードが外部ファイル読み込みなのか、htmlに直接かかれているのか分かりませんが、いずれにしても、そのコードより先にjQueryを読み込む記述を書いてください。
htmlファイルに以下のように記述します。

<!-- jQuery読み込み -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<script>
  // 質問に書かれているコード
</script>

または

<!-- jQuery読み込み -->
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>

<!-- 質問に書かれているコードが書かれたファイル読み込み -->
<script scr="script.js"></script>

解説

jQueryとは

まず、JavaScriptとjQueryは別物です。

• JavaScriptはプログラミング言語ですが、
• jQueryはJavaScriptのライブラリと呼ばれるものです。

jQueryは簡単にいうと、JavaScriptをもっと簡単に便利に書くためのツールです。

jQueryがどうやって動いているのか

ブラウザはJavaScriptを理解する機能が標準搭載されていますが、jQueryは理解できません。
では、どのように動いているかざっくりいうと、

jQueryで書いたコード　→　JavaScriptに翻訳　→　ブラウザが理解できる！

で、例えば人間が何かしらない外国語を理解する時に必要なものって、文法書や辞書ですよね？
jQueryファイルとはそういった文法書や辞書のようなものに当てはまります。
ですのでjQueryファイルを読み込む必要があります。

jQueryファイルを先に読み込ませる理由

プログラムは基本的に上から順番に読み込まれ処理して、次の行に移ります。

1. 先に、文法書や辞書を提供して学習させてから、
2. 次に、翻訳させる文章を渡す

という順番じゃないとブラウザが理解できないので、実際のコードより先にjQueryファイルを読み込ませるわけです。

厳密には違うかもしれませんがざっくりとしたイメージ解説でした。