ソース内に同じmin.jsファイルを複数箇所で記載した場合、何か不具合が生じますでしょうか。

Question

お世話になっております。jQueryについて質問させていただきます。

jQueryの素人です。

動的に動かすために、jQueryをソースの中に埋め込んでいるのですが、同じmin.jsファイルをbodyの中で2回記述していることになっていました。

1つ目は、body直下に、scriptタグの中に、min.jsファイルを、
2つ目は、body > main > div > div > div > span のタグの下の、scriptタグの中に、min.jsファイルを、

を記述してます。
これが原因かわかりませんが、1つ目のmin.jsを追記することで動く処理が動いていません。

こういう書き方をすると、何か不具合があるものなのでしょうか。
不具合がある場合、どちらかのmin.jsファイルを消せば済むようなものなのでしょうか。

2つ目のmin.jsについては、外注業者が作成した部分のため、変更した後の影響がよくわかりません。

あまり的を得た質問の書き方ではないかもしれませんが、ご回答よろしくお願いいたします。

Accepted Answer

ECマスターズの田中です。

> jquery.min.js が記述されている、ということを確認すればいいだけでしょうか？

はい、記述されていることだけをご確認いただければ結構です。

表示に不具合が出た場合や、万全を期す場合は
Chromeのデベロッパーツール、Consoleタブにて
赤文字のエラーが発生していないかご確認をお願いします。
https://www.javadrive.jp/javascript/console/index1.html

Answer

ECマスターズの田中です。

> こういう書き方をすると、何か不具合があるものなのでしょうか。

2つ目のjquery.min.jsを読み込んだ時点で
1つ目のjquery.min.jsが上書きされてしまい、
1つ目のjquery.min.jsで読み込んだjQuery上で設定した
ページ読込完了時の動作やjQueryプラグインが
無かったことにされてしまいます。

回避方法としては、
jQuery.noConflict() を利用する、
1つ目のjquery.min.jsで読み込んだjQueryを別の変数で扱う、
など様々な方法がございますが、
2つ目のjquery.min.jsを削除していただく方法が
一番わかりやすいかと思います。

削除される前に、
削除箇所を読み込んでいるすべてのHTMLページにて、
確実に先にjquery.min.jsを読み込んでいることを
予めご確認いただきますようお願いします。

Answer

ECマスターズ　田中 様

ご回答ありがとうございます。

2つ目のjquery.min.jsを削除する、ということは、もともと2つ目のjquery.min.jsを参照していた処理には影響ないのでしょうか。

その確認がおそらく、

>削除される前に、
>削除箇所を読み込んでいるすべてのHTMLページにて、
>確実に先にjquery.min.jsを読み込んでいることを
>予めご確認いただきますようお願いします。

とご回答いただいた部分になるのだと思いますが、読み込んでいることの確認は、具体的にどうすればよいのでしょうか…。

お手数おかけしますが、ご回答よろしくお願いいたします。

Answer

ECマスターズの田中です。

> 2つ目のjquery.min.jsを削除する、ということは、もともと2つ目のjquery.min.jsを参照していた処理には影響ないのでしょうか。

バージョンの大きな違いなどの特殊なケースが無い限り、
1つ目のjquery.min.jsを参照するようになりますので
影響はございません。

> 読み込んでいることの確認は、具体的にどうすればよいのでしょうか…。

ご利用中のCMS（Wordpressなど）で、
サイト内全てのページで読み込んでいるパーツ（ヘッダーなど）の中で
1つ目のjquery.min.jsが読み込まれていることをご確認いただければ結構です。

読み込まれていない場合、もしくは
CMSを利用せずに個別にページを作成されている場合は、
原則として各ページを個別にご確認いただく必要がございます。
複数ファイルに対して一括で検索をかけられるフリーソフトなどもご活用いただければ幸いです。

Answer

ECマスターズ　田中 様

ご回答いただきありがとうございます。
私の質問の仕方がまずく、もう一度質問させてください。

> 読み込んでいることの確認は、具体的にどうすればよいのでしょうか…。

この確認方法は、
①jquery.min.js が記述されている、ということを確認すればいいだけでしょうか？
②それとも、chromeの検証機能などを使って、何か確認できるのでしょうか。
③それとも、①②以外の方法があるのでしょうか。

上記、ご回答よろしくお願いいたします。

Answer

ECマスターズ　田中 様

ご回答いただきありがとうございます。

目視確認と、ディベロッパーツールのConsoleタブの赤字エラー
とのこと、承知しました。

本件これにてcloseとさせていただきます。
ご対応ありがとうございました。