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

まとめ

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 特有のテンプレート実装との、良いとこ取りな感じでしょうか。

この フロントエンドフレームワーク カテゴリは恐らく、2016 年に話題になった JavaScript 疲れ(the JavaScript fatigue) の要因の 1 つです。毎月のように新しい競合が現われてはバズり、イノベーションを牽引してきました。

このカテゴリには 2 種類のプロジェクトが含まれています:

• フルスタックフレームワーク: Web アプリケーションに必要なすべてを含むフレームワーク (ルーティング、データ取得、状態管理など)
  • 例: Angular 1, Angular, Ember, Aurelia
• 軽量フレームワーク: フロントエンドの UI にフォーカスしたフレームワーク
  • 例: React, Vue.js, Inferno

カテゴリ・総合共に 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 年の開発者は、出来合いのフルスタックフレームワークを選ぶよりも、軽量フレームワークで自分好みの構成を作り上げる方を好んでいたように見えます。

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

• Now
• Webtask.io
• Stdlib

また、 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 はとてもすばらしい 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.js は Zeit の多忙な人達によって開発されました。 サーバーサイドでの描画機能も持つため、サーバーサイドとクライアントサイドでコードをコードを共有できる ユニバーサル アプリケーションを作成できます。 (ユニバーサルアプリケーションは、2015年には Isomorphic と呼ばれていたようです)

JavaScriptが普及したおかげで、Webデベロッパーの知識（HTML、JavaScript、CSS）で、モバイル向けのネイティヴアプリケーションが開発できるようになりました。

React Native

React NativeならWebアプリケーションと同じコードベースから、真にネイティヴなiOSとAndroidアプリケーションを開発できます。そのコンセプトは、Reactを知っているデベロッパーであればなじみ深いものです。開発の詳細を知りたい方は、このチュートリアルが参考になります。

その他のソリューションではCordobaをベースにしたものが多く、スクリーンのレンダリングにWebviewを利用しています。いずれも、React Native ほどの効率的な実装は難しいようです。"Write Once Run Everywhere"（１度書けばどこでも動く）、というデベロッパーの夢がついに現実になりました！

Ionic

Ionic は、「ハイブリッド」アプリケーションというコンセプトの草分け的存在のひとつです。裏側では、Cordovaを利用してモバイルデヴァイスのフィーチャへアクセスしています。充実したエコシステムを作り上げています。

NativeScript

NativeScript は React Native と同じゴール（Webのテクノロジでモバイルアプリケーションを実装すること）を目指しています。実装のアプローチとしては、NativeScript CoreとNativeScript + Angular 2の２種類があります。

さて、今年の注目は？

2017年、この分野の注目プロジェクトとして、Vue.js の上に実装された*「モバイル向けクロスプラットフォームUIフレームワーク」*Weex を挙げておきます。

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

TypeScript

最も流行っていたトランスパイラーは TypeScript で、 Web の開発者が Java や C# のような静的型付けで実装できるようになりました。実際 Angular は本体やサンプルコードが TypeScript で書かれており、その普及に貢献しました。

Javascript で型を利用するのにはメリットとデメリットがあり、下記の２つの記事に目を通して採用するかどうかの判断材料にしてください。

• You Might Not Need TypeScript

• TypeScript: the missing introduction

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 を書くスタイルへと移行していきました。

ビルディングプロセスのないWebアプリケーション開発など、2016年の時点で想像することはもはや困難です。みなさんも、アプリケーションをプロダクションにリリースするとき、テンプレートをコンパイルしたりアセットを最適化するビルディングプロセスを踏んでいるはずですよね。

Webpack

Webpack はシングルページアプリケーション（SPA）のビルドツールの代表格で、React との相性も抜群です。最新版である version 2 では注目すべき機能がいくつか追加されています。version 2 についてはこちらがよくまとまっています。

Gulp

Gulp は、ファイルシステムだろうとなんだろうとプロセスを自動化するのに汎用的に利用できるタスクランナーです。ですので、Webpack や Browserify と直接競合するものではないでしょう。

Grunt 同様、Gulp が実行するのはアグリゲーションです。つまり、アセットの集まりを小さくして、つなぎ合わせるところまでするのですが、Webpack や Browserify のようにJavaScriptのモジュール管理までは対応していません。

とはいえ、npm-scriptsを使うくらいならGulpとwebpackを使うべきでしょう。

Browserify

Browserify の人気はそのシンプルさにあり、それが Node.js デベロッパーに支持されています。

基本的な使い方としては、複数のNode.jsパッケージを入力して、"build"というブラウザで実行可能なファイルを出力します。シンプルさが売りではありますが、Webアプリケーションの開発フローには Webpack のような世界観を前面に打ち出すツールのほうがフィットする気がします。

さて、今年の注目は？

2017年に注目すべきモジュール管理ツールとしては、パフォーマンスの高さをうたう Rollup を挙げておきます。

Tree shakingと呼ばれるES6モジュールの機能を使い、コードから実際には呼ばれていない関数を取り除いてモジュールバンドルを作ってくれるので、依存関係にあるライブラリがまるごとプロダクションにデプロイされるなんてことがなくなります。

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

AVA

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

Jest

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

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

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

VS Code

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

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

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

Atom

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

静的サイトジェネレータ（"Static Site Generators" 略してSSG） は .html, .css, JavaScriptといったWebサイトを構成するファイル一式を生成してくれるツールです。生成されたファイルは、ApacheやNginxのシンプルなWebサーバーへ悩み無用でデプロイできます。データベースやWebアプリケーションフレームワークのセットアップも不要です。例えば、SSGのひとつである Gatsby は自らをこう表現しています:

1995年ころのようにサイトを構築する。

静的なWebサイトは高速、堅牢で、メンテナンスも容易です。

SSGが人気なのは、静的なWebサイトを無料でホスティングできるサービスが多いことも要因でしょう。

• GitHub pages
• GitLab pages
• Netlify
• Surge
• Now static

Hexo

2016年でもっとも人気のあったSSGがNode.jsでビルドする Hexo です。とてもよくできたSSGで、WordpreessのようなCMSに近く、ブログの構築に利用できます。i18nプラグインを含め、多くのフィーチャを提供しています。

Gatsby

ニューカマーの Gatsby のソリューションは非常に興味深いものです。静的htmlファイルを生成するのにReactのエコシステムを利用しており、競合と一線を画しています。Reactコンポーネントを取り込んでいることからもわかるように、Markdownやサーバーサイドレンダリングをサポートしており、パワフルな仕上がりになっています。