🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1045閲覧

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

konanmasa

総合スコア3

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/03/05 08:17

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

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

qiita.com/knjname/items/b8ca62c12238ade9c263

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

検証ツールコンソール

イメージ説明

イメージ説明

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

jQueryheaderfooterどちらで読み込んでおられますか?
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からお願いしたいことは1つです。 <script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js”></script> jQuery単体をheaderで読み込んで動作するかどうかご確認いただけますか?
konanmasa

2021/03/06 05:26

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問