Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

00.png

JavaScriptライブラリのトレンドを紹介しているbestofjs.orgが、2020年に最もホットであったJavaScriptライブラリのランキングを発表しました。
選考基準は現在のスター数ではなく、『2020年の一年間で増えたスターの数』です。
過去流行っていたけど落ち目となった技術は出てこないので、最近注目されている技術がわかります。

ちなみに2016年の総合ランキング1位はVue.js、2017年の総合ランキング1位はVue.js、2018年の総合ランキング1位はVue.js、2019年の総合ランキング1位はVue.jsです。

以下は2020年のランキング、2020 JavaScript Rising Starsの日本語訳です。

JavaScript ライジングスター 2020

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

このランキングのコンセプトは、昨年までと同じです。
すなわち、2020年の一年間でGitHubに追加された☆の数を比較することで、どのプロジェクトが最も注目を集めたかを数字で確認します。

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

総合ランキング

04.png

1位: Deno
2位: Vue.js
3位: React
4位: Playwright
5位: VS Code
6位: esbuild
7位: Vue Element Admin
8位: eDEX-UI
9位: Next.js
10位: Tailwind CSS

2020年は様々な理由で特別な年になりました。
最も目を引くことは、これまで5年間首位を独走してきたVue.jsを抜き去り、Denoが一位になったことです。

DenoはNode.jsの生みの親Ryan Dahlによる新たなJavaScriptランタイムです。
Node.jsのこれまでの10年間の経験と反省を生かし、多くを改善しているため、Node.jsの後継と思われがちです。
主な機能としては、

  • デフォルトでTypeScript対応。ただしJavaScriptでコードを書くこともできる。
  • 一極集中したパッケージマネージャがなく、任意の依存関係を任意のURLから読み込むことができる。
  • Deno標準ライブラリは、Node.jsでは個別にパッケージをインストールしなければならなかったような一般的な用途のライブラリを最初から提供する。
  • Denoは可能なかぎりWeb標準に従っている。(例:Fetch API)
  • インポートはES Modulesを使用。
  • テストランナーやデバッガーを標準装備。

Denoのエコシステムはまだまだ発展途上ですが、Denoの話題性を考えると、今後大きく変化することが期待されます。

Denoの成長は、2つの大きなトレンドを裏付けています。

  • フロントエンドとクライアントサイドでのTypeScriptの台頭
  • Snowpackなどのソリューションによってオンザフライで提供されるES Modulesの成長。

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

1位: Vue.js +22.5k
2位: React +19.8k
3位: Angular +13.3k
4位: Svelte +12.0k
5位: Alpine.js +11.5k
6位: vue-next +5.9k
7位: Solid +3.3k
8位: Preact +3.0k
9位: htmx +2.7k
10位: Stimulus +2.0k

いつものようにVue.jsReactが頂上決戦を繰り広げています。

その後ろでは、2019年に3番手をSvelteに奪われたAngularが、ふたたびその位置を奪還しました。

ベスト5の新顔はAlpine.jsで、これはLaravel LiveWireの作者によって作られたミニマルなリアクティブフレームワークです。
Vue.jsとAngularの両方から、カスタムHTMLディレクティブや双方向バインディングといったアイデアを拝借しています。
HTMLに古き良き<script>タグを追加するだけで簡単に使うことができ、ビルドプロセスも不要で、HTMLマークアップだけで全てを動かすことができます。
本格的なフレームワークを導入することが困難な既存のWebページをさくっと強化する目的については、最も適切なソリューションであるかもしれません。

Webページにインタラクティブ性をもたらすだけの非常に軽量なソリューションであるため、Elixir Phoenixのようなフレームワークともうまく連携して同居できます。
Alpine.jsTailwind CSSを最初からまとめておいたPETALのようなプロジェクトも存在します。
こちらについては後ほど語りましょう。

Node.js フレームワーク

1位: Next.js +15.5k
2位: Strapi +11.8k
3位: Nest +10.3k
4位: Nuxt +8.2k
5位: Blitz +6.0k
6位: Redwood +5.5k
7位: Express +4.6k
8位: Fastify +3.8k
9位: umi +2.9k
10位: Koa +2.3k

Node.jsフレームワークには大きく2つの種類が存在します。

ひとつはNext.jsNuxtのようなフルスタックフレームワークで、ReactやVue.jsなどをサーバサイドに持ってくるアプリケーション構築方法については賛否両論があります。

もうひとつは昨年のチャンピオンNestFastifyなどが属する、サーバ側のみで動作する古典的なフレームワークです。

この分野では2018年にトップだったNext.jsが再びチャンピオンに返り咲きました。
当初はReactをSSRするだけのソリューションとして名を上げましたが、今ではReactでフルスタックWebアプリケーションを構築するソリューションの筆頭になっています。
最新バージョンでは動的ページと静的ページの垣根を取り払うIncremental Static Regenerationにも対応し、多くのユースケースで最適な選択肢になりつつあります。

フルスタックといえば、BlitzRedwoodは、それひとつだけで完全なWebアプリケーションを構築できるという最高の開発者体験を提供することを目的としたプロジェクトです。

