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

4年連続でVue.jsが総合優勝を飾り、2019年にも30000以上のスターを稼ぎ出しました。

次いでReactとVS Codeが、昨年と同じように続いています。

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

Svelteは数年前から存在するプロジェクトですが、2019年ついに飛翔し5位に入りました。

TypeScriptがベストテン入りし、この成功は過去数年のJavaScriptの変化の集大成のひとつです。

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

2019年はSvelteが躍進してAngularを追い抜き、 Vue.jsとReactの背後を突く3位に上昇しました。

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

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

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

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

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

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

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開発者には馴染みがあることでしょうが、最後のコミットから既に半年以上が経過していることに注意が必要です。 時代は変わっていますか？

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:Central Storeと簡単にやりとりできるフックを提供します。
• React Router:フラウザ履歴にアクセスするフックを提供します。
• React Hook Form:ユニークな方法でフォームの検証を行っています。

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

2連覇したVue Element Adminは、Elementを使って美しいダッシュボードを構築するVue.jsコンポーネントです。

2位のElementは、多くのコンポーネントを持つUIライブラリです。

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

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

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

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と呼ばれる新しいコンパイラで、構築時間の短縮及びバンドルサイズの減少が期待されています。

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

Puppeteerは非常に人気のあるヘッドレス Chrome 制御ツールです。 Web スクレイピングやスナップショット撮影など多くのユースケースがあります。 Chrome エクステンションのPuppeteer Recorderも 6 位にランクインしています。

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

4 位のJestは、フロントエンドとバックエンドの両方のプロジェクトで用いられる、最も人気のあるテストフレームワークです。

React Testing Libraryは、Kent C. Dodds によるDOM Testing Libraryをラップした React アプリのテストソリューションです。 実装の詳細をテストするのではなく、アプリの動作をテストするのに役立つパターンと抽象化を提供します。