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

昨年 に引き続き、2017年のJavaScriptの動向を振り返ります。

2017年の12ヶ月間に獲得した Github のスター数からプロジェクトを定量的に評価し、JavaScript ベスト・オブ・ザ・イヤー 2017 を決定します。



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

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

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
2017, GitHub で 40.0k スターを獲得した Vue.js は categories-share.all 部門で 1 位。 Tweet
3.0k
3.5k
3.9k
3.1k
3.2k
3.1k
3.6k
3.3k
3.6k
3.4k
3.1k
3.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
2017, GitHub で 27.8k スターを獲得した React は categories-share.all 部門で 2 位。 Tweet
2.0k
2.0k
2.6k
2.3k
2.3k
2.0k
2.6k
2.2k
2.5k
2.8k
2.5k
2.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
2017, GitHub で 22.5k スターを獲得した Create React App は categories-share.all 部門で 3 位。 Tweet
2.1k
1.8k
2.3k
1.8k
2.2k
1.8k
1.9k
2.3k
1.5k
1.7k
1.7k
1.5k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Puppeteer

Puppeteer

Headless Chrome Node API
+22.0k☆
2017, GitHub で 22.0k スターを獲得した Puppeteer は categories-share.all 部門で 4 位。 Tweet
3.9k
2.9k
3.0k
2.2k
1.9k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Axios

Axios

Promise based HTTP client for the browser and node.js
+21.9k☆
2017, GitHub で 21.9k スターを獲得した Axios は categories-share.all 部門で 5 位。 Tweet
1.5k
1.7k
2.2k
2.0k
1.9k
1.8k
1.9k
1.9k
1.7k
1.7k
1.9k
1.7k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
VS Code

VS Code

Visual Studio Code
+20.2k☆
2017, GitHub で 20.2k スターを獲得した VS Code は categories-share.all 部門で 6 位。 Tweet
897
1.4k
1.8k
1.7k
1.5k
1.3k
1.4k
1.6k
1.6k
2.5k
2.6k
1.8k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Prettier

Prettier

Prettier is an opinionated code formatter.
+17.7k☆
2017, GitHub で 17.7k スターを獲得した Prettier は categories-share.all 部門で 7 位。 Tweet
114
1.1k
1.3k
2.6k
1.0k
1.8k
1.0k
1.3k
721
1.4k
956
1.5k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
React Native

React Native

A framework for building native apps with React.
+15.6k☆
2017, GitHub で 15.6k スターを獲得した React Native は categories-share.all 部門で 8 位。 Tweet
1.2k
1.3k
1.6k
1.3k
1.3k
1.3k
1.3k
1.2k
1.1k
1.2k
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
2017, GitHub で 14.9k スターを獲得した Element は categories-share.all 部門で 9 位。 Tweet
1.4k
1.2k
1.8k
1.2k
1.1k
1.0k
1.1k
1.1k
1.3k
1.4k
1.3k
1.1k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+14.8k☆
2017, GitHub で 14.8k スターを獲得した Electron は categories-share.all 部門で 10 位。 Tweet
1.3k
1.2k
1.4k
1.3k
1.3k
1.1k
1.2k
1.2k
1.1k
1.3k
1.2k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
11
Bootstrap

Bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first project
+14.5k☆
2017, GitHub で 14.5k スターを獲得した Bootstrap は categories-share.all 部門で 11 位。 Tweet
996
1.0k
1.4k
1.3k
1.1k
1.0k
1.1k
1.4k
1.2k
1.5k
1.3k
1.1k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
12
Parcel

Parcel

📦🚀 Blazing fast, zero configuration web application bundler
+14.0k☆
2017, GitHub で 14.0k スターを獲得した Parcel は categories-share.all 部門で 12 位。 Tweet
1
1
13.9k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
13
Node.js

Node.js

Node.js JavaScript runtime
+13.7k☆
2017, GitHub で 13.7k スターを獲得した Node.js は categories-share.all 部門で 13 位。 Tweet
869
1.1k
1.2k
1.0k
1.1k
1.1k
1.0k
1.2k
946
1.8k
1.5k
1.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
14
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
2017, GitHub で 13.3k スターを獲得した Ant Design は categories-share.all 部門で 14 位。 Tweet
936
1.1k
971
910
928
941
1.1k
887
1.2k
1.3k
1.6k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
15
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting a
+13.1k☆
2017, GitHub で 13.1k スターを獲得した Webpack は categories-share.all 部門で 15 位。 Tweet
1.4k
1.2k
1.2k
1.1k
1.1k
1.2k
1.1k
995
714
1.0k
1.0k
1.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
16
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
2017, GitHub で 12.7k スターを獲得した Next.js は categories-share.all 部門で 16 位。 Tweet
893
664
2.1k
1.3k
1.2k
745
1.2k
856
697
1.2k
864
960
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
17
D3

D3

Bring data to life with SVG, Canvas and HTML.
+12.7k☆
2017, GitHub で 12.7k スターを獲得した D3 は categories-share.all 部門で 17 位。 Tweet
1.1k
1.1k
1.6k
1.3k
1.1k
768
1.0k
1.0k
985
879
879
797
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
18
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
2017, GitHub で 12.2k スターを獲得した Angular は categories-share.all 部門で 18 位。 Tweet
827
949
1.4k
1.0k
884
911
983
989
925
1.1k
1.2k
930
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
19
Bulma

Bulma

Modern CSS framework based on Flexbox
+12.0k☆
2017, GitHub で 12.0k スターを獲得した Bulma は categories-share.all 部門で 19 位。 Tweet
1.1k
867
927
840
907
873
1.1k
1.1k
888
1.7k
1.0k
778
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
20
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+11.6k☆
2017, GitHub で 11.6k スターを獲得した TypeScript は categories-share.all 部門で 20 位。 Tweet
738
855
972
1.1k
928
936
976
1.0k
818
1.2k
1.1k
992
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
21
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
2017, GitHub で 10.4k スターを獲得した Preact は categories-share.all 部門で 21 位。 Tweet
779
498
575
634
829
920
729
2.0k
1.9k
545
401
532
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
22
Redux

Redux

Predictable state container for JavaScript apps
+10.1k☆
2017, GitHub で 10.1k スターを獲得した Redux は categories-share.all 部門で 22 位。 Tweet
870
821
1.1k
913
820
780
767
809
738
812
876
797
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
23
Animate.css

Animate.css

🍿 A cross-browser library of CSS animations. As easy to use as an easy thing.
+10.0k☆
2017, GitHub で 10.0k スターを獲得した Animate.css は categories-share.all 部門で 23 位。 Tweet
784
757
942
922
817
764
776
822
777
894
961
743
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
24
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
2017, GitHub で 9.7k スターを獲得した Storybook は categories-share.all 部門で 24 位。 Tweet
467
429
666
627
807
940
704
1.0k
671
837
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
25
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
2017, GitHub で 9.7k スターを獲得した Gatsby は categories-share.all 部門で 25 位。 Tweet
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

2017年 ベストプロジェクト

