JavaScriptコミュニティは日々進化しています。今日のトレンドも数か月後には陳腐化しているなんてことは日常茶飯事です。
2016年は終わってしまいましたが、何か重要なことを見逃したのではないかと感じているそこのあなた！ 2016年の主要なトレンドをおさらいして、そんな不安を払拭しちゃいましょう。
過去12か月に獲得された GitHub のスター数を比較して、2016年に支持を集めたプロジェクトを数値に基づいて評価していきます。
2015年はなんといっても React でした。そして、flux 実装を席巻したのは Redux でしたね。 2016年、JavaScript の人気プロジェクトはどのようなものだったのでしょうか？
この フロントエンドフレームワーク カテゴリは恐らく、2016 年に話題になった JavaScript 疲れ(the JavaScript fatigue) の要因の 1 つです。毎月のように新しい競合が現われてはバズり、イノベーションを牽引してきました。
このカテゴリには 2 種類のプロジェクトが含まれています:
カテゴリ・総合共に 1 位の Vue.js にはすでに触れたので、他の競合フレームワークを見て行きましょう。
React はカテゴリ 2 位で、フロントエンド開発者は React とその豊富なエコシステムを無視できないほどです。
React はとても人気があり、そのの地位を狙う他のたくさんの競合フレームワークに影響を与えています。あるものは React よりも軽量を、またあるものはブラウザ上のパフォーマンス向上、ビルド時間の短縮などを目指しています。
Inferno もこのカテゴリでもとて人気のあるプロジェクトで、最速の React 代替フレームワークをうたっています。
Inferno と僅差の Preact もすばらしい React 代替フレームワークです。 Preact のエコシステムはかなり充実していて、例えばオフラインでも動作するひな型 preact-boilerplate 、ルーター、 preact-compat (React のモジュールを使用にするモジュール)などがあります。
AngularJS と Angular 2 のリポジトリは 2 つに分割されました。コンセプトはそのままながら、Angular 2 がフルスクラッチで書き直されたためです。
Angular は TypeScript で書かれており、ES6 の恩恵も受けられるモダンなフレームワークです。
Angular 1 は今でも多くのプロジェクトで使用されていて、今後もしばらく人気は続きそうです。
Ember も注目に値するフレームワークで、巨大なエコシステムやコミュニティを有しながらもトップ 10 には入りませんでした。
このことから 2016 年の開発者は、出来合いのフルスタックフレームワークを選ぶよりも、軽量フレームワークで自分好みの構成を作り上げる方を好んでいたように見えます。
2016 年、以下のようなサービスの登場により開発、デプロイがとても簡単になりました。
また、 Glitch のようなサービスによりブラウザから数回クリックするだけで誰でも簡単にコードを書いて共有することができるようになり、 node.js の世界へ足を踏み入れる障壁を下げました。
さて、アプリケーションを実装するにあたってどのフレームワークを利用しましょうか。
Node.js で Web アプリケーションを構築する場合、web サーバーのデファクトとなっている Express は一番に選択肢に上がるのではないでしょうか。
Express は、必要最低限のコアモジュールでできており利用者は middleware と呼ばれるパッケージを追加して機能を拡張していきます。 これは node.js の開発者には馴染みのスタイルですね。
Koa の設計思想は Express によく似ていますが、 ES6 で書くことが出来るためいわゆる Callback Hell の呪縛から逃れることができます。
Feathers はサービス指向アーキテクチャに柔軟に対応でき、 microservices なシステムの構築に適しています。
Nodal フレームワークは PostgreSQL に接続されたステートレスで分散したサービスをターゲットにしています。
Keystone は MongoDB のコンテンツを管理する画面を設けるのに優れたツールの一つです。その管理画面は DB のモデルから自動で作られ、 CRUD の一通りの処理と便利なフィルターを備えています。
Sails はフル MVC のフレームワークで、 Sails という名前からも分かる通り Ruby on Rails ライクなフレームワークです。 その歴史は長く、 各種 SQL / no-SQL なデータベースと接続することができます。
Loopback は成熟したフレームワークのひとつで、トークンを用いた認証や様々なデータベースに対応いるなど多くの機能が実装されています。
API explorer は非常に強力な機能で、すべての API end-points を直感的に確認することができ、どんなユーザーのトークンも確認することができます。API の実装に非常に適したフレームワークです。
React はとてもすばらしい UI のライブラリですが、React やその最新のWeb開発ツールはたくさんの構成・設定を必要とします。 では実際のアプリケーションを作りはじめるにはどうすればいいのでしょうか？
react-boilerplates とその他のスターターキットがその答えを用意してくれています。
Facebook は手軽に React のプロジェクトを開始できる Create React App を公開しました。
Dan Abramov (Redux の作者で、現在 Facebook 在籍) はシンプルさと多機能の絶妙なバランスを見出しました。 奇抜な stylesheet も使わず(普通の CSS のみ)、サーバーサイドの描画もせず、それでいて全体をうまくまとめた上で開発者体験もすばらしいという落しどころを。
Create React App の他の競合ツールとの主な違いは、これを使ってプロジェクトをはじめれば依存関係や設定をすべて隠蔽してくれることです。 依存モジュールや設定などの魔術的なものはすべて隠蔽されて、書き足したアプリケーションのコードのみが見える状態になります。 プロジェクト開始時のみに使うのではなく、いつでも依存関係を最新な状態に更新することもできます。 (なんと隠蔽されている依存関係をすべて書き出すこともできます)
React boilerplate には、Redux や他のオフライン機能のモジュール、Web Worker など、必要になる機能はすべて含まれてます。
これを使えば プログレッシブウェブアプリ (PWA) と呼ばれるアプリケーションを作成できます。 プログレッシブウェブアプリは Service Worker という技術を使用して、オフラインでも動作するウェブアプリケーションです。 詳しくは Nicolás Bevacqua. の this article を参照してくさい。
Next.js は Zeit の多忙な人達によって開発されました。 サーバーサイドでの描画機能も持つため、サーバーサイドとクライアントサイドでコードをコードを共有できる ユニバーサル アプリケーションを作成できます。 (ユニバーサルアプリケーションは、2015年には Isomorphic と呼ばれていたようです)
JavaScriptが普及したおかげで、Webデベロッパーの知識（HTML、JavaScript、CSS）で、モバイル向けのネイティヴアプリケーションが開発できるようになりました。
React NativeならWebアプリケーションと同じコードベースから、真にネイティヴなiOSとAndroidアプリケーションを開発できます。そのコンセプトは、Reactを知っているデベロッパーであればなじみ深いものです。開発の詳細を知りたい方は、このチュートリアルが参考になります。
その他のソリューションではCordobaをベースにしたものが多く、スクリーンのレンダリングにWebviewを利用しています。いずれも、React Native ほどの効率的な実装は難しいようです。"Write Once Run Everywhere"（１度書けばどこでも動く）、というデベロッパーの夢がついに現実になりました！
Ionic は、「ハイブリッド」アプリケーションというコンセプトの草分け的存在のひとつです。裏側では、Cordovaを利用してモバイルデヴァイスのフィーチャへアクセスしています。充実したエコシステムを作り上げています。
NativeScript は React Native と同じゴール（Webのテクノロジでモバイルアプリケーションを実装すること）を目指しています。実装のアプローチとしては、NativeScript CoreとNativeScript + Angular 2の２種類があります。
2017年、この分野の注目プロジェクトとして、Vue.js の上に実装された*「モバイル向けクロスプラットフォームUIフレームワーク」*Weex を挙げておきます。
AltJS 群などの言語から JavaScript のコードを生成するコンパイラ（トランスパイラ）についてです。それらのコンパイラはブラウザや node.js で実行できる "standard JavaScript" を生成することができるため、ブラウザがサポートしているかどうかを気にせず、ES6 などの最新の JavaScript でコードを書くことができます。
最も流行っていたトランスパイラーは TypeScript で、 Web の開発者が Java や C# のような静的型付けで実装できるようになりました。実際 Angular は本体やサンプルコードが TypeScript で書かれており、その普及に貢献しました。
Javascript で型を利用するのにはメリットとデメリットがあり、下記の２つの記事に目を通して採用するかどうかの判断材料にしてください。
Babel は、よく Webpack と共に利用され、ES6 で書かれたコードや standard JavaScript で書かれた React (JSX) などのライブラリのテンプレートをコンパイルする際のほぼ標準となっています。
初期の頃は ES6 をコンパイルするためによく利用されていましたが、Plugin 形式で様々なコードを変換できることから、より一般的なツールになりました。
Flow はコンパイラではありませんが、処理を解析して型を推測したりコメントに書いた期待する型を元にチェックする静的な型チェッカーです。（Flow の使い方に関しては こちら）。
元は Facebook の内部プロジェクトで使われていました。React, React Native, flux, immutable, Jest など、Facebook がオープンソースの世界で貢献しているものは多いです。
Python と Ruby のシンタックスにインスパイアされた CoffeeScript はここ数年最も人気なコンパイラでしたが、2016 年では下火となり大半の開発者は CoffeeScript から Babel を使って ES6 を書くスタイルへと移行していきました。
ビルディングプロセスのないWebアプリケーション開発など、2016年の時点で想像することはもはや困難です。みなさんも、アプリケーションをプロダクションにリリースするとき、テンプレートをコンパイルしたりアセットを最適化するビルディングプロセスを踏んでいるはずですよね。
Webpack はシングルページアプリケーション（SPA）のビルドツールの代表格で、React との相性も抜群です。最新版である version 2 では注目すべき機能がいくつか追加されています。version 2 についてはこちらがよくまとまっています。
Gulp は、ファイルシステムだろうとなんだろうとプロセスを自動化するのに汎用的に利用できるタスクランナーです。ですので、Webpack や Browserify と直接競合するものではないでしょう。
Grunt 同様、Gulp が実行するのはアグリゲーションです。つまり、アセットの集まりを小さくして、つなぎ合わせるところまでするのですが、Webpack や Browserify のようにJavaScriptのモジュール管理までは対応していません。
とはいえ、npm-scriptsを使うくらいならGulpとwebpackを使うべきでしょう。
Browserify の人気はそのシンプルさにあり、それが Node.js デベロッパーに支持されています。
基本的な使い方としては、複数のNode.jsパッケージを入力して、"build"というブラウザで実行可能なファイルを出力します。シンプルさが売りではありますが、Webアプリケーションの開発フローには Webpack のような世界観を前面に打ち出すツールのほうがフィットする気がします。
2017年に注目すべきモジュール管理ツールとしては、パフォーマンスの高さをうたう Rollup を挙げておきます。
Tree shakingと呼ばれるES6モジュールの機能を使い、コードから実際には呼ばれていない関数を取り除いてモジュールバンドルを作ってくれるので、依存関係にあるライブラリがまるごとプロダクションにデプロイされるなんてことがなくなります。
JavaScript fatigue™（"JavaScript疲れ"）がささやかれ、いくつかの悲劇（例えば、"leftpad gate"）にも遭遇しましたが、Vue.js と React Native が脚光を浴び、yarn や Create React App といった新しいプロジェクトが立ち上がり、2016年はコミュ二ティにとって実りの多い年だったといえるでしょう。
ここまで、2016年に GitHub で支持を集めたプロジェクトを定量的な視点でみてきました。とはいえ、この結果だけでデベロッパーが満足できるかどうか疑問です。もっと定性的なアプローチをお望みであれば、Sacha Greif の実施したサーヴェイ State of JavaScript を是非チェックしてみてください。9,000 以上の回答結果にアクセスできます。
さて、2017年は何が来るのでしょうか？
2016年を振り返ってみて個人的に気に入ったもののうち、2017年も引き続き伸びそうなプロジェクトとアイデアを10選してみました。
最後までお読みいただきありがとうございます。シェアは自由です。フィードバックはこちらからお願いします: GitHub
Japanese version
A generic programmer and linguist living in Osaka from Sapporo. 素朴なプログラマで言語マニア。札幌生まれの大阪在住。
Web application developer (Rails, React, …)
Node.js, 美味しいご飯, 酒, 料理, バスケ, ヨガ, エレクトロニカ, DJ, 園芸, DIY, プチアウトドア, 六甲山
Authors
Creator of Best of JS
Author of Discover Meteor and creator of Vulcan, a React+GraphQL open-source framework.
Best of JS is a project by Michael Rambeau, made in Osaka, Japan.
Powered by 
まとめ
2016 年のトップ 10 にランキングしたプロジェクトをみれば、その年の Web 開発の動向がよく見て取れます。
こうしてみると、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 特有のテンプレート実装との、良いとこ取りな感じでしょうか。