SvelteのUIライブラリーKoy UIを作りました

koy UI

storybook
https://koy-ui.vercel.app

github repo
https://github.com/qaynam/koy-ui

前置き

一番最初に保険としていいますが、私のsvelte暦はそんなに長くないです、ましてUIに関しては本業ではなく、趣味の延長線上で分野になります、なので、現段階ではとても満足できるものができたとは自分でも思っていません、svelteに関しては個人的にとても好きで使っていますが、やはり、reactに対してエコシステムが乏しいので、コミュニティーに何等かの貢献をできたらなと思っています。

きっかけ

ずっと前からUIライブラリー作ってみたいという気持ちがあるものの、作る動機となるきっかけがなかったです、一年前からSvelteKitをフル活用し、個人でプロダクト作る決意をし、本腰いれて作り混んでいたのですが、半分ぐらい作ったところで、急に頑張って作っても、売っていくのは大変な気がしはじめ、結局諦めることにしました。

詳しく何を作ったかは個人のブログに書いているので、興味のある人はぜひ 👇

https://qaynam.dev/articles/VtuISKQ5oJ_DhtMH/#何を作っていたのか

しかし、githubにはすでに500以上のコミットもしており、諦めるときに非常にもったいなく感じてしまったので、なにか残せないと考えた結果、UI部分にかなり自分なりにこだわっていたので、UIだけ切り出して、OSSとして公開することにしました。

UI作りからjsDocまで

Figmaでコンポーネント定義

本業はソフトウェアエンジニアですが、普段からUIデザインにも興味があり、新しいトレンドやデザイン系のメデイアをチェックするようにしています、その延長線上である程度Figmaも使いこなせるようになり、最初は力いれて、ワイヤーフレームから作り、そこからコンポーネント化し、デザインシステムを構築していきました。

一部ではありますが👇こんな感じです。

それをコードに落とし込んでいく感じです、こうやって最初にfigmaコンポーネントをしっかり作っておくと、コーディングするときに悩むことはあまりなくなりました、なんならpropsのネーミングもfigmaと合わせるのがベストですね。

ソロプレイだけど、jsDocはちゃんと書く

これは個人でやっているのに、時間の無駄だと思うかもしれませんが、個人開発していると、ずっとそのまま開発毎日・毎週続けられたらいいのですが、モチベーションが下がり、一回止まってしまい、１ヶ月後に触ることがざらにありました、「３日前の自分はもう他人」なので、自分が書いたはずなのに、なんでこう書いていたんだ？ってなり、結局それを理解するのに、また時間が必要になる、更にせっかくモチベーションが戻ろうとしているのに、もう一度最初から理解するのに面倒くさくなり、そのままお蔵入りになってしまったプロダクトが何個もありました、それを防ぐためにも、自分のためにある程度jsDocやコメントを書いておくようにしています。

自分なりに頑張って書いたButtonコンポーネントはこんな感じ 👇

jsDocをちゃんと書くもう一つのメリットはstorybookにあります、今時のstorybookはとても賢く、jsDocやtsの型がdocを拾ってくれます、素晴らしいですね。

ディレクトリ構成

これに関しては、フレームワークあまり関係ないので、chakra ui v2のコンポーネントカテゴライズを参考にしました。

https://v2.chakra-ui.com/docs/components

src/lib/ui/components
├── base
│   ├── Badge
│   ├── Button
│   ├── ButtonIcon
│   ├── Divider
│   ├── Link
│   ├── Typography
│   └── index.ts
├── display
│   ├── ListGroup
│   ├── ProgressBar
│   └── index.ts
├── feedback
│   ├── Alert
│   ├── Overlay
│   ├── Skeleton
│   ├── Spinner
│   └── index.ts
├── form
│   ├── CheckBox
│   ├── FormLabel
│   ├── FormRow
│   ├── Input
│   ├── PasswordInput
│   ├── SelectBox
│   ├── SingleChoicer
│   ├── TextArea
│   └── index.ts
├── icons
│   ├── ArrowLeft.svelte
│   ├── ArrowRight.svelte
│   └── index.ts
├── index.ts
├── layout
│   ├── PageLayout
│   ├── Stack
│   └── index.ts
├── overlay
│   ├── BottomSheet
│   ├── DropDown
│   ├── Modal
│   └── index.ts
└── useful
    ├── ConfirmModal
    ├── HiddenUntilLoaded
    ├── When
    ├── createMediaQuery.ts
    └── index.ts

コンポーネントのstyleに関して

svelteであれば、SFCなのでstyleのスコープを考える必要やCSS in JS的なのが必要ないですが、koy UIにはemotionを使ってstyleを書いています、なぜemotionなのかというと、TSでstyleを書きたかったからというのが大きいです、それとemotionはフレームワーク依存しないので、今後reactにも乗り換えやすいという理由もあります。

現状のKoy UI

あるプロダクト専用に作っていた状態から、ただただ切り離して、OSSにしただけなので、カスタマイズ性がとても欠けています、そこは今後使っていく上で改善して行きたいと思っています。

そして、開発始めたときには、まだsvelte v5はアルファー状態で、まだ変更が入るかもしれないという状況でした、無難にv4で作って行くことにしました、しかし、OSSとして公開したころにはすでにv5がリリースされました 😇、でもsvelteはvueと違って、v4でもv5でも混ぜて使うことはできるし、特になにか壊れることはありません、v4で書いたコンポーネントであってももちろんv5で動きます。
しかし、v4でイマイチだった構文や弱点をかなりv5で改善されているので、ゆっくり置き換えていきたいと思っています。

しかし、カスタマイズ性をあまり重視していない、一昔のBootstarapのようなサクッとアプリ作りたいときに適していると今のところは思っていますので、ぜひご活用ください。

issueやPRをお待ちしております。

最後に

詳しい説明やsvelteに対する思いなどは個人のプロダクトに書いているので、ぜひ合わせてご覧ください。

https://qaynam.dev/articles/VtuISKQ5oJ_DhtMH