{
    "componentChunkName": "component---src-templates-blog-post-jsx",
    "path": "/post/2021-javascript-typescript-trending-history/",
    "result": {"data":{"site":{"siteMetadata":{"title":"WEB EGG","author":"Leko - CTO at Yuimedi"}},"markdownRemark":{"id":"bdbefed8-b536-593b-a37c-636c20e9a091","excerpt":"今年も GitHub のトレンドで 2021 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。 — GitHub のトレンドで振り返る 2020 年の JavaScript | WEB EGG 集計方法 GitHub…","html":"<p>今年も GitHub のトレンドで 2021 年の JavaScript/TypeScript を振り返ります。去年の記事はこちらです。</p>\n<blockquote>\n<p>— <a href=\"https://blog.leko.jp/post/2020-js-ts-trending-history/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GitHub のトレンドで振り返る 2020 年の JavaScript | WEB EGG</a></p>\n</blockquote>\n<h2 id=\"集計方法\" style=\"position:relative;\"><a href=\"#%E9%9B%86%E8%A8%88%E6%96%B9%E6%B3%95\" aria-label=\"集計方法 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>集計方法</h2>\n<p>GitHub トレンドは過去の履歴を公式に提供していないため、非公式に集計されたデータを利用しています。</p>\n<ul>\n<li>データソースは<a href=\"https://github.com/larsbijl/trending_archive\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">larsbijl/trending_archive</a>を使用\n<ul>\n<li>去年は<a href=\"https://github.com/xiaobaiha/github-trending-history\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">xiaobaiha/github-trending-history</a>を利用したが今年のデータは無かったので変更</li>\n<li>日ごとにまとめた markdown になっており、remark で AST→ データ化しました</li>\n</ul>\n</li>\n<li>集計期間は 2021/01/01 から 2021/12/15 まで</li>\n<li>対象言語は<code>JavaScript</code>と<code>TypeScript</code>のみ</li>\n</ul>\n<p>集計後のデータは<a href=\"https://docs.google.com/spreadsheets/d/1S0qz8kQHdiMoVkIZr2JQ2t770J7ZKdjfsfI_CE7HU_o/edit?usp=sharing\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">こちら</a>のスプレッドシートで公開しています。</p>\n<p><strong>GitHub がそのリポジトリをなんの言語と見なしたかをもとに集計対象を決定している</strong>ことにご留意ください。そのため別言語で書かれた JS 向けのツール（swc, esbuild など）や CSS フレームワークなどは基本的に除外されます。</p>\n<h2 id=\"2021-年に作られた2021-年から流行ったリポジトリ\" style=\"position:relative;\"><a href=\"#2021-%E5%B9%B4%E3%81%AB%E4%BD%9C%E3%82%89%E3%82%8C%E3%81%9F2021-%E5%B9%B4%E3%81%8B%E3%82%89%E6%B5%81%E8%A1%8C%E3%81%A3%E3%81%9F%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA\" aria-label=\"2021 年に作られた2021 年から流行ったリポジトリ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2021 年に作られた・2021 年から流行ったリポジトリ</h2>\n<p>まずは今年作られた・今年から流行ったリポジトリの紹介です。日時を考慮せずトレンドの掲載やスター数で集計すると既知の大御所リポジトリばかりになるので今年からトレンドになったリポジトリに絞って紹介します。</p>\n<ul>\n<li>抽出条件\n<ul>\n<li>2021 年に初めてトレンド入りした時点でスター数が 100 未満</li>\n<li>集計期間のスター数の差分が+5000 以上</li>\n<li>今年獲得したスター数（集計開始時のスター数と、集計終了時のスター数の差）が大きい順にソート</li>\n</ul>\n</li>\n</ul>\n<p>行頭にある矢印の見方は 2020/1/1 のスター数->2021/12/15 のスター数です。</p>\n<ul>\n<li>17 -> 20440(+20423) <a href=\"https://github.com/conwnet/github1s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">conwnet/github1s</a></li>\n<li>47 -> 16747(+16700) <a href=\"https://github.com/slidevjs/slidev\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">slidevjs/slidev</a></li>\n<li>20 -> 12018(+11998) <a href=\"https://github.com/pavlobu/deskreen\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">pavlobu/deskreen</a></li>\n<li>10 -> 9208(+9198) <a href=\"https://github.com/benawad/dogehouse\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">benawad/dogehouse</a></li>\n<li>11 -> 9144(+9133) <a href=\"https://github.com/VickScarlet/lifeRestart\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">VickScarlet/lifeRestart</a></li>\n<li>66 -> 8961(+8895) <a href=\"https://github.com/calendso/calendso\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">calendso/calendso</a></li>\n<li>46 -> 8810(+8764) <a href=\"https://github.com/remotion-dev/remotion\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">remotion-dev/remotion</a></li>\n<li>61 -> 8674(+8613) <a href=\"https://github.com/withastro/astro\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">withastro/astro</a></li>\n<li>49 -> 7779(+7730) <a href=\"https://github.com/alan2207/bulletproof-react\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">alan2207/bulletproof-react</a></li>\n<li>15 -> 6963(+6948) <a href=\"https://github.com/upgundecha/howtheysre\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">upgundecha/howtheysre</a></li>\n<li>57 -> 6997(+6940) <a href=\"https://github.com/mattermost/focalboard\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">mattermost/focalboard</a></li>\n<li>98 -> 6150(+6052) <a href=\"https://github.com/docmirror/dev-sidecar\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">docmirror/dev-sidecar</a></li>\n<li>77 -> 6009(+5932) <a href=\"https://github.com/sveltejs/kit\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">sveltejs/kit</a></li>\n<li>32 -> 5442(+5410) <a href=\"https://github.com/vuejs/petite-vue\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">vuejs/petite-vue</a></li>\n<li>20 -> 5407(+5387) <a href=\"https://github.com/SigNoz/signoz\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">SigNoz/signoz</a></li>\n<li>12 -> 5290(+5278) <a href=\"https://github.com/blueedgetechno/win11React\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">blueedgetechno/win11React</a></li>\n<li>12 -> 5207(+5195) <a href=\"https://github.com/nextapps-de/winbox\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">nextapps-de/winbox</a></li>\n</ul>\n<h3 id=\"conwnetgithub1s\" style=\"position:relative;\"><a href=\"#conwnetgithub1s\" aria-label=\"conwnetgithub1s permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/conwnet/github1s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">conwnet/github1s</a></h3>\n<p>GitHub のリポジトリを開いて<code>github1s.com</code>にドメインを変更すると Web 上で VSCode が立ち上がりそのリポジトリのコードが読めるという Web サービスのリポジトリです。今年の 2 月ごろに Twitter で回ってきたやつという理解です。</p>\n<blockquote class=\"twitter-tweet\"><p lang=\"en\" dir=\"ltr\">Serious productivity boost for reading code on GitHub.<br><br>1️⃣. <br>Go to any repo you are interested in on GitHub.<br><br>2️⃣.<br>Replace &quot;github&quot; with &quot;github1s&quot; (one + s) in the browser address bar.<br><br>3️⃣.<br>Enjoy browsing code like you would in VS Code.<br><br>This is huge 🔥 <a href=\"https://t.co/FVZhxDIuBC\">pic.twitter.com/FVZhxDIuBC</a></p>&mdash; ChrisKalmar.eth 🦌🦌🦌🦌🛷 (@chriskalmar) <a href=\"https://twitter.com/chriskalmar/status/1363759778858729482?ref_src=twsrc%5Etfw\">February 22, 2021</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n<h3 id=\"slidevjsslidev\" style=\"position:relative;\"><a href=\"#slidevjsslidev\" aria-label=\"slidevjsslidev permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/slidevjs/slidev\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">slidevjs/slidev</a></h3>\n<p>要は Markdown で登壇資料が作れるツールの１つです。私の登壇資料(<a href=\"https://talks.leko.jp/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">https://talks.leko.jp/</a>)は<a href=\"https://github.com/jxnblk/mdx-deck\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">jxnblk/mdx-deck</a>というツールを使っているのですが、それをさらにリッチにしたものという印象です。最近全く登壇していませんが次回登壇するときに試してみようと思います。録画や拡張性やカスタマイズ性・エディタのサポートや速度などの開発体験を重要視してるようですね。Vite, Vue 3 などを利用して作られてるようです。</p>\n<blockquote>\n<p>Features</p>\n<ul>\n<li>📝 Markdown-based - use your favorite editors and workflow</li>\n<li>🧑‍💻 Developer Friendly - built-in syntax highlighting, live coding, etc</li>\n<li>🎨 Themable - theme can be shared and used with npm packages</li>\n<li>🌈 Stylish - Windi CSS on-demand utilities, easy-to-use embedded stylesheets</li>\n<li>🤹 Interactive - embedding Vue components seamlessly</li>\n<li>🎙 Presenter Mode - use another window, or even your phone to control your slides</li>\n<li>🧮 LaTeX - built-in LaTeX math equations support</li>\n<li>📰 Diagrams - creates diagrams with textual descriptions</li>\n<li>🌟 Icons - access to icons from any iconset directly</li>\n<li>💻 Editors - integrated editor, or extension for VS Code</li>\n<li>🎥 Recording - built-in recording and camera view</li>\n<li>📤 Portable - export into PDF, PNGs, or even a hostable SPA</li>\n<li>⚡️ Fast - instant reloading powered by Vite</li>\n<li>🛠 Hackable - using Vite plugins, Vue components, or any npm packages</li>\n</ul>\n<p>— <a href=\"https://github.com/slidevjs/slidev\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">slidevjs/slidev: Presentation Slides for Developers (Beta)</a></p>\n</blockquote>\n<h3 id=\"pavlobudeskreen\" style=\"position:relative;\"><a href=\"#pavlobudeskreen\" aria-label=\"pavlobudeskreen permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/pavlobu/deskreen\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">pavlobu/deskreen</a></h3>\n<p>Web ブラウザが搭載された任意のデバイスをセカンドスクリーンとして使えるようになる Electron アプリです。README にアーキテクチャが書いてあり、それによるとホストアプリ側の localhost に対しセカンドスクリーン化する端末がアクセスし、その後は WebRTC 経由でホスト側の画面共有をキャストするって挙動のようです。</p>\n<p><img src=\"https://github.com/pavlobu/deskreen/raw/master/doc/architecture/deskreen-arch-pavlobu-21012021.svg\" alt=\"アーキテクチャ\"></p>\n<h3 id=\"benawaddogehouse\" style=\"position:relative;\"><a href=\"#benawaddogehouse\" aria-label=\"benawaddogehouse permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/benawad/dogehouse\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">benawad/dogehouse</a></h3>\n<p>おそらく Discord clone のようなコミュニケーションツールです。特に紹介はしません</p>\n<h3 id=\"vickscarletliferestart\" style=\"position:relative;\"><a href=\"#vickscarletliferestart\" aria-label=\"vickscarletliferestart permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/VickScarlet/lifeRestart\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">VickScarlet/lifeRestart</a></h3>\n<p>“やり直すんだ。そして、次はうまくやる。“という謎の日本語が書かれた中国語のブラウザゲーです。翻訳しながら遊んでみたところおそらくシミュレーションゲームで、初期シードのステータス設定をすると人生シミュレータが開始し、寿命が尽きるまでに何が起こったかのログが流れるというゲームでした。画面にクトゥルフや幸運って単語が出てきたのでクトゥルフ神話とか TRPG 系の何かなのかと思いましたが、その界隈も中国語も詳しくないため結局何のゲームなのか、なぜ 9000 以上もスターを集めたのかも分かりませんでした。。。</p>\n<h3 id=\"calendsocalendso\" style=\"position:relative;\"><a href=\"#calendsocalendso\" aria-label=\"calendsocalendso permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/calendso/calendso\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">calendso/calendso</a></h3>\n<p>自分の空いてる日程を相手に共有して予定調整ができる SaaS、<a href=\"https://calendly.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Calendly</a>のクローンです</p>\n<h3 id=\"remotion-devremotion\" style=\"position:relative;\"><a href=\"#remotion-devremotion\" aria-label=\"remotion devremotion permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/remotion-dev/remotion\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">remotion-dev/remotion</a></h3>\n<p>remotion は React コンポーネントの描画結果を動画として描き出せるツールです。コードを読んでみたところ内部的には描画用の Web アプリを localhost で立てて、puppeteer で１フレームずつ描画結果のスクリーンショットを保存し ffmpeg でつなぎ合わせて動画にしているようです。このツールで作られたビデオ例は公式の<a href=\"https://www.remotion.dev/showcase\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Showcase</a>にあります。映像編集ツールは使えませんがこれだったら動画が作れそうな気がします。</p>\n<blockquote>\n<p>— <a href=\"https://zenn.dev/uzimaru0000/scraps/011315614b47ab\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">話題の Remotion で遊んでみた</a></p>\n</blockquote>\n<h3 id=\"withastroastro\" style=\"position:relative;\"><a href=\"#withastroastro\" aria-label=\"withastroastro permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/withastro/astro\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">withastro/astro</a></h3>\n<p>Astro はランタイムを高速化することに重点を置いた静的サイトジェネレータです。React や Web Components やピュアな HTML+JS など、フレームワークや構成を問わず適用可能で、ビルド時に全てを解決してランタイム JS をゼロにし、必要であればハイドレーションもできて、SEO 系のメタ情報ファイルの生成にも気を配っているようです。もともとは Snowpack の org で作られたもののようですが、今は独立した org でメンテナンスされているようです。<a href=\"https://astro.build/blog/astro-021-release/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Astro 0.21 のアナウンス記事</a>によると今は Snowpack ではなく Vite を使用しており、コンパイラは Go で書かれているそうです。</p>\n<blockquote>\n<p>— <a href=\"https://astro.build/blog/introducing-astro/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Introducing Astro: Ship Less JavaScript</a></p>\n</blockquote>\n<h3 id=\"alan2207bulletproof-react\" style=\"position:relative;\"><a href=\"#alan2207bulletproof-react\" aria-label=\"alan2207bulletproof react permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/alan2207/bulletproof-react\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">alan2207/bulletproof-react</a></h3>\n<p>Production-ready な React アプリを作る際の opinionated なガイド集です。単なるガイドであってテンプレートやボイラープレートの類ではないようです。</p>\n<h3 id=\"upgundechahowtheysre\" style=\"position:relative;\"><a href=\"#upgundechahowtheysre\" aria-label=\"upgundechahowtheysre permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/upgundecha/howtheysre\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">upgundecha/howtheysre</a></h3>\n<p>各社の SRE エンジニアがどんなことしているかの事例紹介がまとまっている README です</p>\n<h3 id=\"mattermostfocalboard\" style=\"position:relative;\"><a href=\"#mattermostfocalboard\" aria-label=\"mattermostfocalboard permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/mattermost/focalboard\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">mattermost/focalboard</a></h3>\n<p>Notion の クローンっぽい Web アプリです</p>\n<h3 id=\"docmirrordev-sidecar\" style=\"position:relative;\"><a href=\"#docmirrordev-sidecar\" aria-label=\"docmirrordev sidecar permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/docmirror/dev-sidecar\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">docmirror/dev-sidecar</a></h3>\n<p>おそらく中国の Great Firewall 関連のツールだと思うのですが詳しくは不明（中国語なのでわからない）</p>\n<h3 id=\"sveltejskit\" style=\"position:relative;\"><a href=\"#sveltejskit\" aria-label=\"sveltejskit permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/sveltejs/kit\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">sveltejs/kit</a></h3>\n<p>SvelteKit は Svelte 製アプリを作る際のツールキットおよびフレームワークのようです。ルーティングやレイアウト、Data Fetching やフックの機構を備えた Create React App をモダンにしたものという印象です。</p>\n<blockquote>\n<p>— <a href=\"https://lealog.hateblo.jp/entry/2021/04/15/173441\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">SvelteKit の特徴をざっくり理解する - console.lealog();</a></p>\n</blockquote>\n<h3 id=\"vuejspetite-vue\" style=\"position:relative;\"><a href=\"#vuejspetite-vue\" aria-label=\"vuejspetite vue permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/vuejs/petite-vue\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">vuejs/petite-vue</a></h3>\n<p>機能が削られてる代わりに軽量（6kb）な Vue のサブセット、React でいうところの <a href=\"https://preactjs.com/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">preact</a> かなと思いました。複雑な制御のいらないページではネットワークのパフォーマンス向上に寄与しそうです。</p>\n<h3 id=\"signozsignoz\" style=\"position:relative;\"><a href=\"#signozsignoz\" aria-label=\"signozsignoz permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/SigNoz/signoz\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">SigNoz/signoz</a></h3>\n<p><a href=\"https://opentelemetry.io/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">OpenTelemetry</a> をベースとした APM サービスです。運用監視に使う Datadog や New Relic などのような SaaS の OSS 版です。サーバやアプリケーションのメトリクスの規格とデータ収集・集計などに必要なエージェントをベンダーニュートラルに開発する OpenTelemetry をベースにしており、SigNoz 自体は OpenTelemetry で収集されたデータのビューアのようなものと理解しました。OSS として自前でホストできるし、MongoDB Atlas や Elastic のようにマネージドなサービスとしても利用できます。</p>\n<h3 id=\"blueedgetechnowin11react\" style=\"position:relative;\"><a href=\"#blueedgetechnowin11react\" aria-label=\"blueedgetechnowin11react permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/blueedgetechno/win11React\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">blueedgetechno/win11React</a></h3>\n<p>web で Windows11 のデスクトップを再現したもののようです。定期的に特定 OS のデスクトップを再現する web サイト出てきますね。</p>\n<h3 id=\"nextapps-dewinbox\" style=\"position:relative;\"><a href=\"#nextapps-dewinbox\" aria-label=\"nextapps dewinbox permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/nextapps-de/winbox\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">nextapps-de/winbox</a></h3>\n<p>フレームワーク非依存で カスタマイズ性の高いウィンドウっぽい UI が作れる JS ライブラリ。動作がサクサクです。</p>\n<h2 id=\"欄外だけど個人的な興味でピックアップ\" style=\"position:relative;\"><a href=\"#%E6%AC%84%E5%A4%96%E3%81%A0%E3%81%91%E3%81%A9%E5%80%8B%E4%BA%BA%E7%9A%84%E3%81%AA%E8%88%88%E5%91%B3%E3%81%A7%E3%83%94%E3%83%83%E3%82%AF%E3%82%A2%E3%83%83%E3%83%97\" aria-label=\"欄外だけど個人的な興味でピックアップ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>欄外だけど個人的な興味でピックアップ</h2>\n<p>ここまでの紹介を見ての通りで、今年は SaaS クローンや GUI アプリがかなり多く、CLI ツールやライブラリは少なめで個人的に面白く無かったので、獲得スター数的にはランク外ですが、今年トレンドに載ったことのある個人的に関心のあるものをピックアップします。</p>\n<h3 id=\"boringdesignersboring-avatars\" style=\"position:relative;\"><a href=\"#boringdesignersboring-avatars\" aria-label=\"boringdesignersboring avatars permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/boringdesigners/boring-avatars\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">boringdesigners/boring-avatars</a></h3>\n<p>Gravatar のデフォルトアイコンのような、ユーザ名等のシード値によっていい感じの匿名アバター SVG 画像を描画できる React コンポーネントです。個人的には BEAM という種類のゆるキャラっぽいアバターが可愛くて好きです。こういうやつ。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 668px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 35.92814371257485%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'143\\'%20viewBox=\\'0%200%20400%20143\\'%20preserveAspectRatio=\\'none\\'%3e%3cpath%20d=\\'M254%2012c-8%204-2%2018%206%2014%206-3%206-11%200-14h-6m15%202c-5%205-1%2012%205%2012%204%200%208-4%208-7%200-6-9-9-13-5m51%200c-4%204-1%2012%205%2012%204%200%207-3%207-7%200-6-8-9-12-5M37%2078c-11%205-16%2017-11%2028%207%2014%2027%2016%2037%203%204-6%204-18%200-24-6-8-19-12-26-7m159%200c-8%204-10%207-10%2019%200%2016%202%2017%2026%2015%208%200%208%200%2011-4%2011-17-8-38-27-30m79%200c-11%205-15%2021-8%2031%2013%2017%2038%208%2038-12%200-15-16-26-30-19m77%201c-10%208-12%2022-5%2031l4%203%202-17%204-18c2-2-1-1-5%201\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/fdd69744948aa1d392ad78b20c55ecd6/5251b/2021-12-23-23-32-03.webp 167w,\n/static/fdd69744948aa1d392ad78b20c55ecd6/7390e/2021-12-23-23-32-03.webp 334w,\n/static/fdd69744948aa1d392ad78b20c55ecd6/7c056/2021-12-23-23-32-03.webp 668w,\n/static/fdd69744948aa1d392ad78b20c55ecd6/20eb0/2021-12-23-23-32-03.webp 754w\"\n              sizes=\"(max-width: 668px) 100vw, 668px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/fdd69744948aa1d392ad78b20c55ecd6/21521/2021-12-23-23-32-03.png 167w,\n/static/fdd69744948aa1d392ad78b20c55ecd6/86d36/2021-12-23-23-32-03.png 334w,\n/static/fdd69744948aa1d392ad78b20c55ecd6/74866/2021-12-23-23-32-03.png 668w,\n/static/fdd69744948aa1d392ad78b20c55ecd6/7527b/2021-12-23-23-32-03.png 754w\"\n            sizes=\"(max-width: 668px) 100vw, 668px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/fdd69744948aa1d392ad78b20c55ecd6/74866/2021-12-23-23-32-03.png\"\n            alt=\"2021 12 23 23 32 03\"\n            title=\"2021 12 23 23 32 03\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n    </span></p>\n<h3 id=\"builderiopartytown\" style=\"position:relative;\"><a href=\"#builderiopartytown\" aria-label=\"builderiopartytown permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/BuilderIO/partytown\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">BuilderIO/partytown</a></h3>\n<p>リソースを大量消費するような 3rd パーティスクリプトを WebWorker に移して動作させるという面白い取り組み。3rd パーティスクリプトを単純に WebWorker に移してもメインスレッドとは環境が違うことで動作しない問題を色々ハックして突破するライブラリです。<br>\n動作原理としてはまずメインスレッドの API を Proxy でラップしたオブジェクトを WebWorker 側に露出させ、それが呼ばれると同期 XHR で WebWorker のスレッドをブロックして、その同期 XHR リクエストを監視する Service Worker が代わりにメインスレッドとやり取りして WebWorker に結果を返すことで、3rd party スクリプトから見ると同期的にメインスレッドを操作できており、Web Worker で動いてるので off the main thread が実現できる、という仕組みのようです。まだ枯れてないですが早く本番に突っ込んでみたいです。</p>\n<blockquote>\n<p>— <a href=\"https://dev.to/adamdbradley/how-partytown-s-sync-communication-works-4244\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">How Partytown’s Sync Communication Works - DEV Community 👩‍💻👨‍💻</a></p>\n</blockquote>\n<h3 id=\"cloudflareminiflare\" style=\"position:relative;\"><a href=\"#cloudflareminiflare\" aria-label=\"cloudflareminiflare permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/cloudflare/miniflare\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">cloudflare/miniflare</a></h3>\n<p>ローカルで Cloudflare Workers が動かせる純正の開発ツールです。TS 製で<code>wrangler dev</code>の Alternative と書かれています。公式の安心感もあり、いちいちデプロイしなくて良くなり開発効率が上がるので積極的に使っていきたいと思います。</p>\n<h3 id=\"steveruizokperfect-freehand\" style=\"position:relative;\"><a href=\"#steveruizokperfect-freehand\" aria-label=\"steveruizokperfect freehand permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/steveruizok/perfect-freehand\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">steveruizok/perfect-freehand</a></h3>\n<p>フリーハンドで書かれた線の座標を滑らかに・筆っぽくいい感じに補正してくれる JS のライブラリです。マウスを動かす速度によって線の太さを調整したり補正したりしてくれます。ライブラリとしては一定間隔でサンプリングされた座標の配列を渡すだけのシンプルな API で、特定フレームワークに依存してないのが扱いやすそうです。</p>\n<p><img src=\"https://github.com/steveruizok/perfect-freehand/raw/main/assets/process.gif\" alt=\"perfect-freehand\"></p>\n<h3 id=\"timc1kbar\" style=\"position:relative;\"><a href=\"#timc1kbar\" aria-label=\"timc1kbar permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/timc1/kbar\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">timc1/kbar</a></h3>\n<p>GitHub や Slack などで<code>⌘+K</code>のショートカットでコマンドパレット的なものが開くと思うのですが、あれを簡単に作れるライブラリです。特定のキーを持つオブジェクトの配列を渡すだけなので、自分でキーボードショートカットの管理などをしなくていいのもとても良いです。tech savvy が喜びそうな機能の１つとして試してみたいです。</p>\n<p><img src=\"https://user-images.githubusercontent.com/12195101/143491194-1d3ad5d6-24ac-4e6e-8867-65f643ac2d24.gif\" alt=\"デモ動作\"></p>\n<h3 id=\"yeemachinekalidokit\" style=\"position:relative;\"><a href=\"#yeemachinekalidokit\" aria-label=\"yeemachinekalidokit permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/yeemachine/kalidokit\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">yeemachine/kalidokit</a></h3>\n<p>JS から顔や手や指、表情や・ポーズなどが認識ができる Google 製の<a href=\"https://google.github.io/mediapipe/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Mediapipe</a>を用い、ブラウザだけでモーショントレースができる Web アプリです。試してみた結果はこちらの画像です。左上がキャプチャされた私の座標データで、真ん中が描画結果になります。認識精度は高く 2D, 3D 両方ともいけました。任意の Live2D、VRM のモデルデータを追加して反映させることもできるようです。VTuber になる予定はないですが、ブラウザでやらなくて良いことを全力でやってるのがテクニカルで好きなリポジトリでした。</p>\n<p><span\n      class=\"gatsby-resp-image-wrapper\"\n      style=\"position: relative; display: block; margin-left: auto; margin-right: auto; max-width: 668px; \"\n    >\n      <span\n    class=\"gatsby-resp-image-background-image\"\n    style=\"padding-bottom: 76.04790419161675%; position: relative; bottom: 0; left: 0; background-image: url('data:image/svg+xml,%3csvg%20xmlns=\\'http://www.w3.org/2000/svg\\'%20width=\\'400\\'%20height=\\'305\\'%20viewBox=\\'0%200%20400%20305\\'%20preserveAspectRatio=\\'none\\'%3e%3cpath%20d=\\'M11%206c-2%200-4%202-5%204-2%204-2%205-2%2049%200%2050%200%2050%206%2054%204%202%205%202%2069%202h65l3-3c6-5%206-5%206-52%200-48%200-48-6-53l-3-3H79C24%204%2013%204%2011%206m46%2025h-2c-3%200-5%203-3%205v1l1%202c2%202%203%201%202-1%200-1%201-2%203-1%203%200%203%201%202%202%200%202%200%202%201%201s1-1%201%202%200%204%203%204c5%200%207-1%206-4v-5h1l3-1c2%200%204-2%202-3h-1c0%202%200%202-2%200l-2-2v2l-2%202c-1-1-3%201-3%204-1%201%200%202%201%202v2c-3%202-4%201-3-3%201-2%201-3-4-8-2-2-2-2-2%200h-1c0-2-1-2-1-1m107%2065l2%203c1%202%201%202-4%204-7%204-10%207-14%2014-5%2010-7%2023-5%2035v-6c0-7%200-9%201-5l1%209%201%2021v-4c0-4%200-6%201-5%202%201%201%2013-1%2016l-2%205-2%206v5c1%201%200%202-2%203-4%203-10%2010-10%2012l-3%2015c-4%2015-4%2016%204%2025%204%205%205%207%206%2011l-1%205c-1%200-14-14-14-16h-1c-2%201-1%205%201%207l4%205c1%202%207%208%2010%209l1%201h-4c-3-2-4-3-11-13l-4-4-2%204-2%2010-1%209-1%2013c0%209-1%2011-2%2013l-2%202h132l-1-8c-3-13-3-17%200-17l6-1%209-2c9-2%2010-3%209-18%200-11-1-13-3-15l-5-10c-5-10-6-11-10-10l-3%203c0%205-8%208-12%205-7-6-9-17-5-30%203-7%203-9%200-9v-2c2-2%201-5-2-9l-6-8c0-2-2-4-3-5-2-3-3-10-1-23%201-14-3-27-12-37-6-6-13-9-23-9-7%200-8%200-11-3l-3-1m18%2038l-1%209-1%204-2-2c-2-4-2-4-1%200v4l-3-3-3-2-3-2c-3-4-4-3-2%200%202%204%200%203-5-2-4-4-4-4-3-2l-1%203c-1-1-2%202-2%205h2c6-3%2012%200%209%205l-1%201h-1c-2%200-5-1-5-3s-2-1-3%201c-2%203%201%2012%205%2018l3%206-6-4-2-4-2-2v4l1%204v1c-1%201-1%201%201%204%201%203%203%204%207%206v1l-5-1-2-1c0%202%204%203%207%203h2l-3%201h-2l2%202%203%203-8-2-2-1%207%206%2011%207%204%203%2012-10a78%2078%200%200013-12c2-1%207-6%205-6l-2%201c-2%202-1%200%201-4s3-8%201-8v-1l-1-12-4%209-2%203-4%205c-3%204-3%202%200-5%202-5%203-6%202-10%200-4%200-5-1-3v-2c0-2%200-3-2-4s-2-1-2%202%200%203-1%202h-6l-1-1c-3%200-2-1%200-4%202-2%202-3%202-6-1-5-1-5-2-1l-1%203v-3c0-6-2-8-2-3m5%2065l-1%2021c-1%2024%200%2044%202%2044l1-32a244%20244%200%2000-2-33m-23%202c-3%207-8%2041-9%2051%200%2011%200%2012%202%2012%201%200%202-1%202-12l3-32a596%20596%200%20002-19m-21%208c-2%200-2%201-2%203%200%204%200%204%204%205%208%202%208%202%208-3%200-6-2-7-10-5m228%2018l-6%203-5-2c-13-6-20-2-23%209%200%205-3%209-8%2010-10%204-14%2013-7%2022%203%204%203%206%202%2013-2%2013%208%2021%2019%2015%208-6%208-6%2014-3%2013%204%2023%202%2031-6%207-9%209-20%203-30-4-7-4-8-1-14%203-8%202-14-4-18-4-3-7-3-15%201m5%2034l-5%201-5%202c-2%202-2%202-4%200-3-3-5-1-5%206l1%206v3c0%202%200%202%203-1%203-2%204-3%206-1%206%203%2013%200%2013-6%200-5-1-7-3-7v-2l2-2c0-2-2-1-3%201m-358%203c-8%204-12%2013-9%2021%207%2018%2033%2013%2033-6%200-12-13-20-24-15m286%2012c-11%205-4%2021%208%2018%208-2%208-15%200-18h-8\\'%20fill=\\'%23d3d3d3\\'%20fill-rule=\\'evenodd\\'/%3e%3c/svg%3e'); background-size: cover; display: block;\"\n  ></span>\n  <picture>\n          <source\n              srcset=\"/static/80e31bbf10859d90e8a7dca8a6656b4a/5251b/2021-12-24-00-03-04.webp 167w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/7390e/2021-12-24-00-03-04.webp 334w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/7c056/2021-12-24-00-03-04.webp 668w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/0a92e/2021-12-24-00-03-04.webp 1002w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/7fa3c/2021-12-24-00-03-04.webp 1336w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/79c03/2021-12-24-00-03-04.webp 1614w\"\n              sizes=\"(max-width: 668px) 100vw, 668px\"\n              type=\"image/webp\"\n            />\n          <source\n            srcset=\"/static/80e31bbf10859d90e8a7dca8a6656b4a/21521/2021-12-24-00-03-04.png 167w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/86d36/2021-12-24-00-03-04.png 334w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/74866/2021-12-24-00-03-04.png 668w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/d69c4/2021-12-24-00-03-04.png 1002w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/9685e/2021-12-24-00-03-04.png 1336w,\n/static/80e31bbf10859d90e8a7dca8a6656b4a/d3d45/2021-12-24-00-03-04.png 1614w\"\n            sizes=\"(max-width: 668px) 100vw, 668px\"\n            type=\"image/png\"\n          />\n          <img\n            class=\"gatsby-resp-image-image\"\n            src=\"/static/80e31bbf10859d90e8a7dca8a6656b4a/74866/2021-12-24-00-03-04.png\"\n            alt=\"2021 12 24 00 03 04\"\n            title=\"2021 12 24 00 03 04\"\n            loading=\"lazy\"\n            decoding=\"async\"\n            style=\"width:100%;height:100%;margin:0;vertical-align:middle;position:absolute;top:0;left:0;\"\n          />\n        </picture>\n    </span></p>\n<h2 id=\"2021-年にもっともスターを獲得したリポジトリ\" style=\"position:relative;\"><a href=\"#2021-%E5%B9%B4%E3%81%AB%E3%82%82%E3%81%A3%E3%81%A8%E3%82%82%E3%82%B9%E3%82%BF%E3%83%BC%E3%82%92%E7%8D%B2%E5%BE%97%E3%81%97%E3%81%9F%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA\" aria-label=\"2021 年にもっともスターを獲得したリポジトリ permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>2021 年にもっともスターを獲得したリポジトリ</h2>\n<p>次に新しいか否かに関わらず 2021 年もっともスターを獲得したリポジトリを見ていきます。</p>\n<ul>\n<li>抽出条件\n<ul>\n<li>2020 年に一度以上トレンドに載った</li>\n<li>今年獲得したスター数が大きい順にソート</li>\n<li>上位 20 件のみ抽出</li>\n</ul>\n</li>\n</ul>\n<p>前セクションと重複しているものは<del>取り消し線</del>を入れてます</p>\n<ul>\n<li><del>92 -> 76501 (+76409) <a href=\"https://github.com/ant-design/ant-design\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ant-design/ant-design</a></del></li>\n<li>138667 -> 180899 (+42232) <a href=\"https://github.com/kamranahmedse/developer-roadmap\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">kamranahmedse/developer-roadmap</a></li>\n<li>89240 -> 129501 (+40261) <a href=\"https://github.com/trekhleb/javascript-algorithms\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">trekhleb/javascript-algorithms</a></li>\n<li>11171 -> 39404 (+28233) <a href=\"https://github.com/microsoft/Web-Dev-For-Beginners\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">microsoft/Web-Dev-For-Beginners</a></li>\n<li>157 -> 24070 (+23913) <a href=\"https://github.com/google/zx\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">google/zx</a></li>\n<li>65584 -> 89130 (+23546) <a href=\"https://github.com/30-seconds/30-seconds-of-code\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">30-seconds/30-seconds-of-code</a></li>\n<li>314511 -> 337473 (+22962) <a href=\"https://github.com/freeCodeCamp/freeCodeCamp\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">freeCodeCamp/freeCodeCamp</a></li>\n<li>13960 -> 35127 (+21167) <a href=\"https://github.com/vitejs/vite\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">vitejs/vite</a></li>\n<li>57747 -> 78416 (+20669) <a href=\"https://github.com/vercel/next.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">vercel/next.js</a></li>\n<li>4671 -> 25175 (+20504) <a href=\"https://github.com/supabase/supabase\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">supabase/supabase</a></li>\n<li><del>17 -> 20440 (+20423) <a href=\"https://github.com/conwnet/github1s\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">conwnet/github1s</a></del></li>\n<li>159245 -> 179394 (+20149) <a href=\"https://github.com/facebook/react\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">facebook/react</a></li>\n<li>23348 -> 43372 (+20024) <a href=\"https://github.com/iptv-org/iptv\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">iptv-org/iptv</a></li>\n<li>51251 -> 71034 (+19783) <a href=\"https://github.com/awesome-selfhosted/awesome-selfhosted\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">awesome-selfhosted/awesome-selfhosted</a></li>\n<li>16037 -> 34973 (+18936) <a href=\"https://github.com/anuraghazra/github-readme-stats\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">anuraghazra/github-readme-stats</a></li>\n<li>106733 -> 125448 (+18715) <a href=\"https://github.com/microsoft/vscode\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">microsoft/vscode</a></li>\n<li>42664 -> 60921 (+18257) <a href=\"https://github.com/ryanmcdermott/clean-code-javascript\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ryanmcdermott/clean-code-javascript</a></li>\n<li>33163 -> 50926 (+17763) <a href=\"https://github.com/tailwindlabs/tailwindcss\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">tailwindlabs/tailwindcss</a></li>\n<li><del>47 -> 16747 (+16700) <a href=\"https://github.com/slidevjs/slidev\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">slidevjs/slidev</a></del></li>\n<li>174775 -> 191415 (+16640) <a href=\"https://github.com/vuejs/vue\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">vuejs/vue</a></li>\n</ul>\n<p>ほとんどはいつもの顔ぶれという感じです。個人的にコメントしたいのは１つだけで、他はコメントを省きます。</p>\n<h3 id=\"googlezx\" style=\"position:relative;\"><a href=\"#googlezx\" aria-label=\"googlezx permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/google/zx\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">google/zx</a></h3>\n<p>2020 年末に登場した Google 製のシェルを JS で書けるツール。2021 年のトレンド掲載時点では 157 star だったため条件（star 数）を満たさず前パートで紹介できなかったツール。一言で言うなら Node.js の child_process の糖衣構文。top-level await が使えたり、文字列の配列を渡すと CLI 引数として自動でエスケープしてくれたりと細かいところに気が効く。zx 自体をインストールしないと当然動かないが、シェルを直接書くよりはシンプルで JS を生で書くよりはシンプルというバランスのもの。</p>\n<h2 id=\"nodejs-関連のトピックに絞った場合\" style=\"position:relative;\"><a href=\"#nodejs-%E9%96%A2%E9%80%A3%E3%81%AE%E3%83%88%E3%83%94%E3%83%83%E3%82%AF%E3%81%AB%E7%B5%9E%E3%81%A3%E3%81%9F%E5%A0%B4%E5%90%88\" aria-label=\"nodejs 関連のトピックに絞った場合 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>Node.js 関連のトピックに絞った場合</h2>\n<p>次に Node.js に関連したトピックを持ったリポジトリを比較します。</p>\n<ul>\n<li>抽出条件\n<ul>\n<li><code>nodejs</code>トピックがついている</li>\n<li>2020 年に 5000 スター以上獲得した</li>\n<li>獲得したスター数が多い順にソート</li>\n</ul>\n</li>\n</ul>\n<p>ここまでの内容と重複しているものは取り消し線を入れてます</p>\n<ul>\n<li><del>157 -> 24070 (+23913) <a href=\"https://github.com/google/zx\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">google/zx</a></del></li>\n<li><del>65584 -> 89130 (+23546) <a href=\"https://github.com/30-seconds/30-seconds-of-code\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">30-seconds/30-seconds-of-code</a></del></li>\n<li><del>314511 -> 337473 (+22962) <a href=\"https://github.com/freeCodeCamp/freeCodeCamp\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">freeCodeCamp/freeCodeCamp</a></del></li>\n<li>57149 -> 72747 (+15598) <a href=\"https://github.com/goldbergyoni/nodebestpractices\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">goldbergyoni/nodebestpractices</a></li>\n<li>14249 -> 26006 (+11757) <a href=\"https://github.com/LeCoupa/awesome-cheatsheets\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">LeCoupa/awesome-cheatsheets</a></li>\n<li>33816 -> 45555 (+11739) <a href=\"https://github.com/leonardomso/33-js-concepts\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">leonardomso/33-js-concepts</a></li>\n<li>7024 -> 18175 (+11151) <a href=\"https://github.com/prisma/prisma\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">prisma/prisma</a></li>\n<li>79116 -> 89871 (+10755) <a href=\"https://github.com/axios/axios\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">axios/axios</a></li>\n<li>32651 -> 42995 (+10344) <a href=\"https://github.com/nestjs/nest\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">nestjs/nest</a></li>\n<li>31862 -> 41808 (+9946) <a href=\"https://github.com/strapi/strapi\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">strapi/strapi</a></li>\n<li><del>10 -> 9208 (+9198) <a href=\"https://github.com/benawad/dogehouse\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">benawad/dogehouse</a></del></li>\n<li>74571 -> 83741 (+9170) <a href=\"https://github.com/nodejs/node\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">nodejs/node</a></li>\n<li>8367 -> 16436 (+8069) <a href=\"https://github.com/discordjs/discord.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">discordjs/discord.js</a></li>\n<li>27012 -> 34773 (+7761) <a href=\"https://github.com/GitSquared/edex-ui\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">GitSquared/edex-ui</a></li>\n<li>19366 -> 26956 (+7590) <a href=\"https://github.com/laurent22/joplin\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">laurent22/joplin</a></li>\n<li>879 -> 8451 (+7572) <a href=\"https://github.com/qeeqbox/social-analyzer\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">qeeqbox/social-analyzer</a></li>\n<li>295 -> 5440 (+5145) <a href=\"https://github.com/medusajs/medusa\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">medusajs/medusa</a></li>\n</ul>\n<h3 id=\"axiosaxios\" style=\"position:relative;\"><a href=\"#axiosaxios\" aria-label=\"axiosaxios permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/axios/axios\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">axios/axios</a></h3>\n<p>axios 自体は言わずと知れた有名なライブラリでそれ自体に語りたいことは特にありませんが、メンテナー不足の問題が顕在化し夏頃に議論になったのが記憶に新しいです。</p>\n<blockquote class=\"twitter-tweet\"><p lang=\"ja\" dir=\"ltr\">axiosの利用者まだまだ結構いて影響がわりとあると思っているので、ご協力いただけるとありがたいです 🙏 <a href=\"https://t.co/kLc1d9OUrC\">https://t.co/kLc1d9OUrC</a></p>&mdash; Kohta Ito (@koh110) <a href=\"https://twitter.com/koh110/status/1422477526673199110?ref_src=twsrc%5Etfw\">August 3, 2021</a></blockquote> <script async src=\"https://platform.twitter.com/widgets.js\" charset=\"utf-8\"></script>\n<h3 id=\"nodejsnode\" style=\"position:relative;\"><a href=\"#nodejsnode\" aria-label=\"nodejsnode permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a><a href=\"https://github.com/nodejs/node\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">nodejs/node</a></h3>\n<p>この記事は Node.js のアドベントカレンダー記事なので Node も一応触れます。今年は v16 に始まり v17 がこの前発表されました。個人的にはこの辺が自分にとって大きな影響のあるアップデートでした。</p>\n<blockquote>\n<ul>\n<li>M1 Mac</li>\n<li>Timers Promises API</li>\n<li>fs.rmdir の recursive オプションが Deprecated</li>\n</ul>\n<p>— <a href=\"https://shisama.hatenablog.com/entry/2021/04/22/090000\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Node.js v16 の主な変更点 - 別にしんどくないブログ</a></p>\n</blockquote>\n<blockquote>\n<ul>\n<li>Intl.DateTimeFormat</li>\n<li>WHATWG Stream との互換性の強化</li>\n<li>ディープクローンが簡単になる structuredClone の追加</li>\n</ul>\n<p>— <a href=\"https://shisama.hatenablog.com/entry/2021/10/20/114721#WHATWG-Stream-%E3%81%A8%E3%81%AE%E4%BA%92%E6%8F%9B%E6%80%A7%E3%81%AE%E5%BC%B7%E5%8C%96\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Node.js v17 の主な変更点 - 別にしんどくないブログ</a></p>\n</blockquote>\n<blockquote>\n<p>— <a href=\"https://web.dev/structured-clone/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Deep-copying in JavaScript using structuredClone</a></p>\n</blockquote>\n<h2 id=\"トレンドに上がったリポジトリのトピック\" style=\"position:relative;\"><a href=\"#%E3%83%88%E3%83%AC%E3%83%B3%E3%83%89%E3%81%AB%E4%B8%8A%E3%81%8C%E3%81%A3%E3%81%9F%E3%83%AA%E3%83%9D%E3%82%B8%E3%83%88%E3%83%AA%E3%81%AE%E3%83%88%E3%83%94%E3%83%83%E3%82%AF\" aria-label=\"トレンドに上がったリポジトリのトピック permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>トレンドに上がったリポジトリのトピック</h2>\n<p>今年トレンドに上がったリポジトリのトピックを集計しました。</p>\n<ul>\n<li>抽出条件\n<ul>\n<li>2021 年に一度以上トレンドに載ったリポジトリを抽出</li>\n<li>外れ値を減らすため 5 つ以上のリポジトリに付けられたトピックが対象</li>\n</ul>\n</li>\n</ul>\n<p>この記事のサムネイル画像が画像の中心あたりを一部抜粋したものになります。こちらのリンクから SVG の全体画像が確認できます。</p>\n<blockquote>\n<p>— <a href=\"https://observablehq.com/@leko/2021-github-trending-topics\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Bubble Chart / Shingo Inoue / Observable</a></p>\n</blockquote>\n<p>去年の SVG を並べてみたんですが、特に大きな代わり映えはなかったように思えます。</p>\n<h2 id=\"トレンド常連組\" style=\"position:relative;\"><a href=\"#%E3%83%88%E3%83%AC%E3%83%B3%E3%83%89%E5%B8%B8%E9%80%A3%E7%B5%84\" aria-label=\"トレンド常連組 permalink\" class=\"autolink-header before\"><svg aria-hidden=\"true\" focusable=\"false\" height=\"16\" version=\"1.1\" viewBox=\"0 0 16 16\" width=\"16\"><path fill-rule=\"evenodd\" d=\"M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z\"></path></svg></a>トレンド常連組</h2>\n<p>最後に GitHub のトレンド常連組を載せます。</p>\n<ul>\n<li>\n<p>抽出条件</p>\n<ul>\n<li>集計期間内にトレンドに載った日数でソート</li>\n<li>上位 20 件を抽出</li>\n</ul>\n</li>\n<li>\n<p>122 日 <a href=\"https://github.com/vercel/next.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">vercel/next.js</a></p>\n</li>\n<li>\n<p>106 日 <a href=\"https://github.com/angular/angular\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">angular/angular</a></p>\n</li>\n<li>\n<p>101 日 <a href=\"https://github.com/trekhleb/javascript-algorithms\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">trekhleb/javascript-algorithms</a></p>\n</li>\n<li>\n<p>94 日 <a href=\"https://github.com/github/docs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">github/docs</a></p>\n</li>\n<li>\n<p>88 日 <a href=\"https://github.com/storybookjs/storybook\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">storybookjs/storybook</a></p>\n</li>\n<li>\n<p>87 日 <a href=\"https://github.com/angular/angular-cli\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">angular/angular-cli</a></p>\n</li>\n<li>\n<p>85 日 <a href=\"https://github.com/ant-design/ant-design\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ant-design/ant-design</a></p>\n</li>\n<li>\n<p>82 日 <a href=\"https://github.com/discordjs/discord.js\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">discordjs/discord.js</a></p>\n</li>\n<li>\n<p>77 日 <a href=\"https://github.com/ionic-team/ionic-framework\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">ionic-team/ionic-framework</a></p>\n</li>\n<li>\n<p>76 日 <a href=\"https://github.com/cypress-io/cypress\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">cypress-io/cypress</a></p>\n</li>\n<li>\n<p>76 日 <a href=\"https://github.com/facebook/react-native\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">facebook/react-native</a></p>\n</li>\n<li>\n<p>76 日 <a href=\"https://github.com/grafana/grafana\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">grafana/grafana</a></p>\n</li>\n<li>\n<p>75 日 <a href=\"https://github.com/vitejs/vite\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">vitejs/vite</a></p>\n</li>\n<li>\n<p>74 日 <a href=\"https://github.com/puppeteer/puppeteer\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">puppeteer/puppeteer</a></p>\n</li>\n<li>\n<p>71 日 <a href=\"https://github.com/iptv-org/iptv\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">iptv-org/iptv</a></p>\n</li>\n<li>\n<p>70 日 <a href=\"https://github.com/trustwallet/assets\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">trustwallet/assets</a></p>\n</li>\n<li>\n<p>70 日 <a href=\"https://github.com/Azure/azure-rest-api-specs\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">Azure/azure-rest-api-specs</a></p>\n</li>\n<li>\n<p>69 日 <a href=\"https://github.com/microsoft/Web-Dev-For-Beginners\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">microsoft/Web-Dev-For-Beginners</a></p>\n</li>\n<li>\n<p>68 日 <a href=\"https://github.com/microsoft/vscode\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">microsoft/vscode</a></p>\n</li>\n<li>\n<p>68 日 <a href=\"https://github.com/mui-org/material-ui\" target=\"_blank\" rel=\"nofollow noopener noreferrer\">mui-org/material-ui</a></p>\n</li>\n</ul>\n<p>以上です。良いお年を！</p>","timeToRead":23,"frontmatter":{"title":"GitHubのトレンドで振り返る2021年のJavaScript/TypeScript","tags":["JavaScript","TypeScript","GitHub"],"date":"December 21, 2021","featuredImage":{"childImageSharp":{"fluid":{"tracedSVG":"data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='400'%20height='240'%20viewBox='0%200%20400%20240'%20preserveAspectRatio='none'%3e%3cpath%20d='M18%201c-2%201-4%206-3%209%201%208%2013%209%2017%201%203-7-5-14-14-10m76%204c-3%206-3%2016-1%2024%209%2024%2040%2032%2058%2014%2011-11%2015-28%209-40l-2-3H96l-2%205m78%200c-16%2021-9%2052%2015%2063%2040%2018%2077-30%2049-64l-3-4h-57l-4%205m65-4c0%204%2011%2012%2018%2012s18-8%2018-12l-18-1-18%201m39%201c0%2013%2021%2017%2026%205%204-7%204-7-12-7-13%200-14%200-14%202m55%200c-9%206-6%2019%205%2021%2011%201%2017-12%209-19-4-4-9-5-14-2m51%200c-1%204%205%209%2010%207%203-1%206-5%205-7-1-3-14-3-15%200M42%204c-9%205-5%2020%206%2020%207%200%2011-4%2011-11%200-8-9-14-17-9m329%201c-8%205-5%2016%203%2016%2011%200%2012-15%201-16h-4M4%2010c-3%202-4%203-4%208%200%207%208%2010%2013%204%205-7-2-16-9-12m298%201c-10%207-9%2021%201%2026%208%204%2016%201%2020-6%207-14-8-28-21-20m-39%202c-9%203-15%2013-15%2022%200%2021%2024%2031%2038%2018%2020-17%201-48-23-40m123%201c-5%205-2%2013%205%2013%206%200%209-10%205-13-3-3-8-2-10%200m-36%203c-6%206-2%2017%207%2017%204%200%209-4%2010-7%203-10-10-17-17-10M28%2018c-7%201-9%2011-4%2016%209%209%2022-4%2014-13l-4-3h-6m343%207c-5%204-5%2014%201%2017%2011%205%2020-8%2012-16-4-4-9-4-13-1m-40%201c-16%209-4%2031%2012%2023%204-2%208-9%206-14-2-8-12-12-18-9M45%2028c-7%205-7%2016%200%2021%208%205%2019%200%2019-10%200-11-11-16-19-11M5%2030c-4%204-4%2010%200%2013%2010%208%2022-4%2013-13-4-4-10-4-13%200m73%208c-6%201-12%208-13%2013-6%2021%2021%2035%2035%2019%2013-16-3-39-22-32m311%200c-8%204-6%2017%204%2017l5-1%202-1c1%201%201%200%201-3l-1-7c0-4-5-7-11-5m-33%201c-6%203-9%2010-7%2016%205%2012%2022%209%2024-3%201-9-8-16-17-13M23%2041c-7%204-6%2014%202%2018%2011%205%2020-8%2012-17-4-4-9-4-14-1m278%202c-16%208-16%2029-1%2036%2024%2012%2042-23%2019-36-4-2-14-3-18%200M42%2055c-9%205-8%2020%202%2024%2015%208%2028-15%2013-24-4-3-11-3-15%200m91-1a57%2057%200%2000-30%2097%2057%2057%200%201043-98l-13%201m244%200c-6%203-8%2012-3%2016%207%207%2017%203%2017-7%200-4-4-9-7-9h-7m21%203v8c3%202%202%204%200%204-2-1-8%201-9%204-3%206%201%2013%208%2013%203%200%203%200%203%205l1-9c0-19-1-28-3-25M10%2058c-7%204-7%2014-1%2018%205%203%209%203%2013-1%208-9-1-21-12-17m237%202c-42%206-58%2057-29%2087a51%2051%200%201029-87m91%200c-14%207-9%2027%206%2027%2017%200%2019-26%201-28l-7%201m26%2013c-12%206-7%2024%206%2024s17-19%205-24h-11M24%2077c-6%203-8%2013-3%2018%205%206%2016%205%2019-2%206-11-5-22-16-16m38%201c-11%205-12%2021-2%2028%204%203%2015%203%2019%200%2013-9%207-29-8-30-4%200-7%200-9%202M2%2079l-1%209%201%209h3c9%201%2013-10%207-16-3-3-7-4-10-2m348%2015c-7%202-10%206-10%2013%200%206%206%2012%2012%2012%209%200%2015-8%2013-16-1-4-6-9-8-9h-7M38%2099l-6%204c-13%2012%202%2033%2018%2025%2017-9%207-33-12-29m334%207c-9%205-8%2017%201%2021%204%203%209%202%2013-3%208-9-3-24-14-18m-46%2010c-6%204-8%207-8%2014%200%2020%2028%2021%2030%201%201-12-11-20-22-15m66%201c-4%205-1%2015%205%2015l3%201v-13c0-6-3-7-8-3m-327%201c-7%203-12%2012-10%2018%204%2020%2032%2018%2032-2%200-12-12-20-22-16m-61%202c-3%201-3%201-3%209s2%2010%208%2010c11%200%2014-15%204-19-4-2-5-2-9%200m351%207c-10%207-4%2023%208%2022%2010-2%2014-14%207-21-4-3-11-4-15-1m-331%204c-6%202-8%2010-5%2016%205%209%2017%209%2022-1%205-11-7-21-17-15m355%200c-3%203-4%207-2%2012%202%206%2010%207%2015%202%209-8-4-21-13-14m19%207c-1%203-1%208%201%209%202%202%201%204-1%203-5-2-10-1-13%204-4%207%205%2016%2013%2012%203-1%202%200%200%203-4%203-5%207-2%2010%204%206%205%203%205-20%200-19-1-25-3-21m-98%204c-17%209-13%2035%207%2038%2012%201%2022-8%2022-20%200-15-15-24-29-18M3%20142c-2%201-2%203-2%209v8l4%201c7%201%2013-6%2011-12-2-5-9-8-13-6m339%204c-10%202-14%2014-7%2022%209%2011%2028%201%2023-13-2-7-10-11-16-9m-298%202c-9%206-9%2020%202%2024%206%203%2010%202%2015-3%2011-11-3-29-17-21m321%203c-6%207-2%2018%208%2017%208%200%2012-11%206-17-4-3-10-3-14%200m-168%200a44%2044%200%201051%2055c8-31-20-60-51-55m-178%204c-10%205-7%2020%205%2020%2010%200%2013-16%203-20h-8M1%20169l1%209c3%200%205-1%207-4%202-5%200-11-6-12-2-1-2-1-2%207m263-5c-21%209-16%2040%206%2042%2015%201%2025-9%2024-24s-17-24-30-18m115%204c-4%202-5%207-4%2011%204%2010%2017%207%2017-3%200-7-7-11-13-8m-20%201c-7%203-10%2012-4%2017%208%209%2022-1%2016-12-2-5-8-7-12-5m-234%201c-29%208-25%2051%205%2053%2024%201%2037-26%2022-45-6-6-18-10-27-8m-92%204c-7%203-9%209-6%2015%205%2010%2018%2010%2022%200%205-10-6-21-16-15m298%201c-6%204-8%2011-5%2017%207%2016%2030%206%2024-11-3-6-13-9-19-6m-321%202c-3%201-6%207-5%2010%203%207%2011%209%2016%203%207-8-2-19-11-13m292%207c-14%207-8%2029%208%2028s20-21%206-28c-5-3-8-3-14%200m-246%201c-6%203-9%2013-5%2020%207%2011%2024%206%2024-8%200-10-9-16-19-12m323%204c-6%207%200%2017%209%2014%206-2%207-8%203-13-3-4-9-4-12-1m-361%209c-2%202-3%203-3%206%200%209%2010%2013%2016%207%209-9-3-21-13-13m61%201c-4%204-4%205-4%2010%200%2013%2011%2020%2022%2014%2014-7%208-28-8-28-5%200-6%200-10%204m259%205c-7%207-3%2019%208%2019%206%200%2011-5%2011-11%200-10-12-15-19-8m59%201c-2%203-1%205%201%208%203%203%203%203-1%207l-3%204c0%202%204%206%205%206l1%202-2%201c-2%200-5%203-5%206%200%202%207%201%207-1v-33c0-3-2-2-3%200m-360%203c-8%208%203%2021%2012%2015%204-3%205-7%204-11-2-7-11-10-16-4m347-2c-5%203-6%208-3%2012%204%206%2014%202%2014-5%200-6-7-10-11-7m-127%201c-13%203-18%2019-8%2029%204%204%204%204%2012%204%207%200%208%200%2011-3%2014-11%203-34-15-30m31%206c-8%204-10%2015-3%2022%209%209%2022%204%2024-8%201-11-10-19-21-14m31-1c-3%201-7%205-8%209-2%2011%2012%2018%2020%2010%209-9%200-24-12-19M6%20214c-7%207%202%2019%2011%2014%207-5%203-16-6-16l-5%202m54%200c-8%204-8%2016%201%2019%205%203%2012%201%2015-6%203-9-7-18-16-13m306-1l-4%205c-3%208%207%2015%2014%209%207-7-2-19-10-14m-216%206c-8%203-13%2010-13%2017v4h37v-4c0-7-6-15-14-17h-10m-127%204c-3%203-4%205-1%2010%205%208%2018%202%2015-7-3-7-9-8-14-3m329%201c-6%202-8%207-6%2012l2%204h6c6%200%207%200%208-2%205-7-2-17-10-14m32%200c-6%203-4%2013%203%2013%206%200%209-7%205-12-3-2-4-2-8-1m-268%201c-5%202-9%208-9%2013%200%202%201%202%2014%202h14v-3c0-9-11-16-19-12m-73%202c-3%201-5%205-5%209l1%204h8c8%200%208%200%209-2%201-7-6-14-13-11m-34%207c-3%204-2%205%205%206%207%200%207%200%207-2%200-7-8-9-12-4m358%200c-4%205-3%206%206%206%206%200%207%200%207-2%200-3-4-7-7-7s-4%201-6%203m-136%200c-4%201-7%204-7%205l12%201c14%200%2015-1%209-5-5-3-10-3-14-1'%20fill='%23d3d3d3'%20fill-rule='evenodd'/%3e%3c/svg%3e","aspectRatio":1.6616915422885572,"src":"/static/12a1926817238f0a90f837719e1b2e6d/0fba7/2021-12-20-20-37-48.png","srcSet":"/static/12a1926817238f0a90f837719e1b2e6d/1ec58/2021-12-20-20-37-48.png 334w,\n/static/12a1926817238f0a90f837719e1b2e6d/ccb4a/2021-12-20-20-37-48.png 668w,\n/static/12a1926817238f0a90f837719e1b2e6d/0fba7/2021-12-20-20-37-48.png 872w","srcWebp":"/static/12a1926817238f0a90f837719e1b2e6d/0390e/2021-12-20-20-37-48.webp","srcSetWebp":"/static/12a1926817238f0a90f837719e1b2e6d/cd98f/2021-12-20-20-37-48.webp 334w,\n/static/12a1926817238f0a90f837719e1b2e6d/7535d/2021-12-20-20-37-48.webp 668w,\n/static/12a1926817238f0a90f837719e1b2e6d/0390e/2021-12-20-20-37-48.webp 872w","sizes":"(max-width: 872px) 100vw, 872px"}}}}}},"pageContext":{"slug":"/2021-javascript-typescript-trending-history/","previous":{"fields":{"slug":"/goya-yet-another-japanese-morphological-analyzer/"},"frontmatter":{"title":"WebAssemblyの形態素解析器GoyaをRustで作った","tags":["JavaScript","TypeScript","WebAssembly","Rust","NLP","形態素解析"]}},"next":{"fields":{"slug":"/wordle-solver/"},"frontmatter":{"title":"Wordleという単語当てゲームのsolverを考える","tags":["JavaScript","TypeScript"]}}}},
    "staticQueryHashes": ["2585454260","2954598359"]}