GitHubのトレンドで振り返る2020年のJavaScript

 · 22 min read

れこです。この記事はNode.js Advent Calendar 2020の 12 日目の記事です。今回は年の瀬ということで酒の肴になりそうな記事を書きたいと思います。

本記事では 2020 年に GitHub のトレンドに上がったリポジトリをいくつかの切り口で集計して、独断と偏見で感想を付け加えます。
この記事を酒の肴に 2020 年の JS/TS について懐かしんでもらえたら幸いです。

集計方法

GitHub のトレンドは過去の履歴が残っていないので非公式に集計されたデータを利用しています。

  • 集計期間は 2020/01/01 から 2020/12/05 までの 341 日間
  • 対象言語はJavaScriptとTypeScriptのみ
  • トレンドの過去データのソースはxiaobaiha/github-trending-historyを参照
    • 日ごとにまとめた markdown になっており、remark で AST→ データ化しました

xiaobaiha/github-trending-historyのデータをベースに加工した集計用の生データはこちらに CSV として公開しています。

GitHub がそのリポジトリをなんの言語と見なしたかをもとに集計対象を決定していることにご留意ください。また、別言語で書かれた JS 向けのツール（swc, esbuild など）、CSS フレームワークなども対象外とします。

なお、本記事では話題になったリポジトリを振り返る指標として GitHub のトレンドおよびスター数を使用しています。これらは話題性やバズに連動する値だと思っていますが、トレンドに載ることやスター数の大小がそのリポジトリの良し悪しの決定的な因子ではないと筆者は思っています。つまりこの記事に載ってるから良い、載ってないから悪いということは全くありません。

説明が必要そうなCSVカラムの一覧を開く
  • firstAppearedOn: 2020/1/1 移行ではじめてトレンドに載った日
  • appearedCount: 集計期間にトレンドに載った日数
  • appearedDates: 集計期間にトレンドに載った日の一覧（カンマ区切り）
  • stargazers20200101: 2020/1/1 時点での star 数（リポジトリが存在しなかった場合は 0）
  • stargazers20201206: 2020/12/6 時点での star 数（リネームなどにより最新状況が取得できなかった場合は空欄）
  • stargazers2020Diff: stargazers20201206とstargazers20200101の差
  • topics: 2020/12/6 時点でそのリポジトリについているトピックの一覧（カンマ区切り）

今年作られた・今年から流行ったリポジトリ

まずは今年作られた・今年から流行ったリポジトリを見てみます。
単純にトレンドへの掲載率やスター数の累計で集計すると既知のものばかりになるので今年誕生して流行った or 今年から流行り始めたリポジトリに絞って集計します。

  • 2020 年にはじめてトレンド入りした時点でスター数が 100 未満
  • 今年獲得したスター数（集計開始時のスター数と、集計終了時のスター数の差）が大きい順にソート
  • 差分が+5000 以上のリポジトリを抽出

行頭にある矢印の見方は2020/1/1のスター数->2020/12/6のスター数です。

microsoft/playwright

https://playwright.dev/

今年のリポジトリだったことに驚きです。趣味でも業務でもめちゃくちゃお世話になっています。
playwight は Chromium/Firefox/WebKit の３大ブラウザを透過的な API で扱えるようにした MS 謹製の headless ブラウザ操作ツールです。
この playwright を E2E テスト用にラップしたmicrosoft/playwright-testや、ブラウザを起動し GUI での操作を記録して JS のコードを生成してくれるmicrosoft/playwright-cliなど、周辺ツールも少しずつ整ってきました。

anuraghazra/github-readme-stats

7 月ごろに GitHub のプロフィールに載せる README ファイルが作れるようになりましたね。手間をかけずにある程度いい感じになるパーツを生成してくれる系ツールの１つです。私のデータで生成された画像がこちらです。

Leko's github stats

rome/tools

Rome は Babel と yarn の作成者である Sebastian McKenzie と Facebook の React Native チームが作成した実験的な JavaScript ツールチェーンである。Rome には、コンパイラ、リンター、フォーマッター、バンドラー、およびテストフレームワークが含まれており、「JavaScript ソースコードの処理に関連するあらゆるもののための包括的なツール」を目指している。

— Facebook が実験的な JavaScript ツールチェーンである Rome を発表

Facebook の Rome かなり話題になりましたね。個人的には ESLint のルールを自作したりバンドルのチューニングをしたり細かい設定を自由にできる方が好きなのであまり関心がないのですが「使用するツールが多くてとっつきにくい」「適切な選択をするための学習コスト」などと言った JS の大きな問題に挑んでる挑戦的なリポジトリだと思います。

facebookexperimental/Recoil

Recoil も話題になりましたね。発表されたのは 5 月ごろだったと記憶しています。
私は Rx みたいなものだと理解しましたが、Rx を製品でちゃんと使ったことないので解釈違いかもしれません。面白いし気にはなるけど製品に突っ込むことはなさそうだと個人的に思っています。

vitejs/vite

死語ですが「ジェバンニが一晩でやってくれました」シリーズですね。esbuild が早いぞと話題になっているころ、Vue.js の作者 Evan You がバンドラのパフォーマンスについて悶々と考えた結果生まれた高速な dev サーバです。Vue.js 作者が作っており名前もそれっぽいので Vue.js 専用のツールなのかと思っていましたが、React や preact でも使える作りになっています。

excalidraw/excalidraw

