SvelteのUIライブラリーを公開しました

2024年12月20日(金)

1年前からsvelteで作ったいた個人開発を諦めることになり、そのプロジェクトで作ったコンポーネントをまとめてUIライブラリーとして公開しました。

前置きになぜsvelteで作ることになったのかを少し長めに説明させてください。🙇

Svelteとの出会い

初めて勉強したJSのUIフレームワークはVueJSでした、当時はまだエンジニアとして新人で、右も左もわからない時期でした、当時はvue2でしたが、あまりDOMやJSのエコシステムに詳しくもない新人の僕にとってはvueJSはとても使いやすく学習コストが低かったです。

しかし、当時は日本でvueJSが主流でしたが、時代がどんどん進み、今は完全にreactJSのブームになっています、当時僕も渋々reactJSを勉強し、業務でも使い初めていました、しかし、新人の僕にはとってはreactJSは若干学習コストが高かった記憶があります、特に最初はすぐに無限ループにハマり、イライラしていたのを覚えています。

その後もだんだんとreactにも慣れ始め、業務以外でも使うようになりました、しかし、reactのuseEffect地獄は辛いですねｗ、そんなに遭遇することはないのかもしれないですが、大きめの業務アプリなどを開発していると、コンポーネントがたくさんあるので、パフォーマンスに意識しないとお客さんからは重いというクレームが来たりすることもしばしばあり、そのために、reactのパフォーマンスチューニングをしていたりすると、useEffectがますます嫌いになっていきますよねｗ。

そこで、毎年やっている state of javascript というイベンドがあり、その中でsvelteというUIフレームワークがエンジニアから愛されていると紹介されていたことがきっかけsvelteの存在を知りました、svelteはreactやvueとは違い、コンパイルされた後のコードがとてもシンプルで、パフォーマンスもよく、学習コストも低いということで、一気に興味を湧き、svelteを勉強し始めました。

Svelteをプロダクト開発に選んだ理由

svelteは大きめのプロダクトに向いていないと巷でよくいわれますが、そんなことはないと僕は思います、実はあのapple musicのweb版はsvelteで書かれています。

僕は4年ほどreactを書いていました、特にreactはだめなフレームワークという認識はありません、むしろreactのコンセプトがとても良くできていて、webだけではなく、モバイルやデスクトップアプリ開発にまで影響を及ぼしています。 ただ、やはりreactを書いていく上で無駄に意識しないといけないことがあるので、それを考えずに、スピーディーにプロダクト開発がしたいという理由でsvelteを選びました。

Svelteを使って思ったこと

reactのエコシステムはとてつもなく強いです、react単体ではかなり困ることをエコシステムが充実していることで、かなりやりやすくなっていると思います。 一番最初のreactはとてもセットアップが大変だったと聞きます、jsxのプラグインをwebpackに組み込むところから始まり、色々やらないといけなかったと、その後に create-react-app が登場し、一気にセットアップが楽になったと。 そして、reactの中でのcssスコープ問題、これはとても悩ましく、鬱陶しかった記憶があります、しかしそれもcss in jsライブラリーやcss moduleといってライブラリーのおかげで今はほぼ困ることはないでしょう。

これら以外で、reactにおけるグローバルステートの管理も、一昔は redux が必須でしたが、context APIが登場し、今や jotai や zustand などのライブラリーが登場し、その悩みも解決してくれます。 ある意味、reactはずっとよくなっていっています、これは喜ばしいことです。

Svelteはリリースされてもうすぐ8年が経ちます、reactの後出しではあるので、reactで困るようなことはsvelteでは心配する必要はありません。 とはいえ、svelteもまた完璧ではありません、構文が微妙だったり、TSとの相性がreactほどではなかったり、開発環境のエコシステムがreactほどではなかったりします。

そして、svelte v4を使ってプロダクト開発していて不満に思ったことはzennに詳しくまとめているのでぜひ見てほしい。

これについてはまた別途で記事にしようと思っています。

何を作っていたのか

今は都内ならほぼどこのも飲食店にも導入されているQRコードオーダーシステムの簡易版を作っていたのですが、流石に乗り遅れてしまい、個人一人では会社という規模には勝てないと思い、そのプロジェクトを諦めました。 一応画面はこんな感じです。👇

そこそこ作り込んでいたのですが、残念ながら心が折れてしまいました😩、しかし、sveltekitをフルで活用していたので、svelteのベストプラクティスだったり、良いところと微妙なところを知ることができました。

一応技術スタックも載せておきます。

• SvelteKit
• TypeScript
• emotion
• Supabase
• Vitest
• trpc
• Sentry
• Axiom
• Vercel

svelteであれば、本来はreactのようにcss in jsライブラリーのemotionなどを使う必要はありませんが、今回はemotionを使った経緯としては、styleの中でもTypescriptを使いたいというのが大きかったです、svelteのstyleの中で方安全にcssを書くことは僕の認識だとできないと思います、そして、万が一svelteからreactに変わるととしても、emotionはフレームワーク依存しないので、そのままstyleを持っていくことができると考えたからです。

Supabaseはデータベースと認証認可周りで使っていました、基本的にadmin SDK使うので、client側でそのままデータ更新することはありませんが、認証認可がとても素早く実装できます、唯一困ったことがあったのは、supabaseのusersテーブルがpublicスキーマではないことでした、そこの詳しい内容はまた別途記事にしようと思います。

trpcに関しては、clientとサーバーで型安全に保つことができるので、複雑なAPI設計や、難しいことを考える必要はありません、サーバー側に変更いれたら、client側で型エラーが出てくれるので、実装漏れることはない。

test周りは最初はjest使っていたのですが、sveltekitはcommonjsをサポートしていないので、モックだらけになり始めたので、vitestに変更して、大人しくテストを書くことにしました。

Sentryはエラーログの収集と通知に使っていました、discordと連携すると、エラーが発生したらdiscordに通知が来るので、とても便利です。

Axiomはログ収集です、実は作りは初めて頃にはvercelにはserverless functionのログ収集機能があまり充実してなくて、どこかに流すような仕組みだったので、Axiomを使ってログ収集していました。

まとめ

Koy UI に関しては、ある程度使い回せるようにと設計していたのですが、やはり世の中に出ているOSSのUIはライブラリーほど全てを最初から考えて作っていたわけではありません、なので、今後も自分が使っていく上で、都度都度改善していくことになると思います、そして皆さんのIssueやPRをお待ちしています。

ではまた！