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 はすべてのものは関数で表現できるという関数型の世界へ通じるヘルパー関数を提供しています。

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 をお薦めしておきます。