JavaScript ベスト・オブ・ザ・イヤー 2016

JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。

2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた! 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。

過去12か月に獲得された Github のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。

2015年はなんといっても React でした。そして、Flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか?


目次

  1. 2016年人気プロジェクトランキング
  2. フロントエンドフレームワーク
  3. Node.jsフレームワーク
  4. Reactボイラープレート
  5. モバイル
  6. コンパイラ
  7. ビルドツール
  8. テスティングフレームワーク
  9. 統合開発環境(IDE)
  10. 静的サイトジェネレータ


本サイトに掲載したチャートは、2016年の12か月間にGithubでカウントされたスター数をプロジェクト別に比較したものです。分析対象のプロジェクトは bestof.js.org から収集したものです。 bestof.js.org では、Webテクノロジに関連するベストプロジェクトをまとめています。

#12016年人気プロジェクトランキング

まとめ

2016年のトップ10にランキングしたプロジェクトをみれば、その年のWeb開発の動向がよく見て取れます。

  • UIフレームワーク御三家: Vue.JS, React, Angular 2
  • Node.jsの新パッケージマネージャー: Yarn
  • デスクトップアプリ作るなら: Electron
  • Reactプロジェクトを爆速スキャッフォルド: Create React App
  • モバイル向けアプリのフレームワークといえば: React Native
  • もはや知らなきゃもぐりなCSSツールキット: Bootstrap
  • 関数型のコンセプトをベースにした状態管理ライブラリ: Redux
  • パワフルで柔軟なチャートライブラリ: D3

こうしてみると、JavaScriptがいかに様々な分野で汎用的に利用されているのかがわかります。

2016年 最優秀賞 🏆

Vue.JS プロジェクトはGithubで年間25,000以上のスターを獲得しました。日に換算すると72スターほどになります。これはReactとAngularを含めた他のフレームワークと比較しても優位な数字です。

2016年10月にリリースされたヴァージョン2では, Virtual DOMが採用されパフォーマンスが飛躍的に向上しました。

Vue.JS は大企業での採用実績もあり(中国最大のEコマース企業であるアリババなど)、現時点で無難な選択肢と言えるでしょう。 すでに成熟したエコシステムがあり、ルーターの vue-router や状態管理ライブラリ Vuex が利用できます。

つまるところ Vue.JS は、React のコンポーネントアプローチと Angular 1 特有のテンプレート実装との、良いとこ取りな感じでしょうか。

#2フロントエンドフレームワーク

この フロントエンドフレームワーク カテゴリは恐らく、2016年に話題になった JavaScript疲れ(the JavaScript fatigue) の要因の1つです。 毎月のように新しい競合が現われてはバズり、イノベーションを牽引してきました。

このカテゴリには2種類のプロジェクトが含まれています:

  • フルスタックフレームワーク: Webアプリケーションに必要なすべてを含むフレームワーク (ルーティング、データ取得、状態管理など)
  • 軽量フレームワーク: フロントエンドの UI にフォーカスしたフレームワーク

カテゴリ・総合共に1位の Vue.JS にはすでに触れたので、他の競合フレームワークを見て行きましょう。

React とその競合フレームワーク

React はカテゴリ2位で、フロントエンド開発者は React とその豊富なエコシステムを無視できないほどです。

React はとても人気があり、そのの地位を狙う他のたくさんの競合フレームワークに影響を与えています。 あるものは React よりも軽量を、またあるものはブラウザ上のパフォーマンス向上、ビルド時間の短縮などを目指しています。

Inferno もこのカテゴリでもとて人気のあるプロジェクトで、最速の React 代替フレームワークをうたっています。

Inferno と僅差の Preact もすばらしい React 代替フレームワークです。 Preact のエコシステムはかなり充実していて、例えばオフラインでも動作するひな型 preact-boilerplate 、ルーター、 preact-compat (React のモジュールを使用にするモジュール)などがあります。

AngularJS (version 1.x) & Angular 2

AngularJS と Angular 2 のリポジトリは 2つに分割されました。コンセプトはそのままながら、Angular 2 がフルスクラッチで書き直されたためです。

Angular 2 は TypeScript で書かれており、ES6 の恩恵も受けられるモダンなフレームワークです。

Angular 1 は今でも多くのプロジェクトで使用されていて、今後もしばらく人気は続きそうです。

Ember も注目に値するフレームワークで、巨大なエコシステムやコミュニティを有しながらもトップ10には入りませんでした。

このことから2016年の開発者は、出来合いのフルスタックフレームワークを選ぶよりも、軽量フレームワークで自分好みの構成を作り上げる方を好んでいたように見えます。

#3Node.jsフレームワーク

2016年、以下のようなサービスの登場により開発、デプロイがとても簡単になりました。

