検索
ニュース

JavaScript関連プロジェクトのランキング「2020 JavaScript Rising Stars」が公開：GitHubリポジトリの年間スターを比較

「Best of JavaScript」プロジェクトは、2020年に最も注目を集めたJavaScriptプロジェクトなどのランキング「2020 JavaScript Rising Stars」を発表した。総合ランキングでは、過去5年間首位を維持した「Vue.js」を抜いて、「Deno」が首位を獲得した。

Share
Tweet
LINE
Hatena

　「Best of JavaScript」プロジェクトは、2020年に最も注目を集めたJavaScriptプロジェクトなどのランキング「2020 JavaScript Rising Stars」を発表した。

　Best of JavaScript（Best of JS）は、Webプラットフォームと「Node.js」関連の約1500のオープンソースプロジェクトについてリストを毎日更新しているWebサイト。大阪府在住のフルスタックWeb開発者ミカエル・ランボー氏が運営している。

　直近の1日、7日、30日、12カ月にGitHubリポジトリが獲得したスター数でランキングを決めており、2020 JavaScript Rising Starsは、2020年の1年間にGitHubリポジトリが獲得したスター数で各種カテゴリー別にランキングしたもので、今回が5回目だ。リストの他に解説もある。ランボー氏と、オーストラリア在住のフロントエンド開発者ベンジャミン・ブラックウッド氏などが作成した（日本語訳はRana Kualu氏）。

総合ランキングはDeno、Vue.js、React

　総合ランキング1〜5位は次の通り。プロジェクト名の後の数字は、1年間に獲得したスター数を示す。

  1. Deno（30200）　セキュアなJavaScriptとTypeScriptのランタイム
  2. Vue.js（22500）　Webアプリケーションのユーザーインタフェース（UI）を構築するためのプログレッシブJavaScriptフレームワーク
  3. React（19800）　UIを構築するための宣言的、効率的、柔軟なJavaScriptライブラリ
  4. Playwright（19700）　「Chromium」「Mozilla Firefox」「WebKit」を単一のAPIで自動化するNode.jsライブラリ
  5. Visual Studio Code（VS Code）（19100）　コードエディタ

　今回、過去5年間首位を維持したVue.jsを抜いて、Denoが首位を獲得した。DenoはNode.jsの生みの親であるライアン・ダール氏による新しいJavaScriptランタイム。デフォルトでTypeScriptもサポートしている。Node.jsの10年間の経験を生かし、多くの改善が施されているため、Node.jsの後継と見られることが多い。

　Denoの躍進は、次の2つの大きなトレンドを裏付けているという。

  • フロントエンドとクライアント側でのTypeScriptの台頭
  • 「Snowpack」のようなソリューションでオンザフライにインポートされるECMAScript 2015（ES2015）モジュールの台頭

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

　Best of JSはカテゴリー別のランキングも発表した。それぞれのカテゴリーの1〜3位は次の通り。

  1. Vue.js
  2. React
  3. Angular（13300）　モバイルとデスクトップWebアプリケーションを構築するためのフレームワーク

　例年と同様にVue.jsとReactが首位を争った。2019年は「Angular」を抜いて「Svelte」が3位となったが、2020年はAngularが3位に返り咲いた。なお、ミニマルなアクティブフレームワークである「Alpine.js」が初めて5位に入った。

Node.jsフレームワーク

  1. Next.js（15500）　Reactフレームワーク
  2. Strapi（11800）　オープンソースNode.jsヘッドレスCMS（Content Management System）
  3. Nest（10300）　サーバサイドアプリケーションを構築するためのプログレッシブNode.jsフレームワーク

　2018年に首位だった「Next.js」が再び首位に立った。


2021年1月27日時点ではNext.jsが「The Best of JavaScript, HTML and CSS」のトップとなっていた（出典：Best of JavaScript）

　Node.jsフレームワークは2種類に分かれる。Next.jsや「Nuxt」のようなフルスタックフレームワークが一つ。もう一つは2019年に首位となった「Nest」や「Fastify」などが属する、サーバ側のみで動作する古典的なフレームワークだ。

Reactエコシステム

  1. Next.js
  2. React Query（13600）　Reactで非同期データをフェッチ、キャッシュ、更新するためのフック
  3. Recoil（11100）　Reactアプリケーション用の実験的な状態管理ライブラリ

　Next.jsは、Reactアプリケーションを構築するための最も有名なソリューションに成長した。「React Query」「Recoil」「React Hook Form」などのサポートライブラリは、フックを主軸に進化、成熟してきた。それぞれがReact開発の一部を簡素化する。