カテゴリを超えてもっとも人気のあったプロジェクトを見てみましょう。

2年連続で Vue.js

2017年もっとも人気だったプロジェクトは昨年に引き続き Vue.js です。年間で 40,000 を超えるスターを新規に獲得しました。

スター獲得数は2016年(26,000 スター)をはるかに超える結果です。次点の React を大きく引き離しました。 Vue.js がここまで人気な理由は、

  1. コンポーネントという考え方は React と同じだが、シンタックスが React よりとっつきやすく比較的短期間で習得できる。
  2. エコシステエムがしっかりしている。ルーター:vue-router、状態管理ライブラリ:Vuex といったデファクトスタンダード一式を含んでいる。
  3. ひとつの .vue ファイルにテンプレート、ロジック、スタイルすべてを格納するシングルファイルコンポーネントというコンセプトが非常に優れている。
  4. PHP のWEB アプリケーションフレームワークでもっとも人気の高い Laravel でデフォルトの view エンジンとして採用されている。
  5. Facebook や Google のような巨大なインターネット企業がバックに控えているのではなく、Evan You 氏がクラウドソーシングでスポンサーを募り、オープンソースプロジェクトとしてメンテナンスしている。

などが考えられそうです。5つ目と関係していると思いますが、Vue.js はとりわけ中国の開発者にとても人気があります。Vue.js は中国最大のEコマース企業(Alibaba)で採用されていますし、GitLab や Adobe でも採用されています。

ふたたび 2位は React

2016年と同じく 2位は React でした。2017年は 27,000個のGithub スターを獲得しました(ここでいうスター数は2017年の1年間で新規に獲得した数で、これまでに獲得した総スター数ではありません)。

React プロジェクトの新規作成には React のサードプロジェクトである Create React App というコマンドラインツールの使用が推奨されています。ただ、Create React App が普及したことで、React ボイラープレートが以前にもまして乱造されるようになりました。

Redux のクリエータで、現在は Facebook に籍をおく Dan Abramov 氏のおかげで、シンプルさと機能とが絶妙なバランスで共存するようになりました。例えば、スタイリングのための凝ったソリューション(代わりにプレイン CSS の推奨)、サーバーサイドレンダリングといった発想はなく、すべての機能がうまくパッケージされていて、優れた開発者エクスペリエンスを実現しています。

Axios

HTTP クライアントでもっとも人気の高いライブラリが Axios です。クライアントサイド(AJAX リクエスト)、サーバーサイド(Node.js 環境で HTTP リクエスト)のいずれでも動作します。Axios の人気には、Vue.js も一枚噛んでいるようです。Vue.js のチュートリアルの多くの箇所で、API への HTTP リクエストの解説に Axios が利用されています。

Puppeteer

Puppeteer は、2017年のもっとも重要な出来事のひとつでしょう。Puppeteer は、Google Chrome チームが開発したヘッドレスな Chrome ブラウザで、バックグランドで走らせコードで制御が可能です。ユースケースとしては、

  • WEB アプリケーション UI テストを自動化
  • サーバサイドレンダリングでWEB ページのスナップショットを取得
  • WEB ページを PDF ファイルで保存

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

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
2017, GitHub で 40.0k スターを獲得した Vue.js は categories-share.framework 部門で 1 位。 Tweet
3.0k
3.5k
3.9k
3.1k
3.2k
3.1k
3.6k
3.3k
3.6k
3.4k
3.1k
3.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
React

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+27.8k☆
2017, GitHub で 27.8k スターを獲得した React は categories-share.framework 部門で 2 位。 Tweet
2.0k
2.0k
2.6k
2.3k
2.3k
2.0k
2.6k
2.2k
2.5k
2.8k
2.5k
2.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Angular

Angular

One framework. Mobile & desktop.
+12.2k☆
2017, GitHub で 12.2k スターを獲得した Angular は categories-share.framework 部門で 3 位。 Tweet
827
949
1.4k
1.0k
884
911
983
989
925
1.1k
1.2k
930
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Preact

Preact

⚛️ Fast 3kB React alternative with the same modern API. Components & Virtual DOM.
+10.4k☆
2017, GitHub で 10.4k スターを獲得した Preact は categories-share.framework 部門で 4 位。 Tweet
779
498
575
634
829
920
729
2.0k
1.9k
545
401
532
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Hyperapp

Hyperapp

1 KB JavaScript library for building web applications.
+8.1k☆
2017, GitHub で 8.1k スターを獲得した Hyperapp は categories-share.framework 部門で 5 位。 Tweet
1.2k
779
148
113
2.1k
671
321
746
333
189
1.5k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
dva

dva

🌱 React and redux based, lightweight and elm-style framework. (Inspired by elm and choo)
+5.3k☆
2017, GitHub で 5.3k スターを獲得した dva は categories-share.framework 部門で 6 位。 Tweet
315
403
463
402
387
384
447
525
463
405
551
510
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Inferno

Inferno

An extremely fast, React-like JavaScript library for building modern user interfaces
+4.6k☆
2017, GitHub で 4.6k スターを獲得した Inferno は categories-share.framework 部門で 7 位。 Tweet
1.6k
396
375
237
276
193
239
364
500
151
149
116
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Moon

Moon

🌙 ⚡️ A minimal, blazing fast UI library.
+3.7k☆
2017, GitHub で 3.7k スターを獲得した Moon は categories-share.framework 部門で 8 位。 Tweet
20
356
226
403
1.9k
566
98
96
73
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Angular 1

Angular 1

AngularJS - HTML enhanced for web apps!
+3.6k☆
2017, GitHub で 3.6k スターを獲得した Angular 1 は categories-share.framework 部門で 9 位。 Tweet
381
388
392
277
365
347
323
317
270
217
203
130
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Rax

Rax

A universal React-compatible render engine.
+2.6k☆
2017, GitHub で 2.6k スターを獲得した Rax は categories-share.framework 部門で 10 位。 Tweet
1.1k
268
119
124
100
98
122
104
328
87
77
80
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

しばらくの間「フロントエンドフレームワーク」は熾烈なバトルフィールの様相を呈するカテゴリでしたが、いまや事態は沈静化し、3強がゲームを支配している状況です。

3強:Vue, React, Angular

UI フレームワーク3強はご想像通り、 Vue.jsReactAngular です。いま、ひとまとめに「フレームワーク」と呼びましたが、厳密には、フレームワークは Angular のみで、Vue.jsReact は「ライブラリ」と呼ばれるものです。

「2017年人気プロジェクトランキング」で Vue.js とそのアプローチが広く受け入れられた要因についてすこし考えてみましたが、Vue.js と比較すると React のアプローチはまだ統一されているとはいえず、view レイヤーにまつわる次のような問題について開発者は慎重に判断しなければなりません。

  • ページ間のルーティング
  • データをどのように取得するか?
  • フォームとデータをどのようにバインドするか?
  • アプリケーションの状態(ステート)をどのように保持するか?

