Visual StudioからjQueryを使おうとするとUncaught ReferenceError: $ is not definedになる場合の確認ポイント

 Visual Studio 2019等でASP.NET MVCプロジェクトを作成すると、デフォルトでjQueryやBootstrapなどが含まれたプロジェクトが作成され、jQueryを最初から使うことができます。

ところが、実際jQueryのコードを追加してみると、

Uncaught ReferenceError: $ is not defined

なるエラーが表示され、jQueryが動作しません。

その際の確認ポイントをまとめておきます。

「Uncaught ReferenceError: $ is not defined」発生理由

本エラーの発生原因はjQueryの本体ソースを読み込む前に「$」などのjQueryのオブジェクトを参照しようとしているためです。

Visual Studioのデフォルトのソースコードをそのまま使っている場合、jQueryは

_layout.cshtml

の末尾

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; @DateTime.Now.Year - マイ ASP.NET アプリケーション</p>
        </footer>
    </div>

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)
</body>

「@Scripts.Render("~/bundles/jquery")」で読み込まれます。

一方、htmlやscpriptタグでかこまれたスクリプト部分はその前の、

@RenderBody()

部分に挿入されるため、単純にindex.cshtmlに

<script>
    $(function () {
        window.alert('test');
    });
</script>

等とやると、jQueryが読み込まれる前に「$」を参照してしまうので、エラーとなるわけです。

単純な回避策

単純な回避策としては「@Scripts.Render("~/bundles/jquery")」をheadタグ内に入れてしまえばエラーは発生しなくなります。

ただ、一般的にjquery等の読み込みはページ表示速度などの理由でbodyタグの末尾に置いたほうが良いと言われています。

正攻法の回避策

正攻法の回避策としては、jQuery等のscriptは別のjsファイルに書き出し、App_StartフォルダのBundleConfig.csでバンドルし、jQueryより後で読み込むように配置するということになります。

ただテスト用アプリなどでそこまでするのもめんどくさいという場合、

のように、@section scripts{}で囲む手もあります。

デフォルトで_Layout.cshtmlには

@RenderSection("scripts", required: false)

がjQuery読み込みより後に宣言されているので、@section scripts{}で囲まれた部分はjQueryより後で読み込まれるので、エラーになりません。

以上、Visual StudioからjQueryを使おうとするとUncaught ReferenceError: $ is not definedになる場合の確認ポイントでした。