commmune Engineer Blog

コミューンではたらくスタッフにフォーカスした次世代型エンジニアブログです

読みたい!TypeScript製のOSS紹介

f:id:commmune_ihoriya:20210325142250p:plain

こんにちは,@unvalley_ です.

僕の数少ない趣味の一つに,「GitHubを徘徊して,スターを付けまくる」というものがあります.

この記事では,そんな趣味の中でスターを付けたリポジトリを紹介します.

ここでのリポジトリは,以下の条件に絞られたものとします.

  • TypeScript製である
  • スター数が執筆時点で10000以下である

理由は,commmuneでメインに利用している言語はTypeScriptであるからです. それに加えて,メジャーなものを紹介しても面白みに欠けると思うので,10000以下という制約をつけます.

早速中身に入っていきましょう.

ライブラリ編

pmndrs/jotai

github.com

Recoilにインスパイアされた,不要な再描画の問題を解決するために生まれた状態管理ライブラリです.READMEのサンプルを見る限りでは,かなりRecoilに近い雰囲気を感じます.

Recoilと異なる点としては,下記が挙げられています.

  • Minimalistic API
  • No string keys
  • TypeScript oriented

より詳細な比較をしてみたいです.

余談,状態管理ライブラリは,「読む前はコード規模大きそうと思ってたけど,いざ見てみるとそんなに大きくない」の代表格な気がします.

aspida/aspida

github.com

TS界隈では,比較的知名度の高いライブラリかと思います.作者の方は日本人であり,すでに紹介記事が複数書かれていますね. シンプルなREST APIサーバーの個人プロジェクトで導入してみましたが,非常に使いやすいです.FE/BE共にTSである場合に,apiディレクトリ以下の型を使い回すと,非常にありがたい型の恩恵が受けられると思います.

READMEのEcosystemを見るとswrやreact-query用のラッパーなども用意されているようです.

月間2万DL突破!REST APIを型安全にする最強のTypeScript製HTTPクライアントaspidaを始めよう

qawolf/qawolf

github.com

ブラウザ操作から,E2Eテストを速攻で生成するライブラリです. E2EテストツールであるAutifyに似ているところを感じます.異なる特徴的な点としては,操作そのものがテストコードになるというところでしょうか.

qawolfでは,実際のブラウザ操作から,Jest/Puppeteer/Playwright などによってテストが生成されます.

ドキュメントやサイトが,かなりリッチなので使いやすそうです.

www.qawolf.com

LPもかわいい!

recorderのテストあたりが面白そうなので,読んでいこうと思います.

codemix/ts-sql

github.com

TSで,型レベルでのSQLを行うリポジトリです.型安全教の骨頂ですね. TS 4.1で導入されたTemplate Literal Typesがふんだんに使われているようです.

ts-sql/Printer.ts at b594a38201a8809dd174c6a32378c529fb0a3c96 · codemix/ts-sql · GitHub

talentlessguy/tinyhttp

github.com

TS製のNode.js Webフレームワークです.Express Alternativeですね.Benchmarkを参照すると,Expressよりも2.2倍早いことが分かります.

Express用のミドルウェアもサポートされていることから,実用可能性が高そうですね.個人開発の際には,使ってみたいです.ロシアの高校生が開発されているそうです.

設計編

stemmlerjs/ddd-forum

github.com

TS x DDDで実装されたHacker news-inspiredなサイトのリポジトリです.

We built this based on the Clean Architecture, SOLID principles, and Domain-Driven Design best practices using TypeScript.

BEには,Sequelize, Express.js, Redisが使われています.

対してFEには,React, Redux, Sassが使われています.

上記の技術スタックは,コミューンのそれとかなり近いですね. がっつりとclean-architectureを実践されている雰囲気を感じています.

最近は,DDD・設計考えたいマンなので,このリポジトリを読んでいることが多いです.

dailydotdev/daily-api

github.com

daily.devという,プログラミング関連のニュースキュレーションメディアのWeb実装です.

Preact(Next.js), GraphQL, emotionといった技術スタックとなっています.また,testing-libraryを用いたテストもガッツリ書かれているため,同様の技術スタックを利用している場合,参考になりそうです.

終わりに

型のある言語だと,実装が把握しやすいですね. 今回紹介しきれなかったTS製のOSSは,また次回に持越します.(テストツールやFP関連に触れたい)

そして,タイトルに「読みたい」とつけましたが,ベストは「貢献したい」ですね!

PS: 僕がスターしてるリポジトリたち

github.com