LoginSignup
0
3

More than 1 year has passed since last update.

開発環境

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の導入方法

手順1(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の書き方をしていたため、ファイルが正しく読み込まれていませんでした。😂

手順3(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'に記載した内容が読み込まれます

手順4(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に書き込まれるため、このようになっています。

0
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
3