　2020年12月にはReactアプリケーションの将来の開発基盤と位置付けられる「React Server Components」が発表されている。

Vueエコシステム

  1. Vue Element Admin（16000）　Vueの管理インタフェースを提供するフロントエンドソリューション
  2. Vite（14100）　次世代フロントエンドツール
  3. Nuxt（8200）　直感的なVueフレームワーク

　2020年のVueコミュニティー最大のニュースは、「Vue3」のリリースだった。Vue2に存在した幾つかの問題を解決する「Composition API」という仕組みが導入されている。この他、2020年には、新しいWeb構築ツールである「Vite」が開発された。

Angularエコシステム

  1. ngx-admin（2500）　カスタマイズ可能な管理ダッシュボードテンプレート
  2. Material Design for Angular（1500）　Angularのコンポーネントインフラ、マテリアルデザインコンポーネント
  3. Scully（1400）　静的サイトジェネレーター

　首位と2位は2019年と変わらなかったが、「Scully」が初めて3位に浮上した。Angularは2020年に3つのメジャーバージョン（バージョン9、10、11）がリリースされている。バージョン9では「Ivyコンパイラ」の導入により、バンドルサイズが減少し、ビルドプロセスも大きく改善された。

ビルドツール

  1. esbuild（16600）　極めて高速なJavaScriptバンドラー、ミニファイアー
  2. Rome（14200）　リンターやコンパイラ、バンドラーなどを提供するツールチェーン。JavaScriptやTypeScript、HTML、Markdown、CSSに対応する
  3. Vite

　2020年はビルドツールの当たり年で、多くの新しいトレンドが生まれた。4位に入ったSnowpackと3位のViteは、ECMAScriptモジュールファーストのアプローチを取っている。5位の「Webpack」は、設定が複雑過ぎるといわれることが多く、よりシンプルに書ける「Parcel」や「Rollup」が成熟してきた。だが、ビルドツールの中心はいまだにWebpackであり、Webpackの新しいキャッシングレイヤーは、ビルドパフォーマンスを大幅に改善する。

CSSフレームワーク

  1. Tailwind CSS（15500）　迅速なUI開発を実現する、“ユーティリティーファースト”のCSSフレームワーク
  2. Bootstrap（8200）　世界で最も人気があるとされるフロントエンドのコンポーネントライブラリ。レスポンシブWebデザインでモバイルファーストを実現する。HTMLとCSS、JavaScriptで構成されている
  3. Bulma（4200）　FlexboxベースのモダンCSSフレームワーク

　「Tailwind CSS」の躍進と、そのユーティリティーファーストのアプローチを強調する目的で、今回の調査ではこのセクションを追加した。Tailwind CSSは、開発者がクラス名を合成してページやコンポーネントをスタイル化するための命名規則を提供している。

CSS in JavaScript

  1. Styled Components（4800）　CSSを記述して管理するためのReactとReact Native用のライブラリ
  2. Twin（2800）
  3. Emotion（2500）

テストツール

  1. Playwright
  2. Storybook（12300）　構築プロセスとドキュメントの両方を効率的で使いやすくする統合されたUIシステムを作成できるJavaScriptツール
  3. Puppeteer（10600）

モバイル

  1. React Native（8800）　AndroidとiOSの両方でネイティブに動作するモバイルアプリケーションを開発するためのJavaScriptフレームワーク。Facebookで開発されたReactJSをベースにしている
  2. Expo（4300）
  3. Quasar（400）

JavaScriptコンパイラ

  1. TypeScript（10400）　JavaScriptのスーパーセットであり、モジュールやクラス、インタフェースなどの型安全性と機能を提供するため、堅牢（けんろう）なアプリケーションの作成が容易になる
  2. swc（3400）
  3. Babel（2700）

状態管理

  1. Recoil
  2. XState（5100）　有限ステートマシンやステートチャートを作成、解釈、実行するためのライブラリ
  3. Immer（4200）

GraphQL

  1. Gatsby（7400）　Reactをベースに、Webpackと「GraphQL」の技術を用いたオープンソースの静的Webサイトジェネレーター
  2. Hasura GraphQL Engine（5900）
  3. Redwood（5500）

学習リソース

  1. JS Algorithms & Data Structures（31900）
  2. Node.js Best Practices（20200）
  3. You Don't Know JS（18000）

　首位となった「JS Algorithms & Data Structures」には目次を日本語化した「JavaScriptアルゴリズムとデータ構造」もある。


JavaScriptベースの一般的なアルゴリズムとデータ構造について多数のサンプルを紹介している（出典：JavaScriptアルゴリズムとデータ構造）

Copyright © ITmedia, Inc. All Rights Reserved.