excalidrawは手書きっぽい優しい雰囲気の図形が描ける描画ツールです。ライブラリというよりは web アプリです。UI はミニマルですが完成度はかなり高いと思います。なんと同時編集もできますし、公式にホスティングされているアプリとして使うのはもちろん（React のみですが）埋め込みにも対応しており、ラフなアイデアを共有したり議論するのにかなり使えそうな予感がしています。
年始に颯爽と現れ描画ツール界隈がザワつきました。日本だと複雑 GUI の会で話題になっていたのを見かけました。

rough-stuff/rough-notation

2020 12 08 23 52 25

全く話題にならなかったと思うんですが個人的に好きなライブラリです。Web ページに ↑ スクショのようなマーカーペンや手書きっぽいアノテーションを加えられるライブラリです。前述の excalidraw も内部で使用している Rough.js を使っており、こちらは web アプリというよりライブラリです。デモはこちらから。
アニメーションがヌルヌル動くし、手書きっぽさもかなり自然で、アノテーションを文字に被せてもテキスト選択に干渉しません。ブログやプレゼン資料の強調に使うと面白いかもしれません。

2020 年にもっともスターを獲得したリポジトリ

次にリポジトリの作成日に関係なく 2020 年もっともスターを獲得したリポジトリを見ていきます。

  • 2020 年に一度以上トレンドに載った
  • 今年獲得したスター数が大きい順にソート
  • 上位 20 件のみ表示
  • 前述の”今年作られた・今年から流行ったリポジトリ”と重複しているものは取り消し線を入れてます

では一覧です。

おおよそ想像していた通りです。もともとスター数を集めている有名なリポジトリがさらに star を伸ばしたという感じです。

vercel/next.js

Next.js に関してはこの前のNext.js Confで発表された v10 の新機能たちでザワついたことが記憶に新しいと思います。個人的にはこれまでのサーバサイドフレームワークの責務を再定義したと思える大きなリリースだと思います。Front-End Study #1のKeynote トーク：Frontend 領域を再定義するでも Next.js（とそれをラップしたフルスタックフレームワーク時代の開幕）について触れられていましたね。Next.js をベースにしたフルスタックフレームワーク Blitz もランクインしていますがあまり関心はなくてピックアップはしません。

denoland/deno

Deno は 2018 年に10 Things I Regret About Node.js発表されてから２年の時を経て、今年の 5 月にv1 がリリースされました。今後の展開に注目したいです。

v1 が出たころに unstable の Rust plugin を試したんですが、stable になる前に機能ごと削除されるかもしれません。こちらの Issue から議論に参加できます。

— Remove unstable native plugins · Issue #8490 · denoland/deno

vuejs/vue

Vue に関しては今年の 7 月に v3 RC をアナウンスし、その後 9 月に Vue.js Amsterdam にてV3.0 にアナウンスされて賑わいましたね。詳しくは本家のキーノートをみた方が確実ですが、日本語だと Vue3 に関してはこちらのトークがわかりやすかったです。

— まちにまった Vue.js 3 - Speaker Deck

Node.js 関連のトピックに絞った場合

次に Node.js に関連したトピックを持ったリポジトリを比較します。

  • nodejsまたはnodeトピックがついているリポジトリを抽出
  • 2020 年に 5000 スター以上獲得したリポジトリを抽出
  • 今年獲得したスター数が多い順にソート
  • ここまでの内容と重複しているものは取り消し線を入れてます

※ トピックは人間が個々のさじ加減で付与したメタデータのため、Node.js 向けのリポジトリに必ずしもこれらのトピックがついてるわけではありませんし、トピックがついているからと言って必ずしも Node.js 向けとも限りません。

Node.js でサーバサイドの実装してる人にとって特に目新しいものは少ないと思います。
個人的には fastify や Apollo Server が食い込んでくると思ったのですが、残念ながら fastify のスター数の遷移は+3783(12809->16592)、Apollo Server は+2037(8620->10657)でした。

Prisma

Prisma1 は GraphQL が今より全く浸透してない時代から GraphQL ベースのアプローチを始めた挑戦的なリポジトリでした。GraphiQL よりリッチな GraphQL playground を作っていたり（今も Apollo Server の playground などで現役）するので、直接 Prisma に触れたことがなくても間接的に触ったことのある方も多いと思います。そんな Prisma は今年の 5 月にPrisma 2.0 ベータがアナウンスされ、6 月に2.0.0 を公開しました。
1 までは独立した HTTP サーバの印象が強かったですが、2 からは O/R マッパ の印象が強くなっています。Prisma は GraphQL のリソルバを愚直に実装すると起こりがちな N+1 問題に対してクエリを最適化する Data Loader 層の工夫があったり色々といいことがあります。こちらの記事に欲しい情報がまとまっていたので貼っておきます。

— GraphQL と相性の良い ORM Prisma - Qiita

トレンドに上がったリポジトリのトピック

次はリポジトリではなく今年トレンドに上がったリポジトリのトピックを集計しました。

  • 2020 年に一度以上トレンドに載ったリポジトリを抽出
  • 5 つ以上のリポジトリに共通してつけられているトピックが対象

2020 12 09 00 32 59

画像が大きいので中心部分を抜粋しました。こちらのリンクから SVG の全体画像が確認できます。

— Bubble Chart / Shingo Inoue / Observable

同じことを来年もやってこの記事と比較したいです。

トレンド常連組

最後に GitHub のトレンド常連組を載せて終わります。

  • 集計期間内に 50 日以上トレンドに載ったリポジトリを抽出
  • トレンドに出現した日数をカウント

目新しさが全くないので過去累計のスター数の変遷のグラフもつけてみました。

2020 12 06 03 59 04

view chart online

もっともトレンドに乗った日数が多かったのは Angular でした。
以上です。良いお年を！

JavaScriptTypeScriptGitHub
© 2012-2022 Leko