また、 Gomix のようなサービスによりブラウザから数回クリックするだけで誰でも簡単にコードを書いて共有することができるようになり、 node.js の世界へ足を踏み入れる障壁を下げました。

さて、アプリケーションを実装するにあたってどのフレームワークを利用しましょうか。

Express

Node.jsでWebアプリケーションを構築する場合、web サーバーのデファクトとなっている Express は一番に選択肢に上がるのではないでしょうか。

Express は、必要最低限のコアモジュールでできており利用者は middleware と呼ばれるパッケージを追加して機能を拡張していきます。 これは node.js の開発者には馴染みのスタイルですね。

Koa

Koa の設計思想は Express によく似ていますが、 ES6 で書くことが出来るためいわゆる Callback Hell の呪縛から逃れることができます。

Feathers

Feathers はサービス指向アーキテクチャに柔軟に対応でき、 microservices なシステムの構築に適しています。

Nodal

Nodal フレームワークはPostgreSQLに接続されたステートレスで分散したサービスをターゲットにしています。

Keystone

Keystone は MongoDB のコンテンツを管理する画面を設けるのに優れたツールの一つです。 その管理画面はDBのモデルから自動で作られ、 CRUD の一通りの処理と便利なフィルターを備えています。

Sails

Sails はフル MVC のフレームワークで、 Sails という名前からも分かる通り Ruby on Rails ライクなフレームワークです。 その歴史は長く、 各種 SQL / no-SQL なデータベースと接続することができます。

Loopback

Loopback は成熟したフレームワークのひとつで、トークンを用いた認証や様々なデータベースに対応いるなど多くの機能が実装されています。

API explorer は非常に強力な機能で、すべての API end-points を直感的に確認することができ、どんなユーザーのトークンも確認することができます。API の実装に非常に適したフレームワークです。

#4Reactボイラープレート

React はとてもすばらしい UI のライブラリですが、React やその最新のWeb開発ツールはたくさんの構成・設定を必要とします。 では実際のアプリケーションを作りはじめるにはどうすればいいのでしょうか?

react-boilerplates とその他のスターターキットがその答えを用意してくれています。

Create React App

Facebook は手軽に React のプロジェクトを開始できる Create React App を公開しました。

Dan Abramov (Redux の作者で、現在 Facebook 在籍) はシンプルさと多機能の絶妙なバランスを見出しました。 奇抜な stylesheet も使わず(普通の CSS のみ)、サーバーサイドの描画もせず、それでいて全体をうまくまとめた上で開発者体験もすばらしいという落しどころを。

Create React App の他の競合ツールとの主な違いは、これを使ってプロジェクトをはじめれば依存関係や設定をすべて隠蔽してくれることです。 依存モジュールや設定などの魔術的なものはすべて隠蔽されて、書き足したアプリケーションのコードのみが見える状態になります。 プロジェクト開始時のみに使うのではなく、いつでも依存関係を最新な状態に更新することもできます。 (なんと隠蔽されている依存関係をすべて書き出すこともできます)

React boilerplate

React boilerplate には、Redux や他のオフライン機能のモジュール、Web Worker など、必要になる機能はすべて含まれてます。

これを使えば プログレッシブウェブアプリ (PWA) と呼ばれるアプリケーションを作成できます。 プログレッシブウェブアプリは Service Worker という技術を使用して、オフラインでも動作するウェブアプリケーションです。 詳しくは Nicolás Bevacqua. の this article を参照してくさい。

Next.js

Next.jsZeit の多忙な人達によって開発されました。 サーバーサイドでの描画機能も持つため、サーバーサイドとクライアントサイドでコードをコードを共有できる ユニバーサル アプリケーションを作成できます。 (ユニバーサルアプリケーションは、2015年には Isomorphic と呼ばれていたようです)

#5モバイル

JavaScriptが普及したおかげで、Webデベロッパーの知識(HTML、JavaScript、CSS)で、モバイル向けのネイティヴアプリケーションが開発できるようになりました。

React Native

React NativeならWebアプリケーションと同じコードベースから、真にネイティヴなiOSとAndroidアプリケーションを開発できます。そのコンセプトは、Reactを知っているデベロッパーであればなじみ深いものです。開発の詳細を知りたい方は、このチュートリアルが参考になります。

その他のソリューションではCordobaをベースにしたものが多く、スクリーンのレンダリングにWebviewを利用しています。いずれも、React Native ほどの効率的な実装は難しいようです。"Write Once Run Everywhere"(1度書けばどこでも動く)、というデベロッパーの夢がついに現実になりました!

Ionic

Ionic は、「ハイブリッド」アプリケーションというコンセプトの草分け的存在のひとつです。裏側では、Cordovaを利用してモバイルデヴァイスのフィーチャへアクセスしています。充実したエコシステムを作り上げています。

