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

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

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

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

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



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

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

1
Vue.js

Vue.js

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

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+22.9k☆
1.8k
1.5k
2.2k
2.0k
1.6k
1.6k
2.0k
1.8k
2.4k
2.2k
2.1k
1.8k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Electron

Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS
+18.2k☆
1.5k
1.1k
1.8k
1.3k
3.4k
1.5k
1.3k
1.3k
1.4k
1.2k
1.2k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
React Native

React Native

A framework for building native apps with React.
+17.5k☆
1.8k
1.3k
1.8k
1.8k
1.4k
1.4k
1.4k
1.3k
1.4k
1.4k
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Redux

Redux

Predictable state container for JavaScript apps
+15.2k☆
1.7k
1.5k
1.5k
1.3k
1.3k
1.2k
1.1k
1.2k
1.2k
1.1k
1.1k
932
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

まとめ

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

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
+22.9k☆
1.8k
1.5k
2.2k
2.0k
1.6k
1.6k
2.0k
1.8k
2.4k
2.2k
2.1k
1.8k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Angular

Angular

One framework. Mobile & desktop.
+10.4k☆
8.1k
675
688
901
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Angular 1

Angular 1

AngularJS - HTML enhanced for web apps!
+8.5k☆
973
829
843
653
714
708
707
717
746
533
575
532
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Inferno

Inferno

An extremely fast, React-like JavaScript library for building modern user interfaces
+6.9k☆
80
95
52
114
48
1.5k
453
127
1.1k
217
652
2.4k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

この フロントエンドフレームワーク カテゴリは恐らく、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☆
535
655
736
643
618
551
566
559
490
458
582
483
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.0k☆
591
387
428
414
436
342
367
466
425
374
380
402
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Feathers

Feathers

A REST and realtime API layer for modern applications.
+4.1k☆
57
59
2.0k
428
212
158
131
217
140
180
267
201
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Keystone

Keystone

node.js cms and web app framework
+3.6k☆
289
290
300
336
293
290
278
318
315
267
321
282
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Sails

Sails

Realtime MVC Framework for Node.js
+3.2k☆
295
334
354
290
295
246
234
241
201
214
249
223
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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☆
1.6k
2.4k
2.1k
1.7k
1.8k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Material UI

Material UI

React components that implement Google's Material Design.
+9.4k☆
705
668
860
879
854
753
796
821
794
761
750
722
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
React Router

React Router

Declarative routing for React
+9.1k☆
961
685
750
744
709
716
673
753
1.0k
756
661
647
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
React boilerplate

React boilerplate

A highly scalable, offline-first foundation with the best developer experience and a focus on
+8.9k☆
703
178
276
170
3.6k
843
523
473
675
478
536
532
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
React Starter Kit

React Starter Kit

React Starter Kit — isomorphic web app boilerplate (Node.js, Express, GraphQL, React.js, Babel, Post
+6.3k☆
573
516
569
540
571
551
525
613
517
474
489
368
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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☆
1.8k
1.3k
1.8k
1.8k
1.4k
1.4k
1.4k
1.3k
1.4k
1.4k
1.3k
1.2k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Ionic

Ionic

Build amazing native and progressive web apps with open web technologies. One app running on everyth
+6.0k☆
705
548
581
488
468
504
459
438
480
444
471
438
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
NativeScript

NativeScript

NativeScript is an open source framework for building truly native mobile apps with JavaScript. Use
+3.7k☆
340
342
273
262
416
270
365
281
312
281
313
294
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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☆
651
601
754
741
685
794
971
805
966
877
846
732
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Babel

Babel

Babel is a compiler for writing next generation JavaScript.
+6.6k☆
772
624
660
570
548
484
482
529
484
497
437
483
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Reason

Reason

Simple, fast & type safe code that leverages the JavaScript & OCaml ecosystems
+1.9k☆
1.1k
98
112
63
133
152
94
99
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
CoffeeScript

CoffeeScript

Unfancy JavaScript
+1.2k☆
136
121
127
124
114
103
83
91
84
74
69
98
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
ClojureScript

ClojureScript

Clojure to JS compiler
+1.2k☆
126
100
106
103
112
91
82
82
85
61
100
108
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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☆
912
805
892
883
755
856
918
1.0k
885
1.2k
1.1k
1.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Gulp

Gulp

The streaming build system
+6.3k☆
622
549
657
573
532
497
547
510
470
489
481
357
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Rollup

Rollup

Next-generation ES6 module bundler
+5.2k☆
402
458
452
322
387
340
321
721
610
481
341
324
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Browserify

Browserify

browser-side require() the node.js way
+1.7k☆
184
188
163
143
124
129
141
133
129
127
120
80
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Grunt

Grunt

Grunt: The JavaScript Task Runner
+889☆
99
107
100
89
66
64
76
62
39
54
63
70
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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

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

1
AVA

AVA

Futuristic JavaScript test runner
+5.5k☆
321
604
989
447
408
421
428
450
381
363
321
333
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Jest

Jest

🃏 Delightful JavaScript Testing.
+3.9k☆
116
96
166
189
139
153
139
222
929
502
475
792
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
+2.9k☆
267
219
280
203
238
256
279
281
202
215
260
242
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.8k☆
192
172
184
183
150
140
162
144
167
113
127
99
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
5
Tape

Tape

tap-producing test harness for node and browsers
+1.7k☆
174
142
172
144
128
147
114
119
122
166
108
123
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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

AVA

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

Jest

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

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

統合開発環境(IDE)

1
VS Code

VS Code

Visual Studio Code
+11.8k☆
907
739
983
1.8k
989
813
775
763
938
984
1.1k
1.0k
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Atom

Atom

The hackable text editor
+10.1k☆
977
817
1.0k
969
841
787
669
885
797
847
780
733
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Brackets

Brackets

An open source code editor for the web, written in JavaScript, HTML and CSS.
+2.4k☆
263
251
209
174
199
225
176
144
168
173
226
161
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
4
Deco IDE

Deco IDE

The React Native IDE
+1.1k☆
408
176
161
124
84
112
76
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

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

VS Code

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

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

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

Atom

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

静的サイトジェネレータ

1
Hexo

Hexo

A fast, simple & powerful blog framework, powered by Node.js.
+5.9k☆
497
406
516
559
562
428
449
526
510
446
464
516
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
2
Gatsby

Gatsby

⚛️📄🚀 Blazing fast static site generator for React
+4.9k☆
112
235
211
182
126
175
1.3k
385
279
469
1.0k
382
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月
3
Metalsmith

Metalsmith

An extremely simple, pluggable static site generator.
+1.2k☆
126
151
108
112
97
98
89
120
101
89
52
75
1月
2月
3月
4月
5月
6月
7月
8月
9月
10月
11月
12月

静的サイトジェネレータ("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

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 Grief
Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.

Available Translations

English

中文