$30 off During Our Annual Pro Sale. View Details »
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
shadcnui_コードは僕らの手の中
Search
okupara
November 16, 2023
1
7.8k
shadcnui_コードは僕らの手の中
okupara
November 16, 2023
Tweet
Share
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Keith and Marios Guide to Fast Websites
keithpitt
410
22k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
330
21k
GitHub's CSS Performance
jonrohan
1030
460k
Teambox: Starting and Learning
jrom
133
8.8k
Designing on Purpose - Digital PM Summit 2013
jponch
115
7k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
4 Signs Your Business is Dying
shpigford
181
21k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
400
Transcript
shadcn/ui コードは僕らの手の中 2023-11-17 NAGOYA React 勉強会@株式会社スタメン 名古屋本社
自己紹介 @okupara 株式会社Leaner Technologies デザインエンジニア
目次 shadcn/uiが 私の心を掴む理由 shadcn/uiの簡単な紹介 1 2
shadcn/uiの簡単な紹介
shadcn/uiとは・・・
shadcn/uiの導入 $npx shadcn-ui@latest add button 例えばButtonコンポーネントの場合、 下記のコマンドを打つことでプロジェクト内に実 装済みのButtonのtsxがコピーされる 別途イニシャライズは必要。詳しくは https://ui.shadcn.com/docs/installation
shadcn/uiの導入
shadcn/uiの導入 すぐ使えます
つまり・・・ shadcn/uiのコンポーネントと自分たちのソース コードの間にはライブラリとしての依存関係が ない
shadcn/uiの実装自体は薄い Buttonで40行くらい 複雑なコンポーネントのDropdownやToastでも 200行くらい 小さな責務に分割されていて、それぞれはシン プルで読みやすい
主なshadcn/uiの依存ライブラリ tailwind CSS radix-ui/primitives cva react-hook-forms (form関連を使う場合) tanstack-table (tableを使う場合) react-day-picker
(Calendarを使う場合)
注意すべきこと Tailwind CSS前提。Tailwind CSSを採用した くない場合は使えない カスタマイズした際に、shadcn/ui自体のアッ プデートへの追従
shadcn/uiが 私の心を掴む理由
shadcn/ui採用の経緯 Vue2からReactへの移行 Vuetify2も使っていたのでその移行先をどう するか Vuetify2のレールに乗らない独自のレイアウ トも ※Vuetify2 = Vue2で使えるMaterial Designベースのライブラリ
移行の際の柔軟な要件 デザインのルックアンドフィールの変更につい ては融通がきくので完全再現する必要はない。 むしろこの機に色々改善できる
検討していた選択肢 既存のデザインシステムをカスタマイズして 使う 機能部分はHeadlessなコンポーネントライブ ラリを使ってスタイリング部分やvariantsは 頑張って自前でデザイン・実装する 1 2
デザインやvariantsを最初から洗い出して設計 しなおすのもそれなりに大変 機能性が低いものはHeadless系のコンポーネ ントライブラリにないことが多い Alertとか それぞれのデメリット - 選択肢 1
それぞれのデメリット - 選択肢 デザインシステム系のライブラリはコントロー ルできない部分への依存度が高くなる 仕様を変えたい場合やカスタマイズ時の苦労 Headless系より捨てにくい 2
つまり我々は・・・ 共有コンポーネントは自分達で作ったように完 全にコントロールしたい イチからデザイン・コンポーネント設計に時 間をかけずに、ある程度色々揃った状態から ゴリゴリ変更したい
shadcn/uiええやん プロジェクトにコピー&ペーストされるのでコ ードは僕らの手の中 良いプラクティスの設計・デフォルトで普段使 いできるくらいのクオリティでミニマムなデザ イン
Minimum-designed UI Kit
Minimum-designed UI Kit 色や形・レイアウトのバリエーションなど、 創造性的なところは最小限 個人的にはこのミニマムさには、カスタマイ ズの柔軟性への意図を感じています
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
それなりに完成度・拡張性の高い独自のコンポ ーネントライブラリを最速で作り始めるための 雛形になってくれる 改めて良いところを一言でまとめると
コピペUIキットムーブメント? tailwind labsも現在Catalystというコピーし て使うUIキットを開発中です Catalyst発表のプレゼンではコマンドでコピ ペというより、DLしたものを手でコピペして いました
コピペUIキットムーブメント? https://youtu.be/CLkxRnRQtDE?si=FORy6ey_m-45eN0I&t=3507
Adam Wathan says... 数ヶ月ほど使っていれば、そのコンポーネン トはコピペして持ってきたことも忘れる レベル上げが終わった状態からゲームを始め られるような体験
コピペして持ってきたことも忘れる (追従の難しさへの反論) shadcn/uiへのアップデートが追従が難しいほ どカスタマイズしてるなら、それはもう完全に 独自のコンポーネント そもそもライブラリーを使用するというメンタ ルモデルの上にないので、追従の事をあんまり 気にする必要もないのでは?
一緒に仕事をしましょう!(採用PR) Leaner見積のデザインシステムの旅はまだ始 まったばかり。一緒にこの旅を楽しんでくれる 方・・・ Leanerのデザインエンジニアについて興味が あれば、お声がけください!
Let’s enjoy building good UI!! Thank you!