NativeScript

NativeScriptReact Native と同じゴール(Webのテクノロジでモバイルアプリケーションを実装すること)を目指しています。実装のアプローチとしては、NativeScript CoreとNativeScript + Angular 2の2種類があります。

さて、今年の注目は?

2017年、この分野の注目プロジェクトとして、Vue.JS の上に実装された「モバイル向けクロスプラットフォームUIフレームワーク」Weex を挙げておきます。

#6コンパイラ

AltJS 群などの言語から JavaScript のコードを生成するコンパイラ(トランスパイラ)についてです。 それらのコンパイラはブラウザや node.js で実行できる "standard JavaScript" を生成することができるため、 ブラウザがサポートしているかどうかを気にせず、ES6などの最新の JavaScript でコードを書くことができます。

TypeScript

最も流行っていたトランスパイラーは TypeScript で、 Web の開発者が Java や C# のような静的型付けで実装できるようになりました。 実際 Angular 2 は本体やサンプルコードが TypeScript で書かれており、その普及に貢献しました。

Javascript で型を利用するのにはメリットとデメリットがあり、下記の2つの記事に目を通して採用するかどうかの判断材料にしてください。

Babel

Babel は、よく Webpack と共に利用され、ES6 で書かれたコードや standard JavaScript で書かれた React (JSX) などのライブラリのテンプレートをコンパイルする際のほぼ標準となっています。

初期の頃は ES6 をコンパイルするためによく利用されていましたが、Plugin 形式で様々なコードを変換できることから、より一般的なツールになりました。

Flow

Flow はコンパイラではありませんが、処理を解析して型を推測したりコメントに書いた期待する型を元にチェックする静的な型チェッカーです。(Flow の使い方に関しては こちら)。

元は Facebook の内部プロジェクトで使われていました。React, React Native, Flux, Immutable, Jest など、Facebook がオープンソースの世界で貢献しているものは多いです。

CoffeeScript

Python と Ruby のシンタックスにインスパイアされた CoffeeScript はここ数年最も人気なコンパイラでしたが、2016年では下火となり大半の開発者は CoffeeScript から Babel を使って ES6 を書くスタイルへと移行していきました。

#7ビルドツール

ビルディングプロセスのないWebアプリケーション開発など、2016年の時点で想像することはもはや困難です。みなさんも、アプリケーションをプロダクションにリリースするとき、テンプレートをコンパイルしたりアセットを最適化するビルディングプロセスを踏んでいるはずですよね。

Webpack

Webpack はシングルページアプリケーション(SPA)のビルドツールの代表格で、React との相性も抜群です。最新版である version 2 では注目すべき機能がいくつか追加されています。version 2 についてはこちらがよくまとまっています。

Gulp

Gulp は、ファイルシステムだろうとなんだろうとプロセスを自動化するのに汎用的に利用できるタスクランナーです。ですので、Webpack や Browserify と直接競合するものではないでしょう。

Grunt 同様、Gulp が実行するのはアグリゲーションです。つまり、アセットの集まりを小さくして、つなぎ合わせるところまでするのですが、WebpackBrowserify のようにJavaScriptのモジュール管理までは対応していません。

とはいえ、npm-scriptsを使うくらいならGulpとwebpackを使うべきでしょう。

Browserify

Browserify の人気はそのシンプルさにあり、それが Node.js デベロッパーに支持されています。

基本的な使い方としては、複数のNode.jsパッケージを入力して、"build"というブラウザで実行可能なファイルを出力します。シンプルさが売りではありますが、Webアプリケーションの開発フローには Webpack のような世界観を前面に打ち出すツールのほうがフィットする気がします。

さて、今年の注目は?

2017年に注目すべきモジュール管理ツールとしては、パフォーマンスの高さをうたう rollup を挙げておきます。

Tree shakingと呼ばれるES6モジュールの機能を使い、コードから実際には呼ばれていない関数を取り除いてモジュールバンドルを作ってくれるので、依存関係にあるライブラリがまるごとプロダクションにデプロイされるなんてことがなくなります。

#8テスティングフレームワーク

最も有名なテスティングフレームワークといえば JasmineMocha ですが、2016年には新たなプロジェクトがこのカテゴリで多くの支持を獲得しました。AVAJest です。

AVA

AVA は多産で知られる Sindre Sorhus がクリエーターのテスティングフレームワークです。パフォーマンス(並列テスト)とES6 サポートが売りです。AVA のシンタックスは標準的なテスティングフレームワークである TapeNode-tap に近いものになっています。

Jest

Jest はFacebookのプロジェクトであり、ここ数週間で多くの支持を獲得しています。Reactコミュニティでは当初からよく知られていましたが、じわじわとユーザを獲得していきました(例えばこの記事を参考)。2017年には、最も人気の高いテスティングフレームワークになっているかもしれません。

