ページで読み込まれているjQueryのバージョンを確認する方法３つです。
人気CMS、WordpressでjQueryのバージョンを確認するのにもお勧め！
自分のサイトで使っているバージョンは何なのか？
最新のバージョンが最速なので、もし古いバージョンの場合はアップデートできればサイトが少し高速化するはずです。
Wordpressの場合はテーマによって読み込むjQueryのバージョンが異なるので、確認しておくと良いです。
おすすめはChromeの拡張機能を使う方法３です。
jQueryだけでなくサイトを構成しているソフトを一覧で確認できます。
この記事の目次
jQueryのバージョンを確認する方法３つ
はじめに補足として各バージョンの最新バージョンの確認です。
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といった感じです。）
方法１．ブラウザの開発者ツールで確認する
Chromeを使っていますが、Edgeでもほぼ同様の手順で行えます。
Chromeでサイト画面を右クリック ＞ 検証
jQueryを調べたいサイトにChromeでアクセスします。
開発者ツールでjQueryを検索する
サイトが表示されたら以下の手順でjQueryの読み込み部分を検索します。
- 画面上で右リック ＞ メニューから「検証」を押す。
- タブを「Elements」から「Network」に切り替える。
- 検索窓に「jQuery」と打ち込む。
- 検索結果のjQueryファイルを確認。
「?ver=」が付いていれば分かりやすいですが、ファイル名をクリックすればプログラム内のコメントとしてバージョンが記述されています。
注意ポイント
読み込まれているだけで、使用されているとは限らないため注意。
方法２．コマンドを使用して確認する
方法１では本当にそのバージョンのjQueryが実行されているか不安が残ります。
そこで開発者ツールのコンソールにコマンドを打ち込む方法を使います。
jQueryに命令を実行させた結果なので確実です。
- ブラウザの開発者ツールを立ち上げる。
- 「Console」タブに移動する。
- コマンドを実行する。(コピペOK)
コンソールタブで「>」が表示されているところに以下のコマンドを入力します。
どちらも同じことをしています。
Wordpressを使っている場合はコマンド２を使ってください。
jQueryバージョン確認コマンド１
$.fn.jquery
「Uncaught TypeError: Cannot read property 'fn' of undefined at～」とエラーが出てしまう場合は次のコマンドを使ってください。
jQueryバージョン確認コマンド２
jQuery.fn.jquery
Wordpressではコンフリクトを起こすので「$」を「jQuery」に変更したものを使用すればうまくいきます。
方法３．Chromeの拡張機能Wappalyzerを使う
Chromeブラウザにインストールできる拡張機能を使えば、jQueryのバージョンだけでなくサイト環境を簡単に確認できますのでオススメです。
「Wappalyzer」という拡張機能（プラグイン）を使用します。
実行画面は少し下の方にあるので確認してください。良いです！
- Chromeウェブストアにアクセス。
- 「Chromeに追加」をクリック。
- 確認画面で「拡張機能を追加」をクリック。
Wappalyzerの使い方
使い方は簡単で、サイトを表示（リロード）するだけで情報を取得してくれます。
ポイント
- 取得する情報は初回アクセス時の情報のため、何かを変更した後に確認したい場合は後述するWappalyzerのキャッシュ削除を行うこと。
- ページ内の全ての情報を取得させるため、ページの最後までスクロールする。
プラグインをインストールしたらjQueryのバージョンなどを調べたいサイトをChromeで開き、ページの最後までスクロール。
するとWappalyzerのアイコン上に数字が溜まっていきます。
Wappalyzerの実行画面（当サイト）
アイコンをクリックすると読み込まれたソフトウェアやサーバー環境などが一覧で確認できます。すごいすごい！
広告がある場合はそのアドネットワークの情報も表示されたりします。
アイコンをメニューに表示する
拡張機能の固定
URLが表示されているところの右側のメニューにプラグインのアイコンが表示されていない場合は、アイコンを「固定」にすれば表示されるようになります。
（他のアイコンとドラッグで入れ替えることが可能。）
Wappalyzerのキャッシュを削除する
Wappalyzerで表示する情報はアクセス時点のもので、jQueryのバージョンを変更した場合など、サーバーやソフトウェアが変更された場合にはWappalyzerのキャッシュを一度削除しないと情報が反映されません。
そのやり方です。
画面の「オプション」をクリックします。
するとプラグインの設定画面が別タブで開きます。
プラグインの設定ページでキャッシュクリアする
画面が開いたら「Clear cached detections」をクリック。
プラグインのキャッシュがクリアされ、アイコン上の数字が無くなりますので再度ページを最後まで読み込めばOKです。
まとめ
WebサイトのjQueryのバージョンを確認する方法を３つまとめてみました。
シンプルですぐにバージョン確認できるのはコマンドを使う方法２。
jQuery以外にもサイト環境を確認したい時はWappalyzerを使う方法３が良いです。
余談ですが、サイトのソースコードと睨めっこしても分かりますね（笑）
