shadcnui_コードは僕らの手の中

Transcript

1. shadcn/ui コードは僕らの手の中 2023-11-17 NAGOYA React 勉強会@株式会社スタメン 名古屋本社
2. 自己紹介 ＠okupara 株式会社Leaner Technologies デザインエンジニア
3. 目次 shadcn/uiが 私の心を掴む理由 shadcn/uiの簡単な紹介 1 2
4. shadcn/uiの簡単な紹介
5. shadcn/uiとは・・・
6. shadcn/uiの導入 $npx shadcn-ui@latest add button 例えばButtonコンポーネントの場合、 下記のコマンドを打つことでプロジェクト内に実 装済みのButtonのtsxがコピーされる 別途イニシャライズは必要。詳しくは https://ui.shadcn.com/docs/installation
7. shadcn/uiの導入
8. shadcn/uiの導入 すぐ使えます
9. つまり・・・ shadcn/uiのコンポーネントと自分たちのソース コードの間にはライブラリとしての依存関係が ない
10. shadcn/uiの実装自体は薄い Buttonで40行くらい 複雑なコンポーネントのDropdownやToastでも 200行くらい 小さな責務に分割されていて、それぞれはシン プルで読みやすい
11. 主なshadcn/uiの依存ライブラリ tailwind CSS radix-ui/primitives cva react-hook-forms (form関連を使う場合) tanstack-table (tableを使う場合) react-day-picker (Calendarを使う場合)
12. 注意すべきこと Tailwind CSS前提。Tailwind CSSを採用した くない場合は使えない カスタマイズした際に、shadcn/ui自体のアッ プデートへの追従
13. shadcn/uiが 私の心を掴む理由
14. shadcn/ui採用の経緯 Vue2からReactへの移行 Vuetify2も使っていたのでその移行先をどう するか Vuetify2のレールに乗らない独自のレイアウ トも ※Vuetify2 = Vue2で使えるMaterial Designベースのライブラリ
15. 移行の際の柔軟な要件 デザインのルックアンドフィールの変更につい ては融通がきくので完全再現する必要はない。 むしろこの機に色々改善できる
16. 検討していた選択肢 既存のデザインシステムをカスタマイズして 使う 機能部分はHeadlessなコンポーネントライブ ラリを使ってスタイリング部分やvariantsは 頑張って自前でデザイン・実装する 1 2
17. デザインやvariantsを最初から洗い出して設計 しなおすのもそれなりに大変 機能性が低いものはHeadless系のコンポーネ ントライブラリにないことが多い Alertとか それぞれのデメリット - 選択肢 1
18. それぞれのデメリット - 選択肢 デザインシステム系のライブラリはコントロー ルできない部分への依存度が高くなる 仕様を変えたい場合やカスタマイズ時の苦労 Headless系より捨てにくい 2
19. つまり我々は・・・ 共有コンポーネントは自分達で作ったように完 全にコントロールしたい イチからデザイン・コンポーネント設計に時 間をかけずに、ある程度色々揃った状態から ゴリゴリ変更したい
20. shadcn/uiええやん プロジェクトにコピー&ペーストされるのでコ ードは僕らの手の中 良いプラクティスの設計・デフォルトで普段使 いできるくらいのクオリティでミニマムなデザ イン
21. Minimum-designed UI Kit
22. Minimum-designed UI Kit 色や形・レイアウトのバリエーションなど、 創造性的なところは最小限 個人的にはこのミニマムさには、カスタマイ ズの柔軟性への意図を感じています
23. Minimum-designed UI Kit full-design MUI Chakra-UI React-specturm etc... shadcn/ui Radix- ui/primitive Headless UI React-aria Ark UI non-design minimum-design
24. それなりに完成度・拡張性の高い独自のコンポ ーネントライブラリを最速で作り始めるための 雛形になってくれる 改めて良いところを一言でまとめると
25. コピペUIキットムーブメント？ tailwind labsも現在Catalystというコピーし て使うUIキットを開発中です Catalyst発表のプレゼンではコマンドでコピ ペというより、DLしたものを手でコピペして いました
26. コピペUIキットムーブメント？ https://youtu.be/CLkxRnRQtDE?si=FORy6ey_m-45eN0I&t=3507
27. Adam Wathan says... 数ヶ月ほど使っていれば、そのコンポーネン トはコピペして持ってきたことも忘れる レベル上げが終わった状態からゲームを始め られるような体験
28. コピペして持ってきたことも忘れる （追従の難しさへの反論) shadcn/uiへのアップデートが追従が難しいほ どカスタマイズしてるなら、それはもう完全に 独自のコンポーネント そもそもライブラリーを使用するというメンタ ルモデルの上にないので、追従の事をあんまり 気にする必要もないのでは？
29. 一緒に仕事をしましょう！（採用PR） Leaner見積のデザインシステムの旅はまだ始 まったばかり。一緒にこの旅を楽しんでくれる 方・・・ Leanerのデザインエンジニアについて興味が あれば、お声がけください！
30. Let’s enjoy building good UI!! Thank you!