今、人気のJSライブラリ［ジャンル別に比較］

人気上昇中のJavaScriptライブラリを調べてみた【2016年版】

Web Technology altJS CSSプリプロセッサー HTML5ハイブリッドアプリ Web Components WebアプリタスクランナーレスポンシブWebデザイン

2016年1月12日

新しいWeb開発フレームワークも登場！ 2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する。

デジタルアドバンテージ　一色政彦

　2016年が始まり、心機一転で「今年こそはWeb開発を頑張ろう」と思っている人も少なくないだろう。そんな方々に向けて本稿では、2015年中に人気が急上昇してきており、「2016年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表する（※昨年の2015年版はこちら）。

　なお、本稿のランキング決定では、検索キーワードの流行を調査可能な「Googleトレンド」（「すべての国」「過去 12 か月間」「コンピュータ、電化製品」「ウェブ検索」という条件で絞り込み）を使って、ライブラリの人気をジャンルごとに比較した（※ライブラリ名が一般的な英単語の場合、Web検索時に、その英単語にもヒットしてしまう。このノイズがGoogleトレンドでの結果として入り込んでいる可能性が高いことをご了承いただきたい。各ジャンルは、筆者が独自に定義したものであり、厳密には複数のジャンルにまたがるライブラリも存在するが、筆者の独断によりどこか一つのジャンルに含めている。また、Googleトレンドの制限事項として縦の時間軸の挿入はできなかったので、その点はご容赦いただきたい）。

　さっそく、2016年に取り組むべき「注目のJavaScriptライブラリ」のランキングをジャンル別に紹介していこう。

フレームワーク関連

　近年、注目を集めたMV*フレームワークに代表される「Webアプリの基盤となるフレームワーク系ライブラリ」は、2015年はどうなったのか。まずはこのジャンルからチェックしていこう。なお、前回の本節では「モバイルWebサイト構築専用フレームワーク」も取り上げたが、このジャンルは近年、大きな変動もなく、後述の「レスポンシブCSSフレームワーク」を使ってPC／タブレット／モバイルと広範な対象のUI（ユーザーインターフェース）を開発するケースが多くなっていると考えられるので、今回は割愛した。

Webアプリ・フレームワーク

　Webアプリ、特にSPA（シングル・ページ・アプリケーション）のフロントエンド構築に使える、フレームワーク系JavaScriptライブラリの代表は次の4つとなる。

1Angular
2React
3Aurelia
4Vue.js

　2015年はReactやAureliaなどが伸びており、圧倒的1位だった「AngularJS」との差を縮め始めている。ただしAngularJSは、現時点でもまだ勢いを増しており、2016年中でも2位以降を引き離したままだと予想される。Angular／Reactは、グーグル／フェイスブックという巨大企業の看板があるため、「信頼できる」と考える人が多く、人気が伸びやすいと考えている。

Webアプリ・フレームワークの人気度の動向（Googleトレンド）

　AngularJSのバージョン2である「Angular 2」（現在、ベータ版）が2016年中に正式リリースされる見込みだ。バージョン2への移行がどれくらい進むか未知数だが、現状では依然として「新たに学ぶならAngularJS」といえるだろう。

　なお、MV*フレームワークのBackbone.jsやEmber.jsはVue.jsには勝っていたが、2位からは大きく引き離され、人気もあまり上がっていないので、今回は掲載しなかった。Backbone.jsは人気が下降気味で、Ember.jsはほぼ維持しているがじりじりと少しずつ下げる状況になっている。

DOM操作

　HTMLのDOM（Document Object Model）操作ができるフレームワークで思い付くのは、何といっても下記のフレームワークだ。

1jQuery

DOM操作関連の人気度の動向（Googleトレンド）

※このグラフでは、比較材料として、上記の「Webアプリフレームワーク」の上位2項目も含めた。

　この分野は依然として「jQuery」が圧倒的に強く、類似のDOM操作系ライブラリは全く比較にならなかったので掲載しなかった。ただし、jQueryもじりじりと人気が下降してきており、（※ジャンルは異なるが）「Webアプリフレームワーク」との差は縮まりつつある。