これとは対照的に、Angular のエコシステムは制約がもっと強くて、より堅牢です。いわば「Angular の流儀」が存在します。おそらくこのことが Angular に「コーポレート」なイメージを与えているのかもしれません。また、バックエンド開発者にお馴染みの C# や Java を連想させる、TypeScript の静的型付けがこのイメージを強調してきました。

レス・イズ・モア

このカテゴリで3強を追う4位となったのは、Preact という興味深い結果です。PreactReact のコンパクトなオルタナです。React と同じ ES6 API を完全にサポートしつつ、サイズが 3KB 未満と軽量です。Preact を含めたフレームワークの多くが3強との差別化で強調するのは、少ないメモリーで、高速にブラウザ上で動作する点です。この典型例が Hyperapp で、いまもっとも熱いプロジェクトのひとつです。関数型のパラダイムを取り入れ、React の JSX シンタックスを採用し、Redux にインスパイヤされた状態管理システムを備えています。

Node.jsフレームワーク

1
Express

Express

Fast, unopinionated, minimalist web framework for node.
+6.7k☆
2017, GitHub で 6.7k スターを獲得した Express は categories-share.nodejsframework 部門で 1 位。 Tweet
542
586
613
587
583
552
512
525
485
610
560
524
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Koa

Koa

Expressive middleware for node.js using ES2017 async functions
+5.8k☆
2017, GitHub で 5.8k スターを獲得した Koa は categories-share.nodejsframework 部門で 2 位。 Tweet
422
510
609
486
479
489
421
517
465
441
481
460
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Fastify

Fastify

Fast and low overhead web framework, for Node.js
+5.8k☆
2017, GitHub で 5.8k スターを獲得した Fastify は categories-share.nodejsframework 部門で 3 位。 Tweet
109
15
87
56
17
91
99
60
2.1k
2.2k
611
342
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Gun

Gun

A realtime, decentralized, offline-first, graph database engine.
+3.2k☆
2017, GitHub で 3.2k スターを獲得した Gun は categories-share.nodejsframework 部門で 4 位。 Tweet
181
234
128
106
223
1.3k
162
183
87
128
198
184
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
micro

micro

Asynchronous HTTP microservices
+3.2k☆
2017, GitHub で 3.2k スターを獲得した micro は categories-share.nodejsframework 部門で 5 位。 Tweet
434
277
272
252
273
177
244
419
230
198
223
157
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Keystone

Keystone

node.js cms and web app framework
+3.0k☆
2017, GitHub で 3.0k スターを獲得した Keystone は categories-share.nodejsframework 部門で 6 位。 Tweet
289
279
289
252
250
252
314
264
193
225
197
235
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Nest

Nest

A progressive Node.js framework for building efficient and scalable server-side applications on top
+3.0k☆
2017, GitHub で 3.0k スターを獲得した Nest は categories-share.nodejsframework 部門で 7 位。 Tweet
296
120
61
165
391
667
429
385
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Feathers

Feathers

A REST and realtime API layer for modern applications.
+3.0k☆
2017, GitHub で 3.0k スターを獲得した Feathers は categories-share.nodejsframework 部門で 8 位。 Tweet
305
273
280
257
293
258
250
234
190
232
226
165
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Server.js

Server.js

Simple and powerful server for Node.js
+2.9k☆
2017, GitHub で 2.9k スターを獲得した Server.js は categories-share.nodejsframework 部門で 9 位。 Tweet
17
10
4
8
3
17
10
8
1
34
2.7k
131
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Meteor

Meteor

Meteor, the JavaScript App Platform
+2.6k☆
2017, GitHub で 2.6k スターを獲得した Meteor は categories-share.nodejsframework 部門で 10 位。 Tweet
213
197
234
275
289
216
190
189
172
246
195
199
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

JavaScript は web アプリケーションのフロントエンドを実装するためだけの言語ではなく、バックエンドでも利用が広がっています。 node.js コミュニティで影響力のあるメンバーのひとり、Mikeal RogersNode.js は一年以内に Java を凌駕する と予言しています。

しかし、長い時間を経てデファクトスタンダードが確立された他の言語(Ruby の Ruby on Rails、Python の Django、PHP の Laravel)とは異なり、node.js にはスタンダードや推奨されるアーキテクチャといったものがいまだに存在しません。

node.js の歴史を鑑みても、Express が唯一支持されている node.js フレームワークというわけではありませんが、Feathers, KeystoneNest などのフレームワークや CMS の基幹として相変わらず広く利用されています。

Express のミニマリストなアプローチは、昨今トレンドのマイクロサービス(モノリスな単体アプリより、コンパクトなアプリケーションの疎結合な集積を推奨する考え方)に非常にフィットしているようです。

2017年は、3つの新たなプロジェクトが node.js フレームワークのトップ 10 にランクインしました。

  • Hapi にインスパイヤされた汎用 web フレームワークの Fastify は、どちらかというと JSON ベースの高速な HTTP APIs の構築に向いています。
  • Server.js は「箱からだしたらすぐ使える」的な体験を志向したフレームワークです。
  • Nest は、モジュールとコントローラからなる Angular 開発者にはとっつきやすいアーキテクチャを採用しています。また、TypeScript で実装されています。

Reactボイラープレート

1
Create React App

Create React App

Create React apps with no build configuration.
+22.5k☆
2017, GitHub で 22.5k スターを獲得した Create React App は categories-share.react 部門で 1 位。 Tweet
2.1k
1.8k
2.3k
1.8k
2.2k
1.8k
1.9k
2.3k
1.5k
1.7k
1.7k
1.5k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Ant Design

Ant Design

🐜 A UI Design Language
+13.3k☆
2017, GitHub で 13.3k スターを獲得した Ant Design は categories-share.react 部門で 2 位。 Tweet
936
1.1k
971
910
928
941
1.1k
887
1.2k
1.3k
1.6k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Next.js

Next.js

Framework for server-rendered or statically-exported React apps
+12.7k☆
2017, GitHub で 12.7k スターを獲得した Next.js は categories-share.react 部門で 3 位。 Tweet
893
664
2.1k
1.3k
1.2k
745
1.2k
856
697
1.2k
864
960
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Storybook

Storybook

Interactive UI component dev & test: React, React Native, Vue, Angular
+9.7k☆
2017, GitHub で 9.7k スターを獲得した Storybook は categories-share.react 部門で 4 位。 Tweet
467
429
666
627
807
940
704
1.0k
671
837
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
2017, GitHub で 9.7k スターを獲得した Gatsby は categories-share.react 部門で 5 位。 Tweet
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Material UI

Material UI

React components that implement Google's Material Design.
+9.6k☆
2017, GitHub で 9.6k スターを獲得した Material UI は categories-share.react 部門で 6 位。 Tweet
641
749
833
842
816
757
883
796
701
848
864
918
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
React Navigation

React Navigation

Learn once, navigate anywhere
+8.8k☆
2017, GitHub で 8.8k スターを獲得した React Navigation は categories-share.react 部門で 7 位。 Tweet
1.6k
910
846
646
822
612
586
494
535
609
632
486
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
React Router

React Router