それにしても浮沈の激しいJavaScriptの世界で、11年前に誕生したExpressがいまだに一定の地位を保っているのは興味深いですね。

React エコシステム

1位: Next.js +15.5k
2位: React Query +13.6k
3位: Recoil +11.1k
4位: Ant Design +10.9k
5位: React Hook Form +10.8k
6位: Material UI +10.6k
7位: Create React App +10.1k
8位: Chakra UI +10.0k
9位: swr +8.9k
10位: Gatsby +7.4k

2020年のReactエコシステムのテーマは安定性でした。
React17では破壊的変更を行わず、将来に向けての布石を仕込みました。
それがReact Server Componentsです。

React Server Componentsはクライアントのバンドルサイズを縮小し、起動にかかる時間を改善します。
さらにデータの取得、データベースやファイルシステムなどデータソースへのアクセスも簡単になります。

Next.jsは、Reactアプリケーションを構築するための最も有名なソリューションに成長しました。
React Server Componentsの最初のアプリになることでしょう。
React QueryRecoilReact Hook Formといったサポートライブラリは、hooksを主軸に進化、円熟してきました。
それぞれがReact開発の一部を簡素化してくれます。
これらのコンポーネントライブラリを組み合わせることで、React開発者はこれまで以上に多くのツールを手に入れることができるでしょう。

Vue エコシステム

1位: Vue Element Admin +16.0k
2位: Vite +14.1k
3位: Nuxt +8.2k
4位: Element Plus +7.3k
5位: vue-next +5.9k
6位: Vuetify +5.8k
7位: Wiki.js +5.7k
8位: Element +5.5k
9位: Ant Design Vue +4.2k
10位: Vant +4.1k

2020年のVueコミュニティ最大のニュースは、Vue3のリリースです。

Vue2に存在した幾つかの問題を解決するために、Composition APIという仕組みが導入されました。

  • コンポーネント内の論理的な繋がりによってコードを整理することが難しかった。
  • コンポーネントをまたいだコードの再利用が容易になる。 (Vue2のmixin、mixing factory、scoped slots等では不十分だった)
  • TypeScriptサポートが改善された。

バージョン3で導入された変更については、マイグレーションガイドをチェックしてみてください。

2020年には新たなWeb構築ツール、Viteが誕生しました。
ES modulesに対応し、コマンドラインからVueアプリケーションを構築する最速の方法です。

Angular エコシステム

1位: ngx-admin +2.5k
2位: Material Design for Angular +1.5k
3位: Scully +1.4k
4位: Angular CLI +1.3k
5位: NG-ZORRO +1.2k

Angularのランキングは昨年とあまり変わりませんが、3位に新たなプロジェクトが登場しました。
ScullyはAngularにJamstackをもたらす静的サイトジェネレータです。
このプロジェクトは2019年12月に登場し、そしてわかりやすいドキュメントが存在します。

Angularは2020年に3つのメジャーバージョンがリリースされました。

2月にはバージョン9がリリースされました。
主な変更点はIvyコンパイラの導入で、これによってバンドルサイズが減少し、またビルドプロセスに大きな改善がもたらされました。
さらに年の後半にはバージョン10バージョン11がリリースされました。

Angularチームの2020年後半の主な仕事は、コミュニティの声に耳を傾けることでした。
コミュニティのニーズを理解するために、issueやPRに対応することに大きな努力を行いました。
また、チームが取り組んでいることの共有や、今後のロードマップの公開も行いました。

ビルドツール

1位: esbuild +16.6k
2位: Rome +14.2k
3位: Vite +14.1k
4位: Snowpack +10.1k
5位: Webpack +4.5k

2020年はビルドツールの当たり年で、多くの新しいトレンドが産まれました。

SnowpackViteはES modulesの将来に賭けたアプローチです。
開発中のコードはバンドルせず、プロダクションコードのビルド時のみバンドルする方針で、非常に高速なフィードバックループを持っています。

swcesbuildは、それぞれRustとGoで書かれており、TypeScriptをサポートしていて、そして信じられないほどの高速で動作します。

Webpackは設定が複雑すぎると言われることが多く、よりシンプルに書けるParcelRollupが成熟してきました。
とはいえビルドツールの中心はいまだWebpackであることは変わらず、そしてWebpackの新たなキャッシングレイヤはビルドのパフォーマンスを大幅に改善します。

Monorepoがメインストリームになりつつあります。
YarnとLernaが広く使われ、そしてnpm 7も参加してきました。

個人的に2021年の去就を注目しているのはRomeToastTurborepoです。

CSSフレームワーク

1位: Tailwind CSS +15.5k
2位: Bootstrap +8.2k
3位: Bulma +4.2k
4位: new.css +3.1k
5位: Halfmoon +2.0k

昨年はなかった項目ですが、Tailwind CSSの躍進と、そのユーティリティファーストの姿勢を評してこのセクションを追加しました。

