GitHubで最もホットなライブラリをランキング表示してくれるbestofjs.orgというサイトがあります。
そしてここは毎年、その一年で最もホットだったライブラリを発表しています。
選考基準は『その年増えたスターの数』であり、恣意的要素の入る余地はありません。
ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.jsです。
以下は2019年のランキング、2019 JavaScript Rising Starsの日本語訳です。
JavaScript ライジングスター 2019
4回目のJavaScript ライジングスターにようこそ！
2019年にGitHubで最も注目を集めたプロジェクトを、数字で見てみましょう。
以下のチャートは、2019年の一年間にGitHubで増加したスターの数を比較したものです。Webプラットフォームに関するベストプロジェクトを集めたリストであるBest of JavaScriptからの分析となります。各プロジェクトをクリックすると、プロジェクトの詳細を閲覧することができます。
総合ランキング
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が総合優勝を飾り、2019年にも30000以上のスターを稼ぎ出しました。
次いでReactとVSCodeが、昨年と同じように続いています。
総合ランキングで最大の伸びを示したのがVue Element Adminでした。
これは、Vue.jsコンポーネントを使った優れたダッシュボードを構築することができるソリューションで、堂々の4位を取得しました。
Svelteは数年前から存在するプロジェクトですが、2019年ついに飛翔し5位に入りました。
TypeScriptがベストテン入りし、この成功は過去数年のJavaScriptの変化の集大成のひとつです。
Node.jsの作者が新たに作ったJavaScriptランタイムDenoは、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が躍進してAngularを追い抜き、
Vue.jsとReactの背後を突く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が誕生しました。
NestはAngularから多くの概念を取り入れた、フルスタックのフレームワークです。
2018年の勝者であったNext.jsは、その席こそ譲ったものの堂々の2位です。
フロントエンドをReactで、バックエンドをNode.jsで構築する際に最適なソリューションのひとつです。
3位に入ったStrapiはオープンソースのヘッドレスCMSで、APIエンドポイントを迅速に生成・管理することができます。
『4コマンドで始めよう』
APIエンドポイントはRESTもしくはGraphQLに対応しています。
4位はNuxtで、フロントエンドにVue.jsを使うときに最適なフルスタックフレームワークです。
サーバサイドレンダリング、クライアントサイド、あるいは静的のみといった様々な戦略に対応しています。
Expressは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、5位にMaterial UIと、React用のコンポーネントとヴィジェットが入賞しました。
2位のCreate React Appは、Reactアプリを新しく始める際の、事実上のデファクトスタンダードです。
今年の目玉として、TypeScriptがサポートされました。
今年のReact世界で最大の変更点は、フックの導入です。
Reactはビューレイヤだけしか提供しないので、コンポーネント間でロジックを共有する方法は常に議論の的になっています。
その進化は概ね4ステップに分けられます。
・2013年：Mixin
・2015年：高階コンポーネント
・2017年：Render Propsパターン
・2019年：Hooks
今年は、フックの力を使うことで問題を解決したライブラリが多数現れました。
・Redux
・React Router
・React Hook Form
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は、Elementを使って美しいダッシュボードを構築するVue.jsコンポーネントです。
2位のElementは、多くのコンポーネントを持つUIライブラリです。
マテリアルコンポーネントフレームワークであるVuetifyは、7月にバージョン2がリリースされ急上昇してランクインしました。
NuxtはVue.jsアプリケーションを構築するWebフレームワークであり、3年連続でランクインしています。
5位には、強力なGUIを備えプロジェクトの立ち上げを加速するオフィシャルのツールキット、vue-cliが入りました。
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は、管理ダッシュボードを構築するためのテンプレートを提供します。
2位のMaterial Design for AngularはAngular CDKと似たような、マテリアルデザインのAngular公式コンポーネントです。
ReactやVueと同様に、デザインコンポーネントであるNG-ZORROが4位に入りました。
Angularは2019年5月にバージョン8のメジャーリリースが行われました。
新機能のひとつとして、Angular CLIはモダン向けとレガシー向けにバンドルを分けることによってバンドルサイズを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は非常に人気のあるヘッドレスChrome制御ツールです。
Webスクレイピングやスナップショット撮影など多くのユースケースがあります。
ChromeエクステンションのPuppeteer Recorderも5位にランクインしています。
CypressはE2Eテストを行うためのソリューションであり、ユーザ操作とWebページの関連を記述する優れたUIを提供します。
3位のJestは、フロントエンドとバックエンドの両方のプロジェクトで用いられる、最も人気のあるテストフレームワークです。
React Testing Libraryは、Kent C. Doddsによる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を使用する音楽アプリをリリースしたという事実であり、UIフレームワークのひとつであるStencilでコンパイルされています。
これはWeb Componentsが実アプリに使用された例です。
ネイティブモジュールを使用するアプリをリリースできるという事実は、大きな改善です。
バックエンドでは、Node.jsは登場から10年経ちましたが、今でも新しい機能が精力的に追加され続けています。
v13.2.0の時点で、Node.jsはESモジュールをそのままサポートし、WebAssemblyモジュールをインポートできます。
Workers Threads APIを使えば重いプログラムも実行することができます。
ブラウザにおいてもNode.jsにおいてもプラットフォームは進化し続けており、これがJavaScriptの開発を非常にエキサイティングなものにしてくれます。
ご清聴ありがとうございました。
また来年お会いしましょう！
感想
現在のスター数のランキングではなく、2019年の一年間で増加したスター数のランキングです。
累計は多いけど落ち目の技術はランクに入らないため、最近勢いのある技術がわかります。
総合ランキングは今年もVue.jsの勝利で、堂々の4連覇です。
これから使う技術は、基本的にランキング上位の中から選択しておけば問題ありません。
目的があるのならばそれに適した技術を選ぶべきですが、よくわからないけどなんとなくやってみたい、という段階であれば迷わずVue.jsを選びましょう。
プログラミングは数こそが力なので、わざわざマイナーなものを使ったところでいいことは何もありません。
ところで、昨年までは全てのジャンルに解説があったのですが、今回はランキングだけで解説のないジャンルが目立ちます。
飽きたのでしょうか？