Declarative routing for React
+8.7k☆
2017, GitHub で 8.7k スターを獲得した React Router は categories-share.react 部門で 8 位。 Tweet
690
748
1.1k
747
762
647
710
725
572
662
673
666
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Create React Native App

Create React Native App

Create a React Native app on any OS with no build config.
+7.7k☆
2017, GitHub で 7.7k スターを獲得した Create React Native App は categories-share.react 部門で 9 位。 Tweet
56
34
3.4k
637
498
493
476
478
393
438
403
363
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Ant Design Pro

Ant Design Pro

👨🏻‍💻👩🏻‍💻 An out-of-box UI solution for enterprise applications
+5.7k☆
2017, GitHub で 5.7k スターを獲得した Ant Design Pro は categories-share.react 部門で 10 位。 Tweet
2.9k
1.1k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
11
React boilerplate

React boilerplate

A highly scalable, offline-first foundation with the best developer experience and a focus on
+5.3k☆
2017, GitHub で 5.3k スターを獲得した React boilerplate は categories-share.react 部門で 11 位。 Tweet
721
607
557
503
413
380
401
351
330
391
343
338
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
12
Recompose

Recompose

A React utility belt for function components and higher-order components.
+5.0k☆
2017, GitHub で 5.0k スターを獲得した Recompose は categories-share.react 部門で 12 位。 Tweet
301
282
439
426
597
467
437
481
437
396
393
379
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
13
react-loadable

react-loadable

A higher order component for loading components with promises.
+4.9k☆
2017, GitHub で 4.9k スターを獲得した react-loadable は categories-share.react 部門で 13 位。 Tweet
499
262
212
377
307
285
178
553
511
471
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
14
NativeBase

NativeBase

Essential cross-platform UI components for React Native
+4.4k☆
2017, GitHub で 4.4k スターを獲得した NativeBase は categories-share.react 部門で 14 位。 Tweet
315
546
433
414
403
381
344
335
322
272
311
326
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
15
Enzyme

Enzyme

JavaScript Testing utilities for React
+4.4k☆
2017, GitHub で 4.4k スターを獲得した Enzyme は categories-share.react 部門で 15 位。 Tweet
322
362
369
399
342
325
341
344
380
411
408
382
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

React は表示レイヤーのライブラリで、変化の激しい React のエコシステムを生み出しています。 このカテゴリーには ReactReact Native 上で動作するライブラリーを取り上げています。

2016年、Create React App は「どうやって React アプリケーション開発をはじめるか」という問題を、「いい感じの設定」をパッケージ化して提供することで解決しました。 Facebook は Create React App の新しいバージョンを継続的にしかも頻繁にリリースしていて、2017年の React エコシステムにおいて圧倒的な人気補を誇っています。

React の成功例としては StackBlitz をあげることができます。 オンラインの IDE で、Create React App で作成したアプリケーションをわずか数秒でブラウザーから実行することができます。

Create React App がデフォルトのスターターキットとなっても、開発者はもっとマニアックなスターターキットが必要になることがあります。 React boilerplate はこの領域でとても人気のあるプロジェクトで、GraphQL をはじめ多数の機能を提供しています。

Ant DesignAnt Design ProMaterial UI は React のスタイル適用済みコンポーネント(styled component)を提供していて、 開発者がスタイルについて心配することなく開発できる機能を提供しています。

Recompose の人気からは React の ある 機能が熟練の開発者に愛されてることを示しています。 その機能は関数型アプローチで、Recompose はすべてのものは関数で表現できるという関数型の世界へ通じるヘルパー関数を提供しています。

Vue Ecosystem

1
Element

Element

A Vue.js 2.0 UI Toolkit for Web
+14.9k☆
2017, GitHub で 14.9k スターを獲得した Element は categories-share.vue 部門で 1 位。 Tweet
1.4k
1.2k
1.8k
1.2k
1.1k
1.0k
1.1k
1.1k
1.3k
1.4k
1.3k
1.1k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
iView

iView

A high quality UI Toolkit built on Vue.js 2.0
+9.5k☆
2017, GitHub で 9.5k スターを獲得した iView は categories-share.vue 部門で 2 位。 Tweet
351
613
485
566
929
626
576
1.3k
788
585
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Vuex

Vuex

🗃️ Centralized State Management for Vue.js.
+7.2k☆
2017, GitHub で 7.2k スターを獲得した Vuex は categories-share.vue 部門で 3 位。 Tweet
547
597
713
632
588
579
553
582
600
569
638
555
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
2017, GitHub で 6.5k スターを獲得した Weex は categories-share.vue 部門で 4 位。 Tweet
26
116
1.4k
839
764
668
550
563
608
538
456
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Nuxt

Nuxt

Versatile Vue.js Framework
+6.3k☆
2017, GitHub で 6.3k スターを獲得した Nuxt は categories-share.vue 部門で 5 位。 Tweet
164
354
625
515
537
481
592
732
532
606
635
498
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Vuetify

Vuetify

Material Component Framework for Vue.js 2
+6.3k☆
2017, GitHub で 6.3k スターを獲得した Vuetify は categories-share.vue 部門で 6 位。 Tweet
322
191
363
385
402
360
569
554
1.1k
777
615
585
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Mint UI

Mint UI

Mobile UI elements for Vue.js
+5.5k☆
2017, GitHub で 5.5k スターを獲得した Mint UI は categories-share.vue 部門で 7 位。 Tweet
116
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
vux

vux

Mobile UI Components based on Vue & WeUI
+4.6k☆
2017, GitHub で 4.6k スターを獲得した vux は categories-share.vue 部門で 8 位。 Tweet
306
382
510
392
361
383
394
399
373
311
409
426
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
vue-router

vue-router

🚦 The official router for Vue.js.
+4.6k☆
2017, GitHub で 4.6k スターを獲得した vue-router は categories-share.vue 部門で 9 位。 Tweet
408
400
460
411
396
407
370
352
374
403
351
313
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Vue material

Vue material

Material design for Vue.js
+3.7k☆
2017, GitHub で 3.7k スターを獲得した Vue material は categories-share.vue 部門で 10 位。 Tweet
328
405
449
320
307
304
303
293
251
273
245
234
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

スペシャルゲスト: Evan You

Vue.js の良さは分かっているつもりですが、その良さが何に起因しているのかまでは正直よく理解できていないのかもしれません。

そこで専門家の意見を仰ごうというわけなのですが、Vue.js のクリエイターご本人に勝る適任者がいるのかと思い至ったのです。

Vue 自身の人気の高まるのにともない、2017年は Vue のエコシステムも急速な成長を遂げた1年となりました。

ElementiView は Vue の2大人気 UI コンポーネントライブラリで、デスクトップ UI の高速な開発に焦点を合わせています。 Mint UIvux はモバイル UI に的を絞った2大人気 UI コンポーネントライブラリです。

Vuetify はマテリアルデザインのコンポーネントフレームワークでモバイル・デスクトップの両方に対応しています。 とても高機能でサーバーサイドレンダリング、PWA、CLI テンプレートなどもサポートしています。 Vue material はマテリアルデザインのスペックに厳密に対応することにフォーカスをあてているライブラリです。

