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

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

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

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


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

目次

  1. 2016年人気プロジェクトランキング
    Vue.jsReactElectronReact NativeReduxBootstrapD3VS CodeNode.jsWebpack
  2. フロントエンドフレームワーク
    Vue.jsReactAngularAngular 1Inferno
  3. Node.jsフレームワーク
    ExpressKoaFeathersKeystoneSails
  4. Reactボイラープレート
    Create React AppMaterial UIReact RouterReact boilerplateReact Starter Kit
  5. モバイル
    React NativeIonicNativeScript
  6. コンパイラ
    TypeScriptBabelReasonCoffeeScriptClojureScript
  7. ビルドツール
    WebpackGulpRollupBrowserifyGrunt
  8. テスティングフレームワーク
    AVAJestMochaJasmineTape
  9. 統合開発環境(IDE)
    VS CodeAtomBracketsDeco IDE
  10. 静的サイトジェネレータ
    HexoGatsbyMetalsmith
  11. おわりに

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

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+26.4k☆

2016年の推移

1.6k
948
1.3k
2.0k
2.0k
1.7k
2.1k
2.2k
2.7k
3.7k
3.2k
3.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

GitHub情報

作成日
2013-07
累計スター数
79.3k☆

リンク

GitHub
vuejs/vue
WEB サイト
vuejs.org
Best of JS
bestofjs.org/projects/vuejs
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+22.9k☆
3
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+18.2k☆
4
React Native

React Native

A framework for building native apps with React.
+17.5k☆
5
Redux

Redux

Predictable state container for JavaScript apps
+15.2k☆

まとめ

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

  • UI フレームワーク御三家: Vue.js, React, Angular
  • 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 特有のテンプレート実装との、良いとこ取りな感じでしょうか。

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

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+26.4k☆
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+22.9k☆
3
Angular

Angular

One framework. Mobile & desktop.
+10.4k☆
4
Angular 1

Angular 1

AngularJS - HTML enhanced for web apps!
+8.5k☆
5
Inferno

Inferno

An extremely fast, React-like JavaScript library for building modern user interfaces
+6.9k☆

この フロントエンドフレームワーク カテゴリは恐らく、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 は TypeScript で書かれており、ES6 の恩恵も受けられるモダンなフレームワークです。

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

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

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

Node.jsフレームワーク

1
Express

Express

Fast, unopinionated, minimalist web framework for node.
+6.9k☆
2
Koa

Koa

Expressive middleware for node.js using ES2017 async functions
+5.0k☆
3
Feathers

Feathers

A REST and realtime API layer for modern applications.
+4.1k☆
4
Keystone

Keystone

node.js cms and web app framework
+3.6k☆
5
Sails

Sails

Realtime MVC Framework for Node.js
+3.2k☆

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

また、 Glitch のようなサービスによりブラウザから数回クリックするだけで誰でも簡単にコードを書いて共有することができるようになり、 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 の実装に非常に適したフレームワークです。

Reactボイラープレート

1
Create React App

Create React App

Create React apps with no build configuration.
+9.5k☆
2
Material UI

Material UI

React components that implement Google's Material Design.
+9.4k☆
3
React Router

React Router

Declarative routing for React
+9.1k☆
4
React boilerplate

React boilerplate

:fire: A highly scalable, offline-first foundation with the best developer experience and a focus on
+8.9k☆
5
React Starter Kit

React Starter Kit

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post
+6.3k☆

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 と呼ばれていたようです)

モバイル

1
React Native

React Native

A framework for building native apps with React.
+17.5k☆
2
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+6.0k☆
3
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+3.7k☆

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 を挙げておきます。

コンパイラ

1
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+9.4k☆
2
Babel

Babel

:tropical_fish: Babel is a compiler for writing next generation JavaScript.
+6.6k☆
3
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+1.9k☆
4
CoffeeScript

CoffeeScript

Unfancy JavaScript
+1.2k☆
5
ClojureScript

ClojureScript

Clojure to JS compiler
+1.2k☆

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

TypeScript

最も流行っていたトランスパイラーは TypeScript で、 Web の開発者が Java や C# のような静的型付けで実装できるようになりました。実際 Angular は本体やサンプルコードが 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 を書くスタイルへと移行していきました。

ビルドツール

1
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting a
+11.2k☆
2
Gulp

Gulp

The streaming build system
+6.3k☆
3
Rollup

Rollup

Next-generation ES6 module bundler
+5.2k☆
4
Browserify

Browserify

browser-side require() the node.js way
+1.7k☆
5
Grunt

Grunt

Grunt: The JavaScript Task Runner
+889☆

ビルディングプロセスのない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モジュールの機能を使い、コードから実際には呼ばれていない関数を取り除いてモジュールバンドルを作ってくれるので、依存関係にあるライブラリがまるごとプロダクションにデプロイされるなんてことがなくなります。

Loading
Loading
Loading

おわりに

JavaScript fatigue™("JavaScript疲れ")がささやかれ、いくつかの悲劇(例えば、"leftpad gate")にも遭遇しましたが、Vue.jsReact Native が脚光を浴び、yarn や Create 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

Japanese version

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, プチアウトドア, 六甲山

Authors

Sacha Greif

Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.

Available Translations

English

中文