【簡単】サイトで使用中のjQueryバージョンを確認する方法3つ。オススメはChromeプラグインWappalyzer!

jQueryバージョン確認方法_008
ページで読み込まれているjQueryのバージョンを確認する方法3つです。
人気CMS、WordPressでjQueryのバージョンを確認するのにもお勧め!

自分のサイトで使っているバージョンは何なのか?
最新のバージョンが最速なので、もし古いバージョンの場合はアップデートできればサイトが少し高速化するはずです。

WordPressの場合はテーマによって読み込むjQueryのバージョンが異なるので、確認しておくと良いです。

おすすめはChromeの拡張機能を使う方法3です。
jQueryだけでなくサイトを構成しているソフトを一覧で確認できます。

jQueryのバージョンを確認する方法3つ

はじめに補足として各バージョンの最新バージョンの確認です。

【2021.5.10時点】
jQuery3.x(3系):3.6.0
jQuery2.x(2系):2.2.4
jQuery1.x(1系):1.12.4

理由がない限り、このどれかが読み込まれているはずです。

WordPress5.7の場合、jQueryのバージョンは3.5.1が読み込まれます。
(不具合を減らすためのWordpress版jQueryといった感じです。)

方法1.ブラウザの開発者ツールで確認する

Chromeを使っていますが、Edgeでもほぼ同様の手順で行えます。

jQueryバージョン確認方法_001

Chromeでサイト画面を右クリック > 検証

jQueryを調べたいサイトにアクセスし、画面が表示されたら

1.画面上で右リック > メニューから「検証」を押す。
キーボードのCtrl+Shift+IでもOK!
jQueryバージョン確認方法_002

開発者ツールでjQueryを検索する

2.タブを「Elements」から「Network」に切り替える。
3.検索窓に「jQuery」と打ち込む。
4.検索結果のjQueryファイルを確認。

jQueryバージョン確認方法_003「?ver=」が付いていれば分かりやすいですが、ファイル名をクリックすればプログラム内のコメントとしてバージョンが記述されています。

注意ポイント

読み込まれているだけで、使用されているとは限らないため注意。

方法2.コマンドを使用して確認する

方法1では本当にそのバージョンのjQueryが実行されているか不安が残ります。

そこで開発者ツールのコンソールにコマンドを打ち込む方法を使います。
jQueryに命令を実行させた結果なので確実です。

jQueryバージョン確認方法_004

1.ブラウザの開発者ツールを立ち上げる
2.「Console」タブに移動する。
3.コマンドを実行する。(コピペOK)

コンソールタブで「>」が表示されているところに以下のコマンドを入力します。

どちらも同じことをしています。
WordPressを使っている場合はコマンド2を使ってください。

jQueryバージョン確認コマンド1

$.fn.jquery

jQueryバージョン確認方法_005「Uncaught TypeError: Cannot read property 'fn' of undefined at~」とエラーが出てしまう場合は次のコマンドを使ってください。

jQueryバージョン確認コマンド2

jQuery.fn.jquery

jQueryバージョン確認方法_006WordPressではコンフリクトを起こすので「$」を「jQuery」に変更したものを使用すればうまくいきます。

方法3.Chromeの拡張機能Wappalyzerを使う

Chromeブラウザにインストールできる拡張機能を使えば、jQueryのバージョンだけでなくサイト環境を簡単に確認できますのでオススメです。

「Wappalyzer」という拡張機能(プラグイン)を使用します。
実行画面は少し下の方にあるので確認してください。良いです!

1.Chromeウェブストアにアクセス。
2.「Chromeに追加」をクリック。
3.確認画面で「拡張機能を追加」をクリック。

Wappalyzerの使い方

使い方は簡単で、サイトを表示(リロード)するだけで情報を取得してくれます。

ポイント

・取得する情報は初回アクセス時の情報のため、何かを変更した後に確認したい場合は後述するWappalyzerのキャッシュ削除を行うこと。

・ページ内の全ての情報を取得させるため、ページの最後までスクロールする。

プラグインをインストールしたらjQueryのバージョンなどを調べたいサイトをChromeで開き、ページの最後までスクロール。
するとWappalyzerのアイコン上に数字が溜まっていきます。

jQueryバージョン確認方法_008

Wappalyzerの実行画面(当サイト)

アイコンをクリックすると読み込まれたソフトウェアやサーバー環境などが一覧で確認できます。すごいすごい!

広告がある場合はそのアドネットワークの情報も表示されたりします。

アイコンをメニューに表示する

jQueryバージョン確認方法_009

拡張機能の固定

URLが表示されているところの右側のメニューにプラグインのアイコンが表示されていない場合は、アイコンを「固定」にすれば表示されるようになります。
(他のアイコンとドラッグで入れ替えることが可能。)

Wappalyzerのキャッシュを削除する

Wappalyzerで表示する情報はアクセス時点のもので、jQueryのバージョンを変更した場合など、サーバーやソフトウェアが変更された場合にはWappalyzerのキャッシュを一度削除しないと情報が反映されません。
そのやり方です。

jQueryバージョン確認方法_010画面の「オプション」をクリックします。
するとプラグインの設定画面が別タブで開きます。

jQueryバージョン確認方法_011

プラグインの設定ページでキャッシュクリアする

画面が開いたら「Clear cached detections」をクリック。

プラグインのキャッシュがクリアされ、アイコン上の数字が無くなりますので再度ページを最後まで読み込めばOKです。

まとめ

WebサイトのjQueryのバージョンを確認する方法を3つまとめてみました。

シンプルですぐにバージョン確認できるのはコマンドを使う方法2。
jQuery以外にもサイト環境を確認したい時はWappalyzerを使う方法3が良いです。
jQueryバージョン確認方法_012余談ですが、サイトのソースコードと睨めっこしても分かりますね(笑)

-サイト構築

© 2021 ソロ学