laravelでjQueryを使う方法

開発環境

laravel　8.83.11
php　　　7.4.29

記事を載せた経緯

techpitというプログラミング学習サービスのlaravel講座の中の Tinder風マッチングアプリを作ってみよう！という世界のアオキさんの講座を受講していたのですが、最終章の8-5の チャット機能の実装ができなくてく困っていたところ、原因はjQueryが使えていないことだった ので、jquryを導入する方法を記載します。
＊なお私は省きましたが、5-3章の画像をスワイプできるようにする為に導入するJtinderというやつもjqueryが機能していないとできないと思います。
参考サイトは以下の通りです。
Laravelでjavascript、jQueryを使う方法
Laravel8×DockerにjQueryを導入する方法

jQuryの導入方法

手順１（jQueryの）インストール

プロジェクトがあるフォルダに移動してそこのターミナルまたはコマンドプロンプトで

npm install jquery --save

と入力します。
これでjQueryが使えるようになります😍

手順（webpack.mix.js の編集）

次に、webpack.mix.jsを編集します。webpack.mix.jsを開いてjqueryに変換したいファイルのパスを追加します。ここでは上から2行目のchat.jsがそれにあたります。

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    js( 'resources/js/chat.js', 'public/js' ) //追加

    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

このchat.jsがただのjsファイルにもかかわらずjQueryの書き方をしていたため、ファイルが正しく読み込まれていませんでした。😂

手順３（webpack.mix.js の編集　続き）

次に.autoloadを追加します。以下をを追加した後ターミナルで　npm run devを実行してください

webpack.mix.js

mix.js('resources/js/app.js', 'public/js')
    js( 'resources/js/chat.js', 'public/js' ) //追加
.autoload( { //追加ここから
    "jquery": [ '$', 'window.jQuery' ],
} )//追加ここまで
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps();

npm run dev

npm run devをすることにより'public/js/app.js'に記載した内容が読み込まれます

手順４（viewファイルへ記載）

最後にjQueryを読み込みたいviewファイルに、先ほど追加したファイルを読み込みます。
私の場合はchat.blade.phpというファイに読み込みます。

chat.blade.php

<script src="{{ asset('js/app.js') }}"></script>

豆知識
{{ asset('js/app.js') }}この書き方の意味を説明すると、まずasset()とはpublicフォルダを指していて、その中のjsフォルダの中のapp.jsファイルを読み込んでいるという意味です

先ほどwebpack.mix.jsに追加したファイルはnpm run dev実行後は,publicフォルダのjsフォルダの中のapp.jsに書き込まれるため、このようになっています。