Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
shadcnui_コードは僕らの手の中
Search
okupara
November 16, 2023
1
8k
shadcnui_コードは僕らの手の中
okupara
November 16, 2023
Tweet
Share
Featured
See All Featured
Making the Leap to Tech Lead
cromwellryan
133
9.1k
Practical Orchestrator
shlominoach
186
10k
A Tale of Four Properties
chriscoyier
157
23k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Making Projects Easy
brettharned
116
6k
Bootstrapping a Software Product
garrettdimon
PRO
305
110k
For a Future-Friendly Web
brad_frost
176
9.5k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
39
1.9k
KATA
mclloyd
29
14k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
520
YesSQL, Process and Tooling at Scale
rocio
171
14k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
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!