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

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

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



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

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

1
Vue.js

Vue.js

🖖 A progressive, incrementally-adoptable JavaScript framework for building UI on the web.
+40.0k☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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月

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☆
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☆
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☆
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☆
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☆
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月

しばらくの間「フロントエンドフレームワーク」は熾烈なバトルフィールの様相を呈するカテゴリでしたが、いまや事態は沈静化し、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☆
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☆
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☆
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☆
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☆
434
277
272
252
273
177
244
419
230
198
223
157
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☆
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☆
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☆
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☆
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☆
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月

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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
123
77
96
101
63
96
92
106
99
121
123
108
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☆
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☆
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☆
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☆
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☆
127
132
94
129
82
78
54
165
178
200
1.3k
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
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☆
488
257
190
352
186
298
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☆
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☆
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☆
2.2k
341
338
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Phenomic

Phenomic

Modular website compiler ⚡️
+1.4k☆
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☆
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☆
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☆
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☆
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☆
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☆
213
222
242
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 に取って替わるテクノロジとして定着するのは、もはや時間の問題かもしれません。

おわりに

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, ...)

Authors

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