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

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年の１年間で新規に獲得した数で、これまでに獲得した総スター数ではありません）。

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 ファイルで保存

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

３強：Vue, React, Angular

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

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

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

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

レス・イズ・モア

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

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

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

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

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

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

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

React は表示レイヤーのライブラリで、変化の激しい React のエコシステムを生み出しています。 このカテゴリーには React と React 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 Design、Ant Design Pro、Material UI は React のスタイル適用済みコンポーネント(styled component)を提供していて、 開発者がスタイルについて心配することなく開発できる機能を提供しています。

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

スペシャルゲスト: Evan You

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

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

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

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

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

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

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

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

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

• React with React Native
• Vue with Weex and Quasar
• Angular with Ionic and NativeScript

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

React blog から引用。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

もうすこし柔軟性が必要で「古いやり方」に抵抗がないなら、Bootstrap や Bulma のような 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 を書いています。この分野の技術に少々懐疑的な方に特にお薦めの記事です。

静的サイトジェネレータ（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.js と Nuxt が静的サイトジェネレータとしても利用できることをここに記しておきます。