Nuxt は Vue を内包しているフレームワークで、とてもスムーズに Vue のユニバーサルアプリケーションやサーバーサイドレンダリングの開発を体験できます。 とても高機能で、同じコードベースで通常の SPA や、静的サイトを生成することもできます。

Weex はなじみの Vue シンタックスや API を使ってモバイルのネイティブアプリケーション開発ができるフレームワークです。 Alibaba によって開発されていて、パフォーマンスにフォーカスされていることから、大量のユーザーをかかえる実際の製品にも使用されています。

モバイル

1
React Native

React Native

A framework for building native apps with React.
+15.6k☆
2017, GitHub で 15.6k スターを獲得した React Native は categories-share.mobile 部門で 1 位。 Tweet
1.2k
1.3k
1.6k
1.3k
1.3k
1.3k
1.3k
1.2k
1.1k
1.2k
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Weex

Weex

A framework for building Mobile cross-platform UI.
+6.5k☆
2017, GitHub で 6.5k スターを獲得した Weex は categories-share.mobile 部門で 2 位。 Tweet
26
116
1.4k
839
764
668
550
563
608
538
456
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+5.5k☆
2017, GitHub で 5.5k スターを獲得した Ionic は categories-share.mobile 部門で 3 位。 Tweet
500
443
515
530
509
437
439
419
421
465
510
311
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Quasar

Quasar

Quasar Framework
+3.7k☆
2017, GitHub で 3.7k スターを獲得した Quasar は categories-share.mobile 部門で 4 位。 Tweet
17
297
341
244
314
266
298
397
360
343
301
331
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+2.9k☆
2017, GitHub で 2.9k スターを獲得した NativeScript は categories-share.mobile 部門で 5 位。 Tweet
241
224
245
238
255
224
217
211
299
280
271
233
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

JavaScript の汎用性は非常に高く、それはモバイルアプリケーションの世界も例外ではありません。JavaScript で実装すれば、web とモバイルプラットフォームでコンポーネントをシェアできます。

フロントエンドフレームワークの3強は、モバイルの分野でも3強という結果になりました。

2016年同様、もっとも人気を博した JavaScript ベースのモバイルアプリのソリューションは React Native でした。iOS, Android, Windows のいずれの OS でもネイティブアプリをビルドできます。

Cross platform apps with React Nativeで強調されているように、"Write Once, Run Everywhere" -「一度コードを書けば、どこでも実行できる」- というスローガンがまさに現実のものとなりました!

コンパイラ

1
TypeScript

TypeScript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
+11.6k☆
2017, GitHub で 11.6k スターを獲得した TypeScript は categories-share.compiler 部門で 1 位。 Tweet
738
855
972
1.1k
928
936
976
1.0k
818
1.2k
1.1k
992
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Babel

Babel

Babel is a compiler for writing next generation JavaScript.
+5.7k☆
2017, GitHub で 5.7k スターを獲得した Babel は categories-share.compiler 部門で 2 位。 Tweet
390
382
447
395
361
336
371
412
397
564
1.1k
587
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Flow

Flow

Adds static typing to JavaScript to improve developer productivity and code quality.
+5.1k☆
2017, GitHub で 5.1k スターを獲得した Flow は categories-share.compiler 部門で 3 位。 Tweet
335
303
505
577
484
447
381
420
372
433
392
417
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+2.1k☆
2017, GitHub で 2.1k スターを獲得した Reason は categories-share.compiler 部門で 4 位。 Tweet
186
79
186
143
115
85
72
151
284
266
201
395
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Purescript

Purescript

A strongly-typed language that compiles to Javascript
+1.2k☆
2017, GitHub で 1.2k スターを獲得した Purescript は categories-share.compiler 部門で 5 位。 Tweet
123
77
96
101
63
96
92
106
99
121
123
108
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
ClojureScript

ClojureScript

Clojure to JS compiler
+1.0k☆
2017, GitHub で 1.0k スターを獲得した ClojureScript は categories-share.compiler 部門で 6 位。 Tweet
73
59
83
75
54
72
81
70
59
56
54
46
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
CoffeeScript

CoffeeScript

Unfancy JavaScript
+896☆
2017, GitHub で 896 スターを獲得した CoffeeScript は categories-share.compiler 部門で 7 位。 Tweet
77
78
63
98
71
62
70
70
118
96
56
37
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Elm

Elm

Compiler for Elm, a functional language for reliable webapps.
+880☆
2017, GitHub で 880 スターを獲得した Elm は categories-share.compiler 部門で 8 位。 Tweet
71
51
82
53
62
56
51
50
55
63
55
61
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

ここではコンパイラについてみていきましょう。

アプリケーションのビルドにおいてコンパイラが必要となるのは、つぎの2つの理由からではないでしょうか。

  • JavaScript (ES7) の最新ヴァージョンの機能をフルに堪能したいが、可能な限り多様なブラウザに対応させたい。これを実現したのが Babel で、現在では多くのプロジェクトに採用されています。
  • 型判定のような新しい機能を追加したい。

いま、デべロッパーを二分するもっとも熱い議論のひとつが「型は必要か?」です。

JavaScript は動的型付けであり、静的型付けではありません。しかし、デベロッパーの多くは自分の書くコードに型は必要だと感じています。特にコードベースが肥大化してくると、堅牢性と可読性を配慮してなおさらそう感じるでしょう。

型が必要だと感じているデベロッパーが現在注目しているのは、Microsoft の TypeScript と Facebook の Flow です(Flow は Facebook のメインプロジェクトである React, React Native, Jest などで使われています)。

TypeScriptFlow の違いを知りたい向きには、James KyleA Comparison Between Adopting Flow or TypeScript をお薦めしておきます。

ビルドツール

1
Parcel

Parcel

📦🚀 Blazing fast, zero configuration web application bundler
+14.0k☆
2017, GitHub で 14.0k スターを獲得した Parcel は categories-share.build 部門で 1 位。 Tweet
1
1
13.9k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Webpack

Webpack

A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting a
+13.1k☆
2017, GitHub で 13.1k スターを獲得した Webpack は categories-share.build 部門で 2 位。 Tweet
1.4k
1.2k
1.2k
1.1k
1.1k
1.2k
1.1k
995
714
1.0k
1.0k
1.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Gulp

Gulp

The streaming build system
+3.6k☆
2017, GitHub で 3.6k スターを獲得した Gulp は categories-share.build 部門で 3 位。 Tweet
344
313
376
391
303
254
291
302
237
286
270
228
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Rollup

Rollup

Next-generation ES6 module bundler
+3.5k☆
2017, GitHub で 3.5k スターを獲得した Rollup は categories-share.build 部門で 4 位。 Tweet
338
267
270
498
288
289
254
260
200
203
297
362
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Poi

Poi

