jQueryの多重読み込み

▼

2022-02-25 (金) 08:52 ✎

久しぶりに「JQuery」に目が向いた。JQueryはJavaScriptのライブラリである。
WikiPediaによれば最新版のV3.6.0が2021年3月12日に公開されている。毎年の春頃には新版が公開れている様子なので、そろそろ出ないものかと期待している。

jQuery 3.6.0 Released! | Official jQuery Blog

このブログのテンプレート[ct_responsive3c]では、配布版ではJQuery①v3.5.1の使用を宣言しているが、俺はlivedoorブログ共々②v3.6.0に変更している。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

俺が利用しているlivedoorブログでJavaScript(JQuery)を利用しているのは「上下スクロールボタン」である。他で利用しているのはプラグインであり、それぞれが独自に組み込んでいる模様で前記のJQueryの利用宣言スクリプトは不要である。
なお、ネット検索ではJQueryを使わない「上下スクロールボタン」の設置方法が解説されている。
過去記事:JQueryをUpdate / HTML独習サンプル / 関連記事リストを表示 / livedoorブログのjQuery / 上に戻る・下に進むボタン / コメント欄の表示変更 / 「ページのトップに戻る」ボタン設置 / FC2ブログに引越し再考

このテンプレート[ct_responsive3c]でも「上下スクロールボタン」が設置されているが、俺的にはJQueryの利用目的は理解していない。

そんな状況の中で、「jQueryの多重読み込み」なる記事を発見した。

Core Web Vitalsの改善を妨げる「jQueryの多重読み込み」にご用心
WordPressをはじめとするCMSを高速に動作させる仮想マシン「KUSANAGI」。その企画開発チームがその経験で得たWebに関わる知見を様々な角度からお伝えする。連載の第5回目はサイトのレンダリングに影響を与えるjQueryの多重読み込みについて解説する。

利用するプラグインごとに異なるバージョンのjQueryの呼び出しを記載している　導入時期や、プラグインの仕様によって、依存するjQueryのバージョンが異なるため、複数のバージョンのjQueryを利用せざるを得ないような場合で、一番対応が難しいケースです。
「WEXAL」を使ってみよう
WEXAL公式サイト
プライム・ストラテジーのサービス

定番「jQuery」はもう古い、イマドキのモダンWebを理解する | 日経クロステック（xTECH）

前述のとおり本ブログでは、JQuery v3.6.0の使用を宣言している。しかし、複数利用している各々のプラグインが利用している版が判らない。したがって、「jQueryの多重読み込み」をしている事は間違いないだろう。これについて以前より気掛かりであったが、この際だから調べたい。

各サイトごとに利用している「jQueryの版」は以下により知ることができる。

見ているページの jQuery のバージョンを確認する方法 (ブックマークレット) - 地潜の日記
[jQuery] jQueryのバージョンを取得する（$.fn.jquery） | コピペで使える JavaScript逆引きリファレンス

ならば、複数利用している各々のプラグインが利用している版を調べるために、プラグインを個別に利用している環境で上記の「jQueryの版」をチェックすれば判るのではなかろうかと考えた。他に方法を思いつかないから、原始的かもしれないが．．．

なお、FC2ブログで共有として提供されているプラグインでは2012年以前の物が多い(2012年のjQueryは2012年8月9日のv1.8)。最近のプラグインでは「javascriptを使わずに作った」物が1つ(開閉式カテゴリ一覧)ある。

jQueryファイルの読み込み方法(CDNや直接ダウンロード)
jQueryのバージョンによる差異
 常に最新のバージョンを取得するには、以下のようにバージョンを省略すれば可能

❓<script type="text/javascript">

JavaScript の古い書き方 - とほほのWWW入門
2014年に勧告された HTML5 では、type 属性も Content-Script-Type の指定も不要となり、指定しない場合は規定値として JavaScript が実行されることになりました。現在では、language 属性も、type 属性も、Content-Script-Type の記述も不要です。
HTML５に関して　いらないtype属性は消す - megmin’s blog
HTML5 では、script 要素、style 要素に対する、type 属性は不要。
script 要素の場合、type 属性のデフォルト値として「text/javascript」が、style 要素の場合は「text/css」がセットされる。下記のようなソースは、
    
    <link type="text/css" rel="stylesheet" href="css/styles.css" />
    <script type="text/javascript" href="js/scripts" /></script>
下記のように書くことができる。
    <link rel="stylesheet" href="css/styles.css" />
    <script href="js/scripts" /></script>

<script type="text/javascript">記述のある、利用中のブラグイン

カテゴリ　※jQueryを使っていない「開閉式カテゴリ一覧」に変更した
カレンダ　※HTML5に改造した
最新コメント+TB　※HTML5に改造した
検索+タグクラウド　※HTML5に改造した
ブログ内　検索　※HTML5に改造した
名言黒板　※HTML5に改造した
ことわざ　※HTML5に改造した
22/03/1１、その他の全てをHTML5に改造した．．つもり

関連記事:アクセス解析用タグ改変 / jQueryの多重読み込み

♻️続きを見る

YouTubeの埋め込みを高速化する Lite YouTube Embed - *Essence

報告します。

>FC2アクセス解析用HTMLタグのその書式は構文エラーなんですよ | Webテク倉庫
https://oops0011.blog.fc2.com/blog-entry-608.html

にヒントを得まして、利用しているプラグインでのjQueryに関するHTML記述をHTML5見合いに変更作業をしました。(https://nono634.blog.fc2.com/blog-entry-6004.html)
そして、その改変記録を自ブログ内に記録しようとして書きましたところ、1部のプラグインで不具合が発生する事が判りました。
恐縮ですがそのプラグインは、「Comments+Trackback」(https://admin.blog.fc2.com/control.php?mode=plugin&process=download&no=31111&mob=)です。

色々と弄った結果、「記録しようとしたjQueryに関する書き込み」と、「プラグイン内部でのjQueryに関する書き込み」内容が重複している為に発生した不具合ではないかと推測しました。したがって、「記録しようとしたjQueryに関する書き込み」記事を除去すれば不具合は発生しません。また、同じような作業をした中では「Comments+Trackback」以外は本件不具合は発生していません。
----------------------------------------------------
ということで、本件はそんなものかしらん．．．と思う事にしましたが、「wash_ashore」「Generic」などでは不具合が発生しない事がわかりました。ちなみに、「home_resp3c」「sunny_resp2c-r」でも同様の不具合でした。
正常な表示
https://f.hatena.ne.jp/nonn888/20220309110249
不具合な表示
https://f.hatena.ne.jp/nonn888/20220309110247
「wash_ashore」での表示
https://f.hatena.ne.jp/nonn888/20220309110245
----------------------------------------------------
その後弄ってみた結果、本件はjQueryに関する事が原因ではなく、「Comments+Trackback」に記述されたFC2ブログのタグのいずれかがトリガーになっているのだろうと踏んでいます。

以上、報告します。

関連記事