れこです。この記事はNode.js Advent Calendar 2020の 12 日目の記事です。今回は年の瀬ということで酒の肴になりそうな記事を書きたいと思います。
\n本記事では 2020 年に GitHub のトレンドに上がったリポジトリをいくつかの切り口で集計して、独断と偏見で感想を付け加えます。
\nこの記事を酒の肴に 2020 年の JS/TS について懐かしんでもらえたら幸いです。
GitHub のトレンドは過去の履歴が残っていないので非公式に集計されたデータを利用しています。
\nJavaScriptとTypeScriptのみxiaobaiha/github-trending-historyのデータをベースに加工した集計用の生データはこちらに CSV として公開しています。
\nGitHub がそのリポジトリをなんの言語と見なしたかをもとに集計対象を決定していることにご留意ください。また、別言語で書かれた JS 向けのツール（swc, esbuild など）、CSS フレームワークなども対象外とします。
\nなお、本記事では話題になったリポジトリを振り返る指標として GitHub のトレンドおよびスター数を使用しています。これらは話題性やバズに連動する値だと思っていますが、トレンドに載ることやスター数の大小がそのリポジトリの良し悪しの決定的な因子ではないと筆者は思っています。つまりこの記事に載ってるから良い、載ってないから悪いということは全くありません。
\nstargazers20201206とstargazers20200101の差まずは今年作られた・今年から流行ったリポジトリを見てみます。
\n単純にトレンドへの掲載率やスター数の累計で集計すると既知のものばかりになるので今年誕生して流行った or 今年から流行り始めたリポジトリに絞って集計します。
行頭にある矢印の見方は2020/1/1のスター数->2020/12/6のスター数です。
今年のリポジトリだったことに驚きです。趣味でも業務でもめちゃくちゃお世話になっています。
\nplaywight は Chromium/Firefox/WebKit の３大ブラウザを透過的な API で扱えるようにした MS 謹製の headless ブラウザ操作ツールです。
\nこの playwright を E2E テスト用にラップしたmicrosoft/playwright-testや、ブラウザを起動し GUI での操作を記録して JS のコードを生成してくれるmicrosoft/playwright-cliなど、周辺ツールも少しずつ整ってきました。
7 月ごろに GitHub のプロフィールに載せる README ファイルが作れるようになりましたね。手間をかけずにある程度いい感じになるパーツを生成してくれる系ツールの１つです。私のデータで生成された画像がこちらです。
\n\n\nRome は Babel と yarn の作成者である Sebastian McKenzie と Facebook の React Native チームが作成した実験的な JavaScript ツールチェーンである。Rome には、コンパイラ、リンター、フォーマッター、バンドラー、およびテストフレームワークが含まれており、「JavaScript ソースコードの処理に関連するあらゆるもののための包括的なツール」を目指している。
\n\n
Facebook の Rome かなり話題になりましたね。個人的には ESLint のルールを自作したりバンドルのチューニングをしたり細かい設定を自由にできる方が好きなのであまり関心がないのですが「使用するツールが多くてとっつきにくい」「適切な選択をするための学習コスト」などと言った JS の大きな問題に挑んでる挑戦的なリポジトリだと思います。
\n\nrome興味なくて全くキャッチアップしてなかったのに唐突に意見求められて困惑しているけど、こういう刺激がないとどんどん鈍っていくんだろうなという危機感を感じている
— Leko / れこ (@L_e_k_o) February 28, 2020
Recoil も話題になりましたね。発表されたのは 5 月ごろだったと記憶しています。
\n私は Rx みたいなものだと理解しましたが、Rx を製品でちゃんと使ったことないので解釈違いかもしれません。面白いし気にはなるけど製品に突っ込むことはなさそうだと個人的に思っています。
\nrecoilちょろっと触ってみて、これ比較対象はReduxじゃなくてRxではと思った
— Leko / れこ (@L_e_k_o) May 16, 2020
死語ですが「ジェバンニが一晩でやってくれました」シリーズですね。esbuild が早いぞと話題になっているころ、Vue.js の作者 Evan You がバンドラのパフォーマンスについて悶々と考えた結果生まれた高速な dev サーバです。Vue.js 作者が作っており名前もそれっぽいので Vue.js 専用のツールなのかと思っていましたが、React や preact でも使える作りになっています。
\n\nOpen sourced at https://t.co/LYv5vnOv1O https://t.co/KU2LLpEmTD
— Evan You (@youyuxi) April 21, 2020
excalidrawは手書きっぽい優しい雰囲気の図形が描ける描画ツールです。ライブラリというよりは web アプリです。UI はミニマルですが完成度はかなり高いと思います。なんと同時編集もできますし、公式にホスティングされているアプリとして使うのはもちろん（React のみですが）埋め込みにも対応しており、ラフなアイデアを共有したり議論するのにかなり使えそうな予感がしています。
\n年始に颯爽と現れ描画ツール界隈がザワつきました。日本だと複雑 GUI の会で話題になっていたのを見かけました。
\nMade this in @Vjeux's Excalidraw https://t.co/9oAjdW0wAc
— jordwalke (@jordwalke) January 8, 2020
Liberating to have fewer options yet have the results look great. Stop caring so much about your stupid graphics. Every imperfection is a little reminder to stop bikeshedding and focus on communicating something. pic.twitter.com/vD1uWu4Ay5
全く話題にならなかったと思うんですが個人的に好きなライブラリです。Web ページに ↑ スクショのようなマーカーペンや手書きっぽいアノテーションを加えられるライブラリです。前述の excalidraw も内部で使用している Rough.js を使っており、こちらは web アプリというよりライブラリです。デモはこちらから。
\nアニメーションがヌルヌル動くし、手書きっぽさもかなり自然で、アノテーションを文字に被せてもテキスト選択に干渉しません。ブログやプレゼン資料の強調に使うと面白いかもしれません。
次にリポジトリの作成日に関係なく 2020 年もっともスターを獲得したリポジトリを見ていきます。
\nでは一覧です。
\nおおよそ想像していた通りです。もともとスター数を集めている有名なリポジトリがさらに star を伸ばしたという感じです。
\nNext.js に関してはこの前のNext.js Confで発表された v10 の新機能たちでザワついたことが記憶に新しいと思います。個人的にはこれまでのサーバサイドフレームワークの責務を再定義したと思える大きなリリースだと思います。Front-End Study #1のKeynote トーク：Frontend 領域を再定義するでも Next.js（とそれをラップしたフルスタックフレームワーク時代の開幕）について触れられていましたね。Next.js をベースにしたフルスタックフレームワーク Blitz もランクインしていますがあまり関心はなくてピックアップはしません。
\nDeno は 2018 年に10 Things I Regret About Node.js発表されてから２年の時を経て、今年の 5 月にv1 がリリースされました。今後の展開に注目したいです。
\nv1 が出たころに unstable の Rust plugin を試したんですが、stable になる前に機能ごと削除されるかもしれません。こちらの Issue から議論に参加できます。
\n\n\n— Remove unstable native plugins · Issue #8490 · denoland/deno
\n
\nDenoで3rd party crateを利用するRust pluginのデモ。deno_core crateがバンバン破壊的変更してるのでGitHub上に転がってるサンプルは型が合わなくて全滅してた。公式にあるソースだけが唯一参考になる。CommonMark準拠のmarkdownトランスパイルを実行するサンプルhttps://t.co/VxTonUp60x
— Leko / れこ (@L_e_k_o) June 6, 2020
Vue に関しては今年の 7 月に v3 RC をアナウンスし、その後 9 月に Vue.js Amsterdam にてV3.0 にアナウンスされて賑わいましたね。詳しくは本家のキーノートをみた方が確実ですが、日本語だと Vue3 に関してはこちらのトークがわかりやすかったです。
\n\n\n\n
\nVue 3.0 "One Piece" is here! https://t.co/jH6FfByDmX
— Vue.js (@vuejs) September 18, 2020
次に Node.js に関連したトピックを持ったリポジトリを比較します。
\nnodejsまたはnodeトピックがついているリポジトリを抽出※ トピックは人間が個々のさじ加減で付与したメタデータのため、Node.js 向けのリポジトリに必ずしもこれらのトピックがついてるわけではありませんし、トピックがついているからと言って必ずしも Node.js 向けとも限りません。
\nNode.js でサーバサイドの実装してる人にとって特に目新しいものは少ないと思います。
\n個人的には fastify や Apollo Server が食い込んでくると思ったのですが、残念ながら fastify のスター数の遷移は+3783(12809->16592)、Apollo Server は+2037(8620->10657)でした。
Prisma1 は GraphQL が今より全く浸透してない時代から GraphQL ベースのアプローチを始めた挑戦的なリポジトリでした。GraphiQL よりリッチな GraphQL playground を作っていたり（今も Apollo Server の playground などで現役）するので、直接 Prisma に触れたことがなくても間接的に触ったことのある方も多いと思います。そんな Prisma は今年の 5 月にPrisma 2.0 ベータがアナウンスされ、6 月に2.0.0 を公開しました。
\n1 までは独立した HTTP サーバの印象が強かったですが、2 からは O/R マッパ の印象が強くなっています。Prisma は GraphQL のリソルバを愚直に実装すると起こりがちな N+1 問題に対してクエリを最適化する Data Loader 層の工夫があったり色々といいことがあります。こちらの記事に欲しい情報がまとまっていたので貼っておきます。
\n\n\n
次はリポジトリではなく今年トレンドに上がったリポジトリのトピックを集計しました。
\n画像が大きいので中心部分を抜粋しました。こちらのリンクから SVG の全体画像が確認できます。
\n\n\n\n
同じことを来年もやってこの記事と比較したいです。
\n最後に GitHub のトレンド常連組を載せて終わります。
\n目新しさが全くないので過去累計のスター数の変遷のグラフもつけてみました。
\nもっともトレンドに乗った日数が多かったのは Angular でした。
\n以上です。良いお年を！