BootstrapBulmaといった既存のCSSフレームワークに比べて、開発者がクラス名を合成してページやコンポーネントをスタイル化するための命名規則を提供しています。
State of CSSのアンケートにおいても、最も満足度の高いフレームワークになっています。
先日バージョン2がリリースされ、ダークモードなど多くの新機能が追加されました。

CSS in JavaScript

1位: Styled Components +4.8k
2位: Twin +2.8k
3位: Emotion +2.5k
4位: Linaria +1.8k
5位: Theme UI +1.8k

テスト

1位: Playwright +19.7k
2位: Storybook +12.3k
3位: Puppeteer +10.6k
4位: Cypress +9.0k
5位: Headless Recorder +6.0k

モバイル

1位: React Native +8.8k
2位: Expo +4.3k
3位: Quasar +4.0k
4位: Ionic +2.8k
5位: Sonar +1.8k

JSコンパイラ

1位: TypeScript +10.4k
2位: swc +3.4k
3位: Babel +2.7k
4位: Reason +818
5位: Flow +799

状態管理ライブラリ

1位: Recoil +11.1k
2位: XState +5.1k
3位: Immer +4.2k
4位: Zustand +3.2k
5位: Redux +3.2k

GraphQL

1位: Gatsby +7.4k
2位: Hasura GraphQL Engine +5.9k
3位: Redwood +5.5k
4位: Prisma +4.0k
5位: Apollo client +2.4k

学習リソース

1位: JS Algorithms & Data Structures +31.9k
2位: Node.js Best Practices +20.2k
3位: You Don't Know JS +18.0k
4位: Clean Code +15.1k
5位: 30 seconds of code +13.3k

まとめ

Best of JSが追跡している多くのカテゴリにおいて、幾つかの新しい潮流が発生し、JavaScriptの世界は今年も素晴らしい年になりました。

バックエンド開発者は今すぐDenoを使って、依存を気にすることなくTypeScriptを楽しむことができます。

フロントエンド開発者はesbuildSnowpack、そしてViteなど、より高速でシンプルなビルドソリューションを手に入れることができました。

ツールにおいては、NPM 7がひとつのリポジトリで複数のパッケージを扱えるようになるworkspacesをリリースしました。
これはライバルであるYarnが先に提供していた大きな利点のひとつです。

スタイルについては、よりシンプルなコンセプトを中心としたエコシステムを構築する、Tailwind CSSのような方向性のソリューションが他にも現れています。

2021年には何が期待できるでしょうか?

React Server Componentsがどのようなものになるかは興味深いところです。

Sebastian McKenzie(BabelやYarnを作った人)がRomeにフルタイムで入っている今、そのJavaScriptツールを統一しようとする試みはどこまで進むでしょうか。
コンパイル、テスト、Lint、その他全て、全てが入ったたったひとつの依存は完成するでしょうか。

我々は、フルスタックフレームワークであるRedwoodにも注目しています。
これはGraphQLと相性が良く、そしてデータハンドリングに"cells"と呼ばれるユニークな仕組みを使っています。

ユーザのフィードバックに基づいた、本調査とは別観点からの結果を見たいのであれば、State of JSも参照してください。

みてくれてありがとう。
また来年会いましょう!

感想

可及的速やかにReactが絶滅しますように。

このランキングが始まって以来4年間トップをひた走っていたVue.jsを抑えて、なんとDenoがトップに立ちました。
ただ、30kの半数近く13.7kは、バージョン1が出た5月の一ヶ月だけで稼いでいます。

01.png

ご祝儀にしても極端すぎるような。
試しに5月を除いてみると7位くらいです。
とはいえ非常に注目されていることには間違いないので、今後の技術の採用基準の視野に入れてもいいかもしれません。

ただし、あくまで☆の増加数であって、ダウンロード数でも実際に運用されているサイト数でもないので、注目されている=最適な技術である、は必ずしも成り立たないことに注意が必要です。
アーリーアダプター()以外の普通の開発者は、普通に枯れた技術を使うのが一番です。

たとえば昨年Angularを抜き去り、すわ新時代の到来かと思われたSvelteも、今年はあっさりAngularに抜き返されました。
Svelteが即座に消え去るとは思いませんが、今後RiotやAureliaのようにフェードアウトしていってもおかしくありません。
もちろん何かの拍子に再躍進する可能性もあるでしょう。
そのような将来が不安定な技術はそういうのが好きな連中に任せておいて、業務に取り入れるのは十分に成熟してからも遅くありません。
だいたいWebサイトを使うユーザは、そのサイトが何の技術でできているかなんて一切興味ありませんからね。
Next.js + TailwindだろうがjQuery + べた書きstyle要素だろうが、見た目が同じならそれは同じものです。

もちろん、そういうのが好きな人はどんどん手を出しましょう。
ちなみにこのJavaScript Rising StarsのサイトはNext.jsでできています。
コマンド幾つか打つだけでローカルサーバが立ち上がるのでとっても楽。
ただ昨年はホットリロード対応してたはずなんだけど今年は手動リロードしないとだめだった。なんでだろう?(調べてない)

Houkago Atelier Toiro ha iizo

02.png

rana_kualu
不労所得で生きたい。
https://twitter.com/rana_kualu
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away