Delightful web development.
+2.7k☆
2017, GitHub で 2.7k スターを獲得した Poi は categories-share.build 部門で 5 位。 Tweet
127
132
94
129
82
78
54
165
178
200
1.3k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
FuseBox

FuseBox

A blazing fast js bundler/loader with a comprehensive API
+2.5k☆
2017, GitHub で 2.5k スターを獲得した FuseBox は categories-share.build 部門で 6 位。 Tweet
109
1.3k
185
76
107
276
81
92
94
100
60
75
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Browserify

Browserify

browser-side require() the node.js way
+1.1k☆
2017, GitHub で 1.1k スターを獲得した Browserify は categories-share.build 部門で 7 位。 Tweet
101
90
81
103
94
77
72
82
76
89
94
92
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

2017年最大のサプライズは、ビルドツール Parcel の登場だったかもしれません。この年の8月に Github にローンチされて以来、すでに 14,000 を超えるスターを獲得しています。

Parcel はモダンな web 開発のいいとこ取りなツールであり、特に「ゼロ・コンフィグレーション」が最大の特徴になっています。

"loaders" と呼ばれるプラグインからなるエコシステムに依存する Webpack との最大の違いもここにあります。

とは言え、定量的な視点からみれば Webpack は現在もっとも人気のある、モダンアプリケーションのためのバンドラーであることにかわりはなく、Github のスター数はトータルで 35,000 を数え、コントリビュータも500 を超えています。

Webpack は多くのプロジェクトで利用されています。例えば、2017 年もっとも人気のあった Create React AppGatsby もその一例です。

Webpack は進化し続けています。ヴァージョン2 では "Code Splitting" のような機能が、dynamic import をつかって簡単に実装できるようになりました。

WebpackParcel が web アプリケーション のビルドプロセスをターゲットにしているのに対し、Rollupライブラリ をターゲットにしています。ES6 モジュールを活用して、パフォーマンス改善にフォーカスしてます。

いくつかのメジャーなライブラリで Rollup が採用されています。2017年に React チームがビルドシステムを Browserify から Rollup へマイグレートしたことは特筆に値するでしょう。

React blog から引用。

Rollup は React のような、プレビルドしてアプリにインテグレートするようなライブラリと非常に相性がいい。

Parcel と同じゴールを目指すのが Poi です。Poi もモダンな web アプリケーションとライブラリのためのビルドツールです。デフォルトでゼロ・コンフィグレーションですが、プリセットという仕組みを使って拡張が可能です。

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

1
Jest

Jest

🃏 Delightful JavaScript Testing.
+7.1k☆
2017, GitHub で 7.1k スターを獲得した Jest は categories-share.testframework 部門で 1 位。 Tweet
498
519
647
549
884
499
549
476
473
705
664
675
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
AVA

AVA

Futuristic JavaScript test runner
+4.8k☆
2017, GitHub で 4.8k スターを獲得した AVA は categories-share.testframework 部門で 2 位。 Tweet
1.0k
522
452
377
358
304
315
303
260
321
294
245
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Mocha

Mocha

☕️ simple, flexible, fun javascript test framework for node.js & the browser
+3.1k☆
2017, GitHub で 3.1k スターを獲得した Mocha は categories-share.testframework 部門で 3 位。 Tweet
242
253
266
244
251
230
231
259
238
269
295
287
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Jasmine

Jasmine

Simple JavaScript testing framework for browsers and node.js
+1.2k☆
2017, GitHub で 1.2k スターを獲得した Jasmine は categories-share.testframework 部門で 4 位。 Tweet
93
95
128
97
106
94
96
120
88
76
109
83
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Tape

Tape

tap-producing test harness for node and browsers
+1.0k☆
2017, GitHub で 1.0k スターを獲得した Tape は categories-share.testframework 部門で 5 位。 Tweet
149
90
135
105
91
63
65
70
79
54
57
51
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

2016 年に予言したように(予言が的中したはこれが初めてですが・・・)、2017 年はJestがテスティングフレームワークの覇者となりました。

当初、React コンポーネントをテストするフレームワークとして Facebook が開発したのが、その後数ヶ月で進化を加速させ(すでにメジャーバージョンがリリースは 22 回!)、現在は、フロントエンド、バックエンドともに利用できるようになりました。

Jest の素晴らしさをまとめると、

  • コンフィグレーションが不要。デフォルト設定で大概のことがカバー可能。
  • 優れた開発者エクスペリエンス(Smart watch モード、的を得たエラーリポーティングなど)。
  • Mocha に似たシンタックス。itdescribe など開発者にとって馴染みがあり学習コストが低い。
  • アサーションを書くのに特別な外部ライブラリを必要とせず、いわば「バッテリー内蔵」仕様である。
  • UI の変更を自動で記録、検知してくれる「スナップショット」モード。

昨年首位だった AVA は、2017 年は2位でした。でも、依然として支持されているフレームワークのひとつです。

AVA のクリエータ Sindre Sorhus は、自らのプロジェクトのすべてを AVA でテストしています。彼のプロジェクトに優れたものが多いのはそのせいかもしれませんね。

テストを並列で高速に実行できるのも AVA の魅力です。くわえて軽量で、ソフトウェアテスト規格におおむね準じており、シンタックスは Tape に似ています。

統合開発環境(IDE)

1
VS Code

VS Code

Visual Studio Code
+20.2k☆
2017, GitHub で 20.2k スターを獲得した VS Code は categories-share.ide 部門で 1 位。 Tweet
897
1.4k
1.8k
1.7k
1.5k
1.3k
1.4k
1.6k
1.6k
2.5k
2.6k
1.8k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Atom

Atom

The hackable text editor
+9.1k☆
2017, GitHub で 9.1k スターを獲得した Atom は categories-share.ide 部門で 2 位。 Tweet
838
766
764
604
798
695
774
871
921
763
724
557
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Reactide

Reactide

Reactide is the first dedicated IDE for React web application development. http://reactide.io
+7.4k☆
2017, GitHub で 7.4k スターを獲得した Reactide は categories-share.ide 部門で 3 位。 Tweet
2.2k
181
109
66
76
34
71
38
73
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Brackets

Brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
+1.9k☆
2017, GitHub で 1.9k スターを獲得した Brackets は categories-share.ide 部門で 4 位。 Tweet
138
164
233
142
172
126
189
161
192
142
112
106
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Nuclide

Nuclide

An open IDE for web and native mobile development, built on top of Atom
+1.4k☆
2017, GitHub で 1.4k スターを獲得した Nuclide は categories-share.ide 部門で 5 位。 Tweet
152
167
154
152
145
101
127
75
123
68
82
76
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

ここでは、オープンソースであり web テクノロジでビルドされたテキストエディタ(Sublime ユーザには申し訳ありませんが)を話題にします。

2016年はこのカテゴリで、Microsoft の VS Code と Github の Atom が互角でした。

2017年も同様、この2強がカテゴリをリードしてきましたが、VS Code に一日の長がありました。

