スワイプ機能の実装時にjQueryのファイルが上手く読み込まれないようです。

あるマッチングアプリ作成教材でのスワイプ機能をjQueryで実装しているのですが、エラーが出てしまいスワイプできません。
エラー文としては下の画像の通りになります。

インターネットで検索しQiita記事などを参考に手を加えてみたのですが解決できませんでした。
教材の製作者にも質問しているのですが、忙しいのかなかなか返答がありません。
この問題でかなり時間を取られているのでどうかアドバイスをいただけたらと思います。
参考にした記事を以下に添付させていただきます。

qiita.com/knjname/items/b8ca62c12238ade9c263

jQueryで $ is not define エラーが出たときの一番簡単な解決法

検証ツールコンソール

よろしくお願い致します。

行動規範の内容に同意します

回答1件

ベストアンサー

jQueryはheaderとfooterどちらで読み込んでおられますか？
footerで読み込んでいる場合はheaderへ移動してみてください。
$の記述を使う前に、jQueryを読み込んでおく必要があります。
※画像のscriptより先にjQueryを読み込んでください。

投稿2021/03/05 10:11

編集2021/03/05 10:13

退会済みユーザー

総合スコア0

konanmasa

2021/03/06 01:56

お返事有り難うございます。 Railsの環境でjavascriptはヘッダーで読み込んでいます。 ```erb:application.html.erb <!DOCTYPE html> <html> <head> <title>TechpitMatch</title> <meta name="viewport" content="width=device-width,initial-scale=1"> <%= csrf_meta_tags %> <%= csp_meta_tag %> <meta name="viewport" content="width=device-width, initial-scale=1"> <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %> <%= stylesheet_pack_tag 'application', 'data-turbolinks-track': 'reload' %> <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %> </head> <body> <%= yield %> </body> </html> ``` jQueryはwebpackを導入して読み込んでいるのだと思います。 ```JavaScript:package.json { "name": "techpit-match", "private": true, "dependencies": { "@fortawesome/fontawesome-free": "^5.15.2", "@rails/actioncable": "^6.0.0", "@rails/activestorage": "^6.0.0", "@rails/ujs": "^6.0.0", "@rails/webpacker": "5.2.1", "bootstrap": "^4.6.0", "hammerjs": "^2.0.8", "jquery": "^3.5.1", "popper.js": "^1.16.1", "turbolinks": "^5.2.0" }, "version": "0.1.0", "devDependencies": { "webpack-dev-server": "^3.11.2" } } ``` よろしくお願い致します。

退会済みユーザー

2021/03/06 02:11 編集

>Railsの環境でjavascriptはヘッダーで読み込んでいます。この後出しはちょっときついです。PHPメインなので。タグにRailsを足していただけますでしょうか？ Railsで同じ状況になった人に見つけてもらいたいところですが… とりあえず平凡なPHPerからお願いしたいことは１つです。 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> jQuery単体をheaderで読み込んで動作するかどうかご確認いただけますか？

konanmasa

2021/03/06 05:26

すみませんでした。再度スレ立てさせていただきます。

行動規範の内容に同意します