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


[2021](https://qiita.com/rana_kualu/items/b23a1bccae742bd031ef) / [2020](https://qiita.com/rana_kualu/items/e8a0f8f5589ff082539d) / [2019](https://qiita.com/rana_kualu/items/4727a0d64657aa837ce3)

GitHubで最もホットなライブラリをランキング表示してくれる[bestofjs.org](https://bestofjs.org/)というサイトがあります。
そしてここは毎年、[その一年で最もホットだったライブラリを発表](https://risingstars.js.org/)しています。

選考基準は『その年増えたスターの数』であり、恣意的要素の入る余地はありません。
ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.jsです。

以下は2019年のランキング、[2019 JavaScript Rising Stars](https://risingstars.js.org/2019/en/)の日本語訳です。


# JavaScript ライジングスター 2019

4回目のJavaScript ライジングスターにようこそ！

2019年にGitHubで最も注目を集めたプロジェクトを、数字で見てみましょう。

以下のチャートは、2019年の一年間にGitHubで増加したスターの数を比較したものです。Webプラットフォームに関するベストプロジェクトを集めたリストである[Best of JavaScript](https://bestofjs.org/)からの分析となります。各プロジェクトをクリックすると、プロジェクトの詳細を閲覧することができます。


## 総合ランキング

1位： Vue.js
2位： VS Code
3位： React
4位： Vue Element Admin
5位： Svelte
6位： Axios
7位： Ant Design
8位： TypeScript
9位： Puppeteer
10位： Create React App


4年連続で[Vue.js](http://vuejs.org/)が総合優勝を飾り、2019年にも30000以上のスターを稼ぎ出しました。

次いで[React](https://reactjs.org/)と[VSCode](https://code.visualstudio.com/)が、昨年と同じように続いています。

総合ランキングで最大の伸びを示したのが[Vue Element Admin](https://github.com/PanJiaChen/vue-element-admin)でした。
これは、Vue.jsコンポーネントを使った優れたダッシュボードを構築することができるソリューションで、堂々の4位を取得しました。

[Svelte](https://svelte.dev/)は数年前から存在するプロジェクトですが、2019年ついに飛翔し5位に入りました。

[TypeScript](https://www.typescriptlang.org/)がベストテン入りし、この成功は過去数年のJavaScriptの変化の集大成のひとつです。

Node.jsの作者が新たに作ったJavaScriptランタイム[Deno](https://deno.land/)は、2018年に新登場しました。
これは13位で、まだトレンドに入っています。


## フロントエンド フレームワーク

1位： Vue.js  +31.4k
2位： React  +22.9k
3位： Svelte  +20.0k
4位： Angular  +12.0k
5位： Omi  +3.8k

2019年は[Svelte](https://svelte.dev/)が躍進して[Angular](https://angular.io/)を追い抜き、
[Vue.js](http://vuejs.org/)と[React](https://reactjs.org/)の背後を突く3位に上昇しました。

これはBIG-3がBIG-4になったことを意味するのでしょうか？

Svelteは他のフレームワークと大きく異なっていて、実際にはフレームワークではなく、ビルド時に全てを構築するコンパイラのようなものです。

ReactやVue同様に、データが変更されたときに画面を更新するアプリを開発者は書くことができます。
ただし最大の違いとして、そのフレームワークがブラウザ上で実行されるのではなく、ビルド時に実行されます。
コンパイラは、開発者が作成したコンポーネントを、DOMを直接操作する命令型コードに変換します。
そのため、ブラウザに渡されるコードは小さくなり、非常に高速に実行されます。
たとえば組み込みデバイス向けのアプリケーションなどに適しているでしょう。

そのパフォーマンスに加えて、ややこしいCSSトランジションも簡単に制御することができます。

バージョン3ではリアクティブな仕組みも強化されています。
UIをトリガーするだけで、変数までも更新してくれます。

SvelteがこれまでのBIG-3と同じくらい成功すると断定するには時期尚早ですが、2020年はこれをフォローしておく価値があるでしょう。


## Node.js フレームワーク

1位： Nest  +11.5k
2位： Next.js  +10.6k
3位： Strapi  +10.2k
4位： Nuxt  +7.4k
5位： Express  +5.1k

Node.jsに新たなチャンピオン、[Nest](https://nestjs.com/)が誕生しました。
NestはAngularから多くの概念を取り入れた、フルスタックのフレームワークです。

2018年の勝者であった[Next.js](https://nextjs.org/)は、その席こそ譲ったものの堂々の2位です。
フロントエンドをReactで、バックエンドをNode.jsで構築する際に最適なソリューションのひとつです。

3位に入った[Strapi](https://strapi.io/)はオープンソースのヘッドレスCMSで、APIエンドポイントを迅速に生成・管理することができます。
『4コマンドで始めよう』
APIエンドポイントはRESTもしくはGraphQLに対応しています。

4位は[Nuxt](https://nuxtjs.org/)で、フロントエンドにVue.jsを使うときに最適なフルスタックフレームワークです。
サーバサイドレンダリング、クライアントサイド、あるいは静的のみといった様々な戦略に対応しています。

[Express](https://expressjs.com/)はNode.jsのための古びたフレームワークですが、まだトップ5に残っています。
巨大なエコシステムが存在し、多くのNode.js開発者には馴染みがあることでしょうが、最後のコミットから既に半年以上が経過していることに注意が必要です。
時代は変わっていますか？


## React エコシステム

1位： Ant Design  +14.6k
2位： Create React App  +13.5k
3位： Gatsby  +11.5k
4位： Next.js  +10.6k
5位： Material UI  +10.2k

1位に[Ant Design](https://ant.design/)、5位に[Material UI](https://material-ui.com/)と、React用のコンポーネントとヴィジェットが入賞しました。

2位の[Create React App](https://create-react-app.dev/)は、Reactアプリを新しく始める際の、事実上のデファクトスタンダードです。
今年の目玉として、[TypeScript](https://www.typescriptlang.org/)がサポートされました。

今年のReact世界で最大の変更点は、[フック](https://reactjs.org/docs/hooks-intro.html)の導入です。

Reactはビューレイヤだけしか提供しないので、コンポーネント間でロジックを共有する方法は常に議論の的になっています。
その進化は概ね4ステップに分けられます。
・2013年：Mixin
・2015年：高階コンポーネント
・2017年：Render Propsパターン
・2019年：Hooks

今年は、フックの力を使うことで問題を解決したライブラリが多数現れました。
・[Redux](https://redux.js.org/)
・[React Router](https://reacttraining.com/react-router/)
・[React Hook Form](https://react-hook-form.com/)


Hooksで進化の最終段階に到達しましたか？


## Vue エコシステム

1位： Vue Element Admin  +22.7k
2位： Element  +9.4k
3位： Vuetify  +7.5k
4位： Nuxt  +7.4k
5位： vue-cli  +5.8k

2連覇した[Vue Element Admin](https://github.com/PanJiaChen/vue-element-admin)は、[Element](https://element.eleme.io/)を使って美しいダッシュボードを構築する[Vue.js](http://vuejs.org/)コンポーネントです。

2位の[Element](https://element.eleme.io/)は、多くのコンポーネントを持つUIライブラリです。

マテリアルコンポーネントフレームワークである[Vuetify](https://vuetifyjs.com/)は、7月にバージョン2がリリースされ急上昇してランクインしました。

[Nuxt](https://nuxtjs.org/)はVue.jsアプリケーションを構築するWebフレームワークであり、3年連続でランクインしています。

5位には、強力なGUIを備えプロジェクトの立ち上げを加速するオフィシャルのツールキット、[vue-cli](https://cli.vuejs.org/)が入りました。


## Angular エコシステム

1位：ngx-admin   +4.8k
2位：Material Design for Angular   +2.4k
3位：Angular CLI   +2.1k
4位：NG-ZORRO   +1.7k
5位：NgRx   +1.3k

Angularプロジェクトで最も人気である[ngx-admin](https://akveo.github.io/ngx-admin/)は、管理ダッシュボードを構築するためのテンプレートを提供します。

2位の[Material Design for Angular](https://material.angular.io/)はAngular CDKと似たような、マテリアルデザインのAngular公式コンポーネントです。

ReactやVueと同様に、デザインコンポーネントである[NG-ZORRO](https://ng.ant.design/)が4位に入りました。

Angularは2019年5月に[バージョン8](https://blog.angular.io/version-8-of-angular-smaller-bundles-cli-apis-and-alignment-with-the-ecosystem-af0261112a27)のメジャーリリースが行われました。
新機能のひとつとして、[Angular CLI](https://cli.angular.io/)はモダン向けとレガシー向けにバンドルを分けることによってバンドルサイズを20%減少させることに成功しました。
また既存のCLIコマンドを変更したり新たなコマンド追加したりできる、新たなBuilders APIも存在します。

Angularのバージョン9もRCとなっていて、2020年の前半にリリースされる見込みです。
バージョン9の主な変更点はIvyと呼ばれる新しいコンパイラで、構築時間の短縮及びバンドルサイズの減少が期待されています。


## テスト

1位：Puppeteer   +13.9k
2位：Cypress   +7.8k
3位：Jest   +6.5k
4位：React Testing Library   +5.7k
5位：Puppeteer Recorder   +2.2k

今年は、カテゴリをテストフレームワークに限定するのではなく、E2Eテストやブラウザ自動化ツールなども対象としました。

[Puppeteer](https://pptr.dev/)は非常に人気のあるヘッドレスChrome制御ツールです。
Webスクレイピングやスナップショット撮影など多くのユースケースがあります。
Chromeエクステンションの[Puppeteer Recorder](https://github.com/checkly/puppeteer-recorder)も5位にランクインしています。

[Cypress](https://www.cypress.io/)はE2Eテストを行うためのソリューションであり、ユーザ操作とWebページの関連を記述する優れたUIを提供します。

3位の[Jest](https://jestjs.io/)は、フロントエンドとバックエンドの両方のプロジェクトで用いられる、最も人気のあるテストフレームワークです。

[React Testing Library](https://testing-library.com/react)は、Kent C. Doddsによる[DOM Testing Library](https://github.com/testing-library/dom-testing-library)をラップしたReactアプリのテストソリューションです。
実装の詳細をテストするのではなく、アプリの動作をテストするのに役立つパターンと抽象化を提供します。


## モバイル

1位：React Native   +11.3k
2位：Quasar   +5.0k
3位：Ionic   +3.6k
4位：Expo   +3.5k
5位：cube-ui   +2.6k


## コンパイラ

1位：TypeScript   +13.9k
2位：Babel   +4.2k
3位：Flow   +1.7k
4位：Reason   +1.3k
5位：Sucrase   +1.1k


## ビルドツール

1位：Webpack   +6.3k
2位：Parcel   +5.4k
3位：Rollup   +2.7k
4位：Microbundle   +1.3k
5位：Gulp   +841


## CSS in JavaScript

1位：Styled Components   +6.0k
2位：Emotion   +3.3k
3位：Linaria   +2.8k
4位：styled-system   +2.4k
5位：CSS Modules   +1.8k


## GraphQL

1位：Gatsby   +11.5k
2位：Hasura GraphQL Engine   +8.1k
3位：Prisma   +4.5k
4位：Gridsome   +3.8k
5位：Apollo client   +3.4k


## 学習リソース

1位：You Don't Know JS   +20.1k
2位：30 seconds of code   +18.1k
3位：JS Algorithms & Data Structures   +17.8k
4位：Node.js Best Practices   +16.1k
5位：Tech Interview Handbook   +13.0k


## まとめ

フロントエンドのトレンドは興味深い傾向を示しています。
Svelteは今後も成長し続けるでしょうか？

あるいは、WebコンポーネントなどWeb標準の採用が増えるでしょうか？

2019年の最も興味深い話のひとつは、[AppleがWeb Componentsを使用する音楽アプリをリリースした](https://dev.to/ionic/apple-just-shipped-web-components-to-production-and-you-probably-missed-it-57pf)という事実であり、UIフレームワークのひとつである[Stencil](https://stenciljs.com/)でコンパイルされています。
これはWeb Componentsが実アプリに使用された例です。

[ネイティブモジュールを使用するアプリ](https://philipwalton.com/articles/using-native-javascript-modules-in-production-today/)をリリースできるという事実は、大きな改善です。

バックエンドでは、Node.jsは登場から10年経ちましたが、今でも新しい機能が精力的に追加され続けています。
v13.2.0の時点で、Node.jsはESモジュールをそのままサポートし、WebAssemblyモジュールをインポートできます。
Workers Threads APIを使えば重いプログラムも実行することができます。

ブラウザにおいてもNode.jsにおいてもプラットフォームは進化し続けており、これがJavaScriptの開発を非常にエキサイティングなものにしてくれます。
ご清聴ありがとうございました。
また来年お会いしましょう！


# 感想

現在のスター数のランキングではなく、2019年の一年間で増加したスター数のランキングです。
累計は多いけど落ち目の技術はランクに入らないため、最近勢いのある技術がわかります。

総合ランキングは今年もVue.jsの勝利で、堂々の4連覇です。
これから使う技術は、基本的にランキング上位の中から選択しておけば問題ありません。
目的があるのならばそれに適した技術を選ぶべきですが、よくわからないけどなんとなくやってみたい、という段階であれば迷わずVue.jsを選びましょう。
プログラミングは数こそが力なので、わざわざマイナーなものを使ったところでいいことは何もありません。

ところで、昨年までは全てのジャンルに解説があったのですが、今回はランキングだけで解説のないジャンルが目立ちます。
飽きたのでしょうか？