VS Code の新バージョンがマンスリーでリリースされるたびに、IDE として有用な機能がつぎつぎと追加されていき、しかもパフォーマンスへの影響がほぼありませんでした。 注目すべき機能を幾つかあげると、

  • Git とのインテグレーション
  • オートコンプリート: JavaScript シンタックス、requireimport のモジュールパス、NPM パッケージ名など
  • React シンタックスのインテグレーション

またここに Prettier を追加すれば、ファイルを保存したタイミングでシンタックスを自動整形してくれます。コードを書く楽しみにとって最強のコンボといえます。

CSS in JavaScript

1
Styled Components

Styled Components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without
+8.7k☆
2017, GitHub で 8.7k スターを獲得した Styled Components は categories-share.cssinjs 部門で 1 位。 Tweet
852
545
899
861
874
744
703
697
625
677
555
703
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
CSS Modules

CSS Modules

Documentation about css-modules
+2.9k☆
2017, GitHub で 2.9k スターを獲得した CSS Modules は categories-share.cssinjs 部門で 2 位。 Tweet
234
227
272
234
313
307
246
254
194
210
234
217
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Polished

Polished

A lightweight toolset for writing styles in JavaScript ✨
+2.9k☆
2017, GitHub で 2.9k スターを獲得した Polished は categories-share.cssinjs 部門で 3 位。 Tweet
518
262
210
139
96
94
129
96
103
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Glamorous

Glamorous

💄 Maintainable CSS with React
+2.9k☆
2017, GitHub で 2.9k スターを獲得した Glamorous は categories-share.cssinjs 部門で 4 位。 Tweet
531
273
206
196
292
139
151
120
165
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Emotion

Emotion

⚡️ The Next Generation of CSS-in-JS
+2.5k☆
2017, GitHub で 2.5k スターを獲得した Emotion は categories-share.cssinjs 部門で 5 位。 Tweet
488
257
190
352
186
298
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Styled JSX

Styled JSX

Full CSS support for JSX without compromises
+1.7k☆
2017, GitHub で 1.7k スターを獲得した Styled JSX は categories-share.cssinjs 部門で 6 位。 Tweet
125
133
216
138
163
105
123
76
92
231
135
129
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Aphrodite

Aphrodite

Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum
+1.5k☆
2017, GitHub で 1.5k スターを獲得した Aphrodite は categories-share.cssinjs 部門で 7 位。 Tweet
167
117
161
194
172
135
101
99
91
85
62
91
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Glamor

Glamor

inline css for react et al
+1.3k☆
2017, GitHub で 1.3k スターを獲得した Glamor は categories-share.cssinjs 部門で 8 位。 Tweet
208
92
100
140
192
92
122
98
56
75
69
69
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
JSS

JSS

JSS is an authoring tool for CSS which uses JavaScript as a host language.
+1.3k☆
2017, GitHub で 1.3k スターを獲得した JSS は categories-share.cssinjs 部門で 9 位。 Tweet
94
107
107
94
101
107
115
94
89
120
142
126
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
Radium

Radium

A toolchain for React component styling.
+1.2k☆
2017, GitHub で 1.2k スターを獲得した Radium は categories-share.cssinjs 部門で 10 位。 Tweet
144
120
112
126
99
92
89
88
68
81
106
68
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

React コンポーネンをどうスタイル(style)するか、そのコンセンサスはいまだ存在していません。

わりと「標準」なのがお望みで、それほどカスタマイズの必要がないなら、Material UIAnt Design といった出来合いのコンポーネントツールキットが利用できるでしょう。

もうすこし柔軟性が必要で「古いやり方」に抵抗がないなら、BootstrapBulma のような CSS ツールキットでグローバルな CSS スタイルを使い、適切な className をコンポーネントに割り当てることができます。しかしそうすると、コンポーネントはもはや自己完結せず、コンポーネントのスタイルは外部から管理されることになります。

こうした課題に焦点を当てるべく「CSS in JavaScript」カテゴリを追加しました。

コンセプトはいたってシンプルです。React コンポーネントのロジックとテンプレートの双方を JavaScript で管理しているなら、さらに進んで、スタイリングも JavaScript でコンポーネントにカプセル化してみては?ということです。

2017年、このカテゴリでもっとも人気のあったプロジェクトは Styled Components です。ECMAScript 6 で追加された「タグ付きテンプレートリテラル」("Tagged Template Literals") を利用して、標準的な CSS シンタックスを React コンポーネントに埋め込めむことが可能になります。

次点は CSS Modules でした。Styled Components と比較すると、よりハイブリッドなアプローチを採用しています。スタイルの記述はデベロッパの嗜好(標準CSS, Sass, Less, Stylus)に委ねています。スタイルを記述したファイルを関連すコンポーネントと並べて配置することで、コンポーネントにスタイルをインポートすることができます。

CSS Modules のクリエータのひとり Mark Dalgleish は、CSS-in-JavaScript なアプローチに関して非常に興味深い記事 A Unified Styling Language を書いています。この分野の技術に少々懐疑的な方に特にお薦めの記事です。

静的サイトジェネレータ

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
2017, GitHub で 9.7k スターを獲得した Gatsby は categories-share.ssg 部門で 1 位。 Tweet
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Hexo

Hexo

A fast, simple & powerful blog framework, powered by Node.js.
+6.2k☆
2017, GitHub で 6.2k スターを獲得した Hexo は categories-share.ssg 部門で 2 位。 Tweet
664
519
609
487
469
431
494
537
471
509
476
486
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
React Static

React Static

⚛️ 🚀 A progressive static-site generator for React.
+3.0k☆
2017, GitHub で 3.0k スターを獲得した React Static は categories-share.ssg 部門で 3 位。 Tweet
2.2k
341
338
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Phenomic

Phenomic

Modular website compiler ⚡️
+1.4k☆
2017, GitHub で 1.4k スターを獲得した Phenomic は categories-share.ssg 部門で 4 位。 Tweet
140
392
123
103
127
125
92
59
50
77
42
67
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Metalsmith

Metalsmith

An extremely simple, pluggable static site generator.
+1.0k☆
2017, GitHub で 1.0k スターを獲得した Metalsmith は categories-share.ssg 部門で 5 位。 Tweet
107
90
72
85
82
72
136
73
81
72
80
61
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

静的サイトジェネレータ(Static Site Gennerator, 略して "SSG")は .html, .css, JavaScript ファイル一式を生成するツールで、厄介なデータベースのセットアップなしで web サーバにコンテンツをデプロイできます。 静的な web サイトは高速、堅牢で運用も楽です。

2016 年は 2 位の座に甘んじた Gatsby でしたが、2017 年はリベンジを果たしました。静的サイトを最適化する魅力的な機能が満載です。

  • ファーストブラウジング & エクスポーティング
  • アグレッシブ・プリローディング
  • インテリジェント・コード・スプリティング(テンプレート+ページデータ)

Gatsby は view レイヤーに React を、またビルド時のコンテンツのクエリーに GraphQL を採用しています。 Gatsby にはしっかりしたコミュニティがあり、また React official web site は Gatsby でビルドされています。

