Webサイトを作るときにJavaScriptのフレームワークやライブラリを使用することがあると思います。jQueryは数年に渡ってよく使われているフレームワーク（ライブラリ）だと思いますが、他にはどんなフレームワーク（ライブラリ）が使用されているのでしょうか？ReactやAngularJS、Vue.jsはどれくらい使用されているのでしょうか？どのフレームワーク（ライブラリ）がどれくらい使用されているかを調べてみました。
調査対象
調査の対象は上場企業約3600社のトップページです。上場企業トップページのURLはPathfinderGateさんのデータを参照させていただきました。やや情報が古いため、アクセスできないページがあったりして全数調査はできていないことと、２０１７年現在の上場企業のデータとは差異があることをご承知おきください。
調査方法
上場企業約3600社のトップページにアクセスしscriptタグのsrc属性のファイル名を調査しています。
HTMLが取得できないサイトやscriptタグのsrc属性が取得できないものは無視しています。
ファイル名を調査しているため、top.js等の汎用的なファイル名が検出されました。これらは流通しているJavaScriptライブラリとは思えませんので、このようなファイルは調査結果データからは排除しました。
3600社、3600ページを調査した上で30件以上を検出したファイル名のもののみを結果データとしています。
調査結果データ
| JavaScriptファイル名 | モジュール概要 | 検出件数 |
|---|---|---|
| jquery.js | jQuery | 1041 |
| jquery.min.js | jQuery | 892 |
| jquery.cookie.js | クッキー操作 | 517 |
| jquery.bxslider.min.js | スライダー | 389 |
| jquery.easing.1.3.js | エフェクト | 330 |
| conversion.js | Adwordsコンバージョン | 276 |
| slick.min.js | スライダー | 267 |
| wp-embed.min.js | oEmbed | 250 |
| rollover.js | ロールオーバー | 228 |
| jquery-migrate.min.js | jQuery Migrate | 213 |
| jquery.bxslider.js | スライダー | 205 |
| swfobject.js | Flash埋め込み | 188 |
| heightLine.js | 高さ揃え | 181 |
| ga.js | Googleアナリティクス | 155 |
| styleswitcher.js | スタイルシート切り替え | 146 |
| s_retargeting.js | Yahooリターゲティング | 142 |
| jsapi | Google Loader | 140 |
| analytics.js | Googleアナリティクス | 122 |
| smoothscroll.js | スムーススクロール | 119 |
| AC_RunActiveContent.js | Flash埋め込み | 114 |
| jquery.form.min.js | フォーム操作 | 108 |
| slick.js | スライダー | 105 |
| fontsize.js | フォントサイズ変更 | 103 |
| jquery.easing.js | エフェクト | 99 |
| bootstrap.min.js | フレームワーク | 96 |
| jquery.flexslider-min.js | スライダー | 92 |
| jquery.colorbox-min.js | モーダルウィンドウ | 86 |
| smartRollover.js | ロールオーバー | 79 |
| jquery-1.11.1.min.js | jQuery | 79 |
| jquery.matchHeight.js | 高さ揃え | 78 |
| base.js | オブジェクト指向 | 78 |
| jquery.matchHeight-min.js | 高さ揃え | 77 |
| jquery.flexslider.js | スライダー | 76 |
| jquery-1.11.3.min.js | jQuery | 71 |
| jquery-ui.min.js | jQuery UI | 71 |
| jquery.easing.min.js | エフェクト | 71 |
| jquery-1.9.1.min.js | jQuery | 69 |
| jquery-1.8.3.min.js | jQuery | 68 |
| jquery.colorbox.js | モーダルウィンドウ | 66 |
| scroll.js | スムーススクロール | 65 |
| urchin.js | Googleアナリティクス | 65 |
| jquery.textresizer.js | フォントサイズ変更 | 65 |
| jquery.tile.js | 高さ揃え | 63 |
| yuga.js | ライブラリ | 62 |
| jquery-1.10.2.min.js | jQuery | 62 |
| jquery.mousewheel.js | マウスホイール操作 | 62 |
| slider.js | スライダー | 61 |
| jquery-1.7.1.min.js | jQuery | 61 |
| jquery-1.11.2.min.js | jQuery | 56 |
| jquery-1.7.2.min.js | jQuery | 56 |
| jquery.smoothScroll.js | スムーススクロール | 55 |
| jquery.mousewheel.min.js | マウスホイール操作 | 54 |
| modernizr.js | クロスブラウザ対応 | 52 |
| jquery.heightLine.js | 高さ揃え | 52 |
| jquery-1.11.0.min.js | jQuery | 49 |
| jquery-1.8.2.min.js | jQuery | 45 |
| lib.js | SSLサインシール | 45 |
| jquery.jscrollpane.min.js | スクロールバーカスタマイズ | 45 |
| jquery.rollover.js | ロールオーバー | 44 |
| jqueryAutoHeight.js | 高さ揃え | 42 |
| jquery.sliderPro.min.js | スライダー | 39 |
| s_code.js | サイトカタリスト | 38 |
| scrollsmoothly.js | スムーススクロール | 37 |
| jquery.page-scroller.js | スムーススクロール | 37 |
| jquery.carouFredSel-6.2.1-packed.js | スライダー | 36 |
| jquery.cycle.all.js | スライダー | 34 |
| jquery-ui.js | jQuery UI | 33 |
| slideshow.js | スライドショー | 32 |
| jquery.fancybox.js | lightbox | 30 |
目を引くのはjQueryでReactやAngularJS、Vue.jsといった新しい技術を使用しているところは見られませんでした。
それどころかGoogleアナリティクスの古いタグやFLASH関連のライブラリなど、随分古い技術も散見されます。
次にjQueryの使用状況について見てみます。
jQuery採用状況
| JavaScriptファイル名 | モジュール概要 | 検出件数 |
|---|---|---|
| jquery.js | jQuery | 1041 |
| jquery.min.js | jQuery | 892 |
| jquery-1.11.1.min.js | jQuery | 79 |
| jquery-1.11.3.min.js | jQuery | 71 |
| jquery-1.9.1.min.js | jQuery | 69 |
| jquery-1.8.3.min.js | jQuery | 68 |
| jquery-1.10.2.min.js | jQuery | 62 |
| jquery-1.7.1.min.js | jQuery | 61 |
| jquery-1.11.2.min.js | jQuery | 56 |
| jquery-1.7.2.min.js | jQuery | 56 |
| jquery-1.11.0.min.js | jQuery | 49 |
| jquery-1.8.2.min.js | jQuery | 45 |
jQueryを採用しているのは2549件で全体の70%近くが採用しています。バージョンが明確になっているものの多くはバージョン1系統を採用している点も見逃せません。今回はファイル名だけを取得してきてしまったため、バージョンを正確に調査することができませんでした。次回調査の課題としたいと思います。
JavaScriptライブラリの使用目的
| JavaScriptモジュール機能 | 検出件数 |
|---|---|
| jQuery | 2549 |
| スライダー | 1304 |
| クッキー操作 | 517 |
| エフェクト | 500 |
| 高さ揃え | 493 |
| ロールオーバー | 351 |
| Googleアナリティクス | 342 |
| スムーススクロール | 313 |
| Flash埋め込み | 302 |
| Adwordsコンバージョン | 276 |
| oEmbed | 250 |
| jQuery Migrate | 213 |
| フォントサイズ変更 | 168 |
| モーダルウィンドウ | 152 |
| スタイルシート切り替え | 146 |
| Yahooリターゲティング | 142 |
| Google Loader | 140 |
| マウスホイール操作 | 116 |
| フォーム操作 | 108 |
| jQuery UI | 104 |
| フレームワーク | 96 |
| オブジェクト指向 | 78 |
| ライブラリ | 62 |
| クロスブラウザ対応 | 52 |
| スクロールバーカスタマイズ | 45 |
| SSLサインシール | 45 |
| サイトカタリスト | 38 |
| スライドショー | 32 |
| lightbox | 30 |
JavaScriptライブラリの機能ごとに採用件数を見ていきます。前提としてjQueryを使用しているところが多く、スライダーやエフェクト、高さ揃え、ロールオーバーといったイチから作ると面倒な機能がライブラリとして採用されていることがわかります。
特にスライダーは採用数も多く、レスポンシブに対応したものなどバリエーションも多く、選択の幅も多くあります。
まとめ
現状のJavaScriptフレームワーク（ライブラリ）についてシェアを調べてみたところ、jQueryのシェアは一般企業のトップページにおいては依然高く、新しい技術の採用はまだ少ないという結果でした。ターゲットをトップページではなく、システム絡みのサイトやショッピングサイトなどに絞るとまた違った結果になるかもしれません。
レガシー技術と新技術の採用については、現状を踏まえて採用する必要があるのかなと感じました。