大抵のテスティングフレームワークでは、Sinon.JS などの外部ライブラリに依存することの多いMockの実装ですが、Jestには優れたMock関数がビルトインされています。

#9統合開発環境(IDE)

統合開発環境(Integrated Development Environment、略してIDE)について触れておきましょう。Webテクノロジで実装されたIDEのなかで、最も人気の高いオープンソースプロジェクトを2つ紹介します。

Visual Studio Code

結果をみると、IDEではMicrosoftの Visual Studio Code がリードしています。

Visual Studio CodeTypeScript とNode.jsをうまくインテグレーションしています。IntelliSense(ハイライティングと自動補完の機能)が使えれば、開発効率はもっと上がると指摘するデベロッパーも少なくないようです。

「オープンソース」と「MicroSoft」を同じセンテンスで使うことは、もはや矛盾でもなんでもありません!

Atom

Github謹製の Atom は、他の多くのデスクトップアプリケーション同様に Electron で実装されています(例えば、Slackのデスクトップクライアントも Electron)。チャートをみてもわかるように、Visual Studio Code にそれほど劣後しているわけではありませんね。あと、Atomで興味深いのは、メイン言語がCoffeeScriptなことでしょうか。

#10静的サイトジェネレータ

静的サイトジェネレータ("Static Site Generators" 略してSSG) は .html, .css, JavaScriptといったWebサイトを構成するファイル一式を生成してくれるツールです。生成されたファイルは、ApacheやNginxのシンプルなWebサーバーへ悩み無用でデプロイできます。データベースやWebアプリケーションフレームワークのセットアップも不要です。例えば、SSGのひとつである Gatsby は自らをこう表現しています:

1995年ころのようにサイトを構築する。

静的なWebサイトは高速、堅牢で、メンテナンスも容易です。

SSGが人気なのは、静的なWebサイトを無料でホスティングできるサービスが多いことも要因でしょう。

Hexo

2016年でもっとも人気のあったSSGがNode.jsでビルドする Hexo です。とてもよくできたSSGで、WordpreessのようなCMSに近く、ブログの構築に利用できます。i18nプラグインを含め、多くのフィーチャを提供しています。

Gatsby

ニューカマーの Gatsby のソリューションは非常に興味深いものです。静的htmlファイルを生成するのにReactのエコシステムを利用しており、競合と一線を画しています。Reactコンポーネントを取り込んでいることからもわかるように、Markdownやサーバーサイドレンダリングをサポートしており、パワフルな仕上がりになっています。

#おわりに

JavaScript fatigue™("JavaScript疲れ")がささやかれ、いくつかの悲劇(例えば、"leftpad gate")にも遭遇しましたが、Vue.JSReact Native が脚光を浴び、YarnCreate React App といった新しいプロジェクトが立ち上がり、2016年はコミュ二ティにとって実りの多い年だったといえるでしょう。

ここまで、2016年に Github で支持を集めたプロジェクトを定量的な視点でみてきました。とはいえ、この結果だけでデベロッパーが満足できるかどうか疑問です。もっと定性的なアプローチをお望みであれば、Sacha Greif の実施したサーヴェイ State of JavaScript を是非チェックしてみてください。9,000 以上の回答結果にアクセスできます。


さて、2017年は何が来るのでしょうか?

2016年を振り返ってみて個人的に気に入ったもののうち、2017年も引き続き伸びそうなプロジェクトとアイデアを10選してみました。

  • Vue.JS: しばらく勢いは止まらないでしょう。
  • Electron
  • Create React App
  • React Native
  • Gatsby (このページのビルドにも使ってます!)
  • Yarn: 高速、高信頼性、セキュアなパッケージマネージャーです。npm に取って代わる可能性もあります。こちらの記事が参考になります: "Yarn vs npm - The State of Node.js Package Managers"
  • プログレッシブ Web アプリケーション
  • Now に代表されるような、デプロイが容易で Node.js ベースのマイクロサービスが構築できるホスティングサービス
  • Node.js の進化: 最新のリリースでは ES6 シンタックスをきちんとサポートしています。
  • あと最後に GraphQL: 周囲の評判は高く、これは来る、らしいです。

最後までお読みいただきありがとうございます。シェアは自由です。フィードバックはこちらからお願いします: Github

Rising Stars 2016

Japanese translation

Nobuhiro Uchiyama
A generic programmer and linguist living in Osaka from Sapporo.
素朴なプログラマで言語マニア。札幌生まれの大阪在住。
Yohei Ice
Web application developer (Rails, React, ...)
Shigeto Yatani
Node.js, 美味しいご飯, 酒, 料理, バスケ, ヨガ, エレクトロニカ, DJ, 園芸, DIY, プチアウトドア, 六甲山