2017年の静的サイトジェネレータのニューカマーは React Static です。 Gatsby の軽量版で、 パフォーマンスとシンプルさにフォーカスしています。Create React App プロジェクトにインスパイヤされ登場しました。

ちなみに、Next.jsNuxt が静的サイトジェネレータとしても利用できることをここに記しておきます。

GraphQL

1
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+9.7k☆
2017, GitHub で 9.7k スターを獲得した Gatsby は categories-share.graphql 部門で 1 位。 Tweet
717
481
508
438
573
505
2.1k
664
698
1.1k
796
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
React Starter Kit

React Starter Kit

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post
+4.3k☆
2017, GitHub で 4.3k スターを獲得した React Starter Kit は categories-share.graphql 部門で 2 位。 Tweet
414
371
363
417
449
358
350
367
308
347
313
258
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Apollo client

Apollo client

A fully-featured, production ready caching GraphQL client for every UI framework and GraphQ
+4.1k☆
2017, GitHub で 4.1k スターを獲得した Apollo client は categories-share.graphql 部門で 3 位。 Tweet
64
338
348
285
295
327
295
331
414
438
393
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
GraphQL

GraphQL

GraphQL is a query language and execution engine tied to any backend service.
+2.8k☆
2017, GitHub で 2.8k スターを獲得した GraphQL は categories-share.graphql 部門で 4 位。 Tweet
127
165
266
250
323
250
220
210
250
244
212
276
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
GraphiQL

GraphiQL

An in-browser IDE for exploring GraphQL.
+2.6k☆
2017, GitHub で 2.6k スターを獲得した GraphiQL は categories-share.graphql 部門で 5 位。 Tweet
213
222
242
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
Relay

Relay

Relay is a JavaScript framework for building data-driven React applications.
+2.5k☆
2017, GitHub で 2.5k スターを獲得した Relay は categories-share.graphql 部門で 6 位。 Tweet
157
128
193
541
201
191
212
181
161
171
148
206
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Apollo Server

Apollo Server

GraphQL server for Express, Connect, Hapi, Koa and more
+2.3k☆
2017, GitHub で 2.3k スターを獲得した Apollo Server は categories-share.graphql 部門で 7 位。 Tweet
301
199
179
208
187
211
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Graphcool

Graphcool

⚡️ Prisma turns your database into a realtime GraphQL API
+1.7k☆
2017, GitHub で 1.7k スターを獲得した Graphcool は categories-share.graphql 部門で 8 位。 Tweet
241
939
477
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
Vulcan

Vulcan

🌋 A toolkit to quickly build apps with React, GraphQL & Meteor
+1.4k☆
2017, GitHub で 1.4k スターを獲得した Vulcan は categories-share.graphql 部門で 9 位。 Tweet
127
65
109
140
138
153
149
140
91
79
88
79
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
GraphQL Playground

GraphQL Playground

🎮 GraphQL IDE for better development workflows (GraphQL Subscriptions, interactive docs & collabor
+1.3k☆
2017, GitHub で 1.3k スターを獲得した GraphQL Playground は categories-share.graphql 部門で 10 位。 Tweet
172
134
109
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

後世の歴史家たちが GraphQL の足跡をたどったのなら、2017年はひとつのターニングポイントだったと記すかもしれません。

それというのも、the New York Times のようなメジャーな企業が GraphQL の採用を開始したのを始め、ライブラリについて言えば、RelayApollo の2大クライアントライブラリがメジャーアップデートをリリースしました。

Relay と Apollo とは別に、Graphcool のような企業も GraphQL 関連のツールとライブラリを大量にリリースしました。また、Vulcan のような GraphQL をリバレッジにしたフルスタックのアプリケーションフレームワークも生態系に登場してきました。

興味深いのは、2017年でもっとも人気の高かった静的サイトジェネレータ Gatsby もまた、データ処理のシーケンスで GraphQL を利用していることです。

GraphQL を取り巻く世界に、こうして多くのプレイヤーが登場してくるのを目撃すると、REST に取って替わるテクノロジとして定着するのは、もはや時間の問題かもしれません。

番外編

1
json-server

json-server

Get a full fake REST API with zero coding in less than 30 seconds (seriously)
+9.5k☆
607
720
755
701
850
1.5k
898
809
628
655
782
671
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Feather

Feather

Simply beautiful open source icons
+9.4k☆
4.6k
504
2.7k
633
197
510
281
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Frappé Charts

Frappé Charts

📊🍩📈 Simple, responsive, modern SVG Charts with zero dependencies
+9.0k☆
8.4k
604
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
socket.io

socket.io

Realtime application framework (Node.JS server)
+8.6k☆
646
576
821
745
812
730
768
736
683
688
749
663
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Yarn

Yarn

📦🐈 Fast, reliable, and secure dependency management.
+8.4k☆
1.0k
965
941
726
755
553
511
519
593
664
549
577
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
6
SemanticUI

SemanticUI

Semantic is a UI component framework based around useful principles from natural language.
+8.3k☆
618
675
781
1.9k
683
621
570
594
444
492
492
451
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
7
Three.js

Three.js

JavaScript 3D library.
+8.3k☆
615
685
737
640
652
621
580
629
594
739
821
953
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
8
Lodash

Lodash

A modern JavaScript utility library delivering modularity, performance, & extras.
+8.0k☆
574
555
695
613
644
699
711
770
622
632
797
665
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
9
echarts

echarts

A powerful, interactive charting and visualization library for browser
+7.6k☆
384
488
676
611
634
648
737
697
614
557
892
699
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
10
anime.js

anime.js

JavaScript Animation Engine
+7.6k☆
426
351
442
601
541
613
483
574
888
875
522
1.3k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

ここまで、2017年の人気プロジェクトをカテゴリ別にみてきました。ここでは、それらカテゴリに収まらない人気プロジェクトをご紹介します。

おわりに

2017 年の JavaScript の動向を振り返ってみました。いかがでしたでしょうか?

定量的に見るとVue.jsが昨年に続き 2017 年の覇者となりました。人気はしばらく続きそうです。

ライセンス問題はあるものの React エコシステムは継続的に成長しています。

2017 年の特筆すべきプロジェクトは Prettier です。コード整形の自動化はコーディングをはかどらせます。

State of JavaScript 2017 surveyでは 23,000 を超える開発者へのアンケート結果を収集・分析しています。ここでの振り返りとは違う視点から最新のトレンドを知ることができます。

2018 年はどのプロジェクトが来るでしょうか?

  • GraphQL ベースのフレームワーク?
  • WebAssembly の新標準を使った、これまでにないブラウザ体験を実現できるライブラリ?

ぜひ、みなさんの考えを教えてください。ここに掲載した記事のシェアは自由です。Github では、みなさんからのフィードバックをお待ちしてます。最後まで読んでいただきありがとうございます。では、また来年お会いしましょう。


Japanese version

Nobuhiro Uchiyama
A generic programmer and linguist living in Osaka from Sapporo.
素朴なプログラマで言語マニア。札幌生まれの大阪在住。
Yohei Ice
Web application developer (Rails, React, ...)

Original version

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