HTML5ハイブリッドアプリ・フレームワーク

　次に、WebサイトではなくiOS／Android向けのネイティブアプリをHTML5を使って開発するためのフレームワークの人気動向を見てみよう。ちなみに、HTML5によるWebアプリを内包するネイティブアプリはHTML5ハイブリッドアプリと呼ばれる。

　この分野にはたくさんのフレームワークが存在するが、本稿では比較的人気のある以下の5つに絞って比較した。ちなみに、PhoneGapについては、オープンソースのCordovaに人気が移行しつつあるのでここでは非掲載とした。

1Cordova
2Ionic
3Intel XDK
4React Native
5Monaca

HTML5ハイブリッドアプリ・フレームワークの人気度の動向（Googleトレンド）

　こちらは年初、「Cordova」の人気が圧倒的に高かったが、徐々に「Ionic」が追い上げ、2016年には逆転しそうな勢いとなっている。それ以外では、「React Native」の成長ぶりが目立っている。

ユーザーインターフェース関連

　昨年の記事では、「テンプレートエンジン」と「Webグラフィックス」をこの節で紹介していたが、前者はニッチで検索ボリュームが少なく、後者は内容が多種多様すぎて比較しづらいので、今回は掲載しないことにした。その代わりに、今回は（JavaScriptライブラリというわけではないが）「レスポンシブCSSフレームワーク」と「Web Componentsライブラリ」を掲載する。

レスポンシブCSSフレームワーク

　スマートフォンの普及に伴い、Webブラウザーのウィンドウサイズに応じて最適なUIを提供するレスポンシブWebデザインを採用することは、今では普通になってきている。そのようなUIを実現するために使われるのがグリッド・レイアウト・システムで、それをCSS経由で手軽に使えるようにしたものがレスポンシブCSSフレームワークである。代表的なものは下記の3つだ。

1Bootstrap
2Foundation
3Skeleton

レスポンシブCSSフレームワークの人気度の動向（Googleトレンド）

　「Bootstrap」が圧倒的に人気ではあるものの、人気は横ばいのようである。

　なお、CSS3ではFlexboxと呼ばれるレイアウトシステムが提供されており、これが今後、広く使われていくようになれば、これらのレスポンシブCSSフレームワークの動向にも影響してくる可能性はある（※参考までに、フレームワークではないものの「Flexbox」を上のグラフに追加してみた。緑の線がそれだが、1年を通じて上昇傾向ではあるものの、まだあまり普及していないようである）。

Web Componentsライブラリ

　Web Componentsは、UIを部品化するための次世代のWeb技術だ。2013年にグーグルがPolymerというWeb Components用ライブラリを発表し、Web界わいで注目を集め続けてはいるものの、Chrome以外のWebブラウザーではサポートが進んでおらず、W3Cでもまだ議論が進行中である。そういった状況なので、Web Components全体に対して慎重な姿勢を崩していない人が多いというのが現状である。

1Polymer

Web Componentsライブラリの人気度の動向（Googleトレンド）

　その「Polymer」が、やはりWeb Componentsライブラリとしては圧倒的に人気がある。2015年10月までは徐々に人気が下降気味だったが、バージョン1.2をリリースした11月から上昇に転じている。

Web制作時に使えるJavaScript関連ツール

　JavaScriptライブラリというわけではないが、JavaScript関連ツールの人気動向についても紹介しよう。なお、前回は「JavaScriptテストツール」も取り上げたが、そのジャンルは近年、大きな変動もないので今回は省略した。

altJS（＝JavaScript代替）

　2015年の1年間で、JavaScript言語をより効率的に記述できる代替言語／ツールの人気は以下のようになった。ちなみに「Babel」は、次世代のECMAScript 2015（ES6）やES7で書かれたコードを、現状のES5形式にコンパイルできる、一種のAltJSである。

1TypeScript
2CoffeeScript
3Haxe
4JSX
5Babel

