JavaScript

ブラウザのコンソールで主要JavaScriptライブラリのバージョンを確認する方法

きっかけ

これまで様々な Web サイトや Web アプリケーションを制作・開発してきたなかで、機能改修を行う際にバージョンを確認したい時があったため、まとめることにした。
また、どんなライブラリー/バージョンで動作しているのか興味本位で知りたい時に、Developer Tools の Console で簡単に知れたら良いなと思ったため。

本記事ではライブラリーのバージョン確認に重きを置いている。「どんなライブラリーがロードされているか」を知る方法には、Developer Tools の Elements タブやソースを表示する等で推察してほしい。

各ライブラリーのバージョンを確認する

jQuery

まだまだ無数のWebサイトの制作・運用の前線で活躍するjQueryのバージョン確認方法。

$.fn.jquery
// "1.11.3", "3.2.1", ...

余談になるが、jQueryの公式サイトでも1.x系で運用されていることにビックリしている。

AngularJS

公式ドキュメントの API Reference に記述がある。

angular.version.full
// "1.4.7", "1.5.11", ...

Angular

Angularは、初期化時に<body>配下に出来るAppComponent(一般的には<app-root>要素)に対してng-version属性が付与されるため、比較的簡単に確認できる。

$('[ng-version]').getAttribute('ng-version');
// "4.4.4", "5.2.0", ...

React

React に関しては良い方法が思い当たらなかった。
CDN 経由でHTMLファイルで直接から React をロードしている場合は、React.version;で取得できるようだが、ビルドツールを用いて構築する現代ではあまり用いることはできないだろう。

React v16 以降で React DevTools 拡張機能をインストールしている環境であれば下記の1行で取得できるが、素直に React DevTools を使った方が良いのではと思える。

JSON.stringify(window.__REACT_DEVTOOLS_GLOBAL_HOOK__._renderers).match(/"version"\:"([0-9\.]+)"/)[1];
// "16.2.0"

Vue.js

グローバル変数にVueオブジェクトが生成されているため、versionプロパティを参照すれば良い。

Vue.version;
// "1.0.24", "2.4.2", ...

Riot.js(v2 以降)

こちらもグローバル変数にriotオブジェクトが生成されているため、versionプロパティを参照すれば良い。

riot.version;
// "v2.2.1", "v3.9.1"