きっかけ
これまで様々な 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"