altJS（JavaScript代替）の人気度の動向（Googleトレンド）

　2013～2014年の間、この分野は混戦状況だったが、2015年でついに決着がついたようだ。「TypeScript」が飛び抜け、他をさらに引き離し続けている。

CSSプリプロセッサー（CSSメタ言語）

　altJSが出たなら、CSSプリプロセッサーの方も気になる。JavaScriptではないが、これについても見ておこう。下記の3つは、主要なCSSプリプロセッサーである。

1Sass
2LESS
3PostCSS

CSSプリプロセッサー（CSSメタ言語）の人気度の動向（Googleトレンド）

※検索ノイズをできるだけ除外するために、検索キーワードとして「LESS」と「Sass」の前に「CSS 」を追加した。

　ここ数年、SassとLESSの検索ボリュームは拮抗（きっこう）しており、2014年まではやや「LESS」がリードしてきたが、2015年中に下降を始め、人気を維持した「Sass」が今回は1位となった。両者の差は開き始めており、このまま進めば、2016年には差が決定的になると予想される。

　ちなみに、このグラフの黄色の線を見るとまだ検索ボリュームはわずかではあるが、最近、話題に挙がることが多くなってきた「PostCSS」にも2016年は注目したい。

タスクランナー

　altJSとCSSプリプロセッサーの2つが出たなら、そのコンパイル実行（＝タスク）を自動化するためのタスクランナーも気になる。下記の2つは、主要なタスクランナーである。

1Grunt
2gulp.js

タスクランナーの人気度の動向（Googleトレンド）

※全てのキーワードの前に「JavaScript 」を追加して、検索ノイズをできるだけ除外するようにした。

　2014年に続き2015年も、期間全体では「Grunt」が首位だったが、2015年は下降を続け、9月以降では「gulp.js」に逆転を許している。gulp.jsは1年を通じて上昇傾向にあるので、2016年には両者に大きな差が出てくる可能性が高い。

■

　以上の結果から判明した、下記の「特に人気のある／成長力のあるJavaScriptライブラリ」については、可能な限り、その内容を押さえておきたいところである（※かっこ書きで、1位ではないものの成長力が高いライブラリも記載した。筆者はそちらも習得することをお勧めする）。

Webアプリ・フレームワーク： AngularJS（成長力なら、React）
DOM操作： jQuery
HTML5ハイブリッドアプリ・フレームワーク： Cordova（成長力なら、Ionic）
レスポンシブCSSフレームワーク： Bootstrap
Web Componentsライブラリ： Polymer
altJS（＝JavaScript代替）： TypeScript
CSSプリプロセッサー（CSSメタ言語）： Sass（成長力なら、PostCSS）
タスクランナー： Grunt（成長力なら、gulp.js）
モバイルWebサイト構築専用フレームワーク： jQuery Mobile（※2016/1/12修正本文中に登場しておらず誤記のため）

　※最後に、繰り返しになるが、本稿はGoogleトレンドの結果を基にしたものであり、厳密に各JavaScriptライブラリの人気度を調査したわけではない。また、比較可能な全てのJavaScriptライブラリを網羅できているわけではない点にも注意してほしい。従って本稿の内容は、あくまで一つの参考情報にとどめ、実際のWeb制作でJavaScriptライブラリを選択する際には、より詳しい情報を収集したり、実際に自分で試して比較したりしてほしい。

1. 人気上昇中のJavaScriptライブラリを調べてみた［ジャンル別に比較］

2013年中に人気が急上昇してきており、「2014年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。

2014年1月10日(金曜日)

2. 人気上昇中のJavaScriptライブラリを調べてみた【2015年版】

altJSの人気が混戦で面白い！ 2014年中に人気が急上昇してきており、「2015年では必須の知識」となりそうなJavaScriptライブラリをランキング形式で発表。

2015年1月9日(金曜日)

3. 【現在、表示中】≫ 人気上昇中のJavaScriptライブラリを調べてみた【2016年版】

2016年1月12日(火曜日)

今、人気のJSライブラリ［ジャンル別に比較］