目次
総合ランキング
React
Svelte
Axios
Ant Design
TypeScript
Puppeteer
フロントエンドフレームワーク
Vue.js
React
Svelte
Angular
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
Strapi
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 エコシステム
Ant Design
Create React App
Gatsby
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で進化の最終段階に到達しましたか?
Vue エコシステム
Element
Vuetify
No translation for this path: "atinux"
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
Material Design for Angular
NG-ZORRO
Guest Writer: Benjamin Blackwood
今年、我々は友人のBenjamin BlackwoodにAngularの展望について語ってほしいと頼みました。 Benjamin BlackwoodはAustralia Postのフロントエンドエンジニアであり、Angularに4年以上関わっています。
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と呼ばれる新しいコンパイラで、構築時間の短縮及びバンドルサイズの減少が期待されています。
テスト
Puppeteer
Storybook
Cypress
Jest
今年は、カテゴリをテストフレームワークに限定するのではなく、E2E テストやブラウザ自動化ツールなども対象としました。
Puppeteerは非常に人気のあるヘッドレス Chrome 制御ツールです。 Web スクレイピングやスナップショット撮影など多くのユースケースがあります。 Chrome エクステンションのPuppeteer Recorderも 6 位にランクインしています。
Cypressは E2E テストを行うためのソリューションであり、ユーザ操作と Web ページの関連を記述する優れた UI を提供します。
4 位のJestは、フロントエンドとバックエンドの両方のプロジェクトで用いられる、最も人気のあるテストフレームワークです。
React Testing Libraryは、Kent C. Dodds によるDOM Testing Libraryをラップした React アプリのテストソリューションです。 実装の詳細をテストするのではなく、アプリの動作をテストするのに役立つパターンと抽象化を提供します。
モバイル
React Native
Quasar
Ionic
Expo
コンパイラ
TypeScript
Babel
Flow
Reason
ビルドツール
Webpack
Parcel
Rollup
Microbundle
CSS in JavaScript
Styled Components
Emotion
Linaria
styled-system
GraphQL
Gatsby
Hasura GraphQL Engine
Prisma
Gridsome
学習リソース
You Don't Know JS
30 seconds of code
JS Algorithms & Data Structures
Node.js Best Practices
おわりに
フロントエンドのトレンドは興味深い傾向を示しています。 Svelteは今後も成長し続けるでしょうか?
あるいは、WebコンポーネントなどWeb標準の採用が増えるでしょうか?
2019年の最も興味深い話のひとつは、AppleがWebコンポーネントを使用する音楽アプリをリリースしたというものであり、そしてこれはUIフレームワークのひとつである Stencil でコンパイルされています。 Webコンポーネントが実アプリに使用された例です。 JavaScriptがネイティブモジュールを使用するアプリをリリースできるという事実は、大きな改善です。
バックエンドでは、Node.jsは登場から10年経ちましたが、今でも新しい機能が精力的に追加され続けています。 v13.2.0の時点で、Node.jsはESモジュールをそのままサポートし、WebAssemblyモジュールをインポートできます。 Workers Threads APIを使えば重いプログラムも実行することができます。
ブラウザにおいてもNode.jsにおいてもプラットフォームは進化し続けており、これがJavaScriptの開発を非常にエキサイティングなものにしてくれます。 ご清聴ありがとうございました。 また来年お会いしましょう!
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位で、まだトレンドに入っています。