shadcnui_コードは僕らの手の中

by okupara

Slide 1

Slide 1 text

shadcn/ui コードは僕らの手の中 2023-11-17 NAGOYA React 勉強会@株式会社スタメン名古屋本社

Slide 2

Slide 2 text

自己紹介＠okupara 株式会社Leaner Technologies デザインエンジニア

Slide 3

Slide 3 text

目次 shadcn/uiが私の心を掴む理由 shadcn/uiの簡単な紹介 1 2

Slide 4

Slide 4 text

shadcn/uiの簡単な紹介

Slide 5

Slide 5 text

shadcn/uiとは・・・

Slide 6

Slide 6 text

shadcn/uiの導入 $npx shadcn-ui@latest add button 例えばButtonコンポーネントの場合、下記のコマンドを打つことでプロジェクト内に実装済みのButtonのtsxがコピーされる別途イニシャライズは必要。詳しくは https://ui.shadcn.com/docs/installation

Slide 7

Slide 7 text

shadcn/uiの導入

Slide 8

Slide 8 text

shadcn/uiの導入すぐ使えます

Slide 9

Slide 9 text

つまり・・・ shadcn/uiのコンポーネントと自分たちのソースコードの間にはライブラリとしての依存関係がない

Slide 10

Slide 10 text

shadcn/uiの実装自体は薄い Buttonで40行くらい複雑なコンポーネントのDropdownやToastでも 200行くらい小さな責務に分割されていて、それぞれはシンプルで読みやすい

Slide 11

Slide 11 text

主なshadcn/uiの依存ライブラリ tailwind CSS radix-ui/primitives cva react-hook-forms (form関連を使う場合) tanstack-table (tableを使う場合) react-day-picker (Calendarを使う場合)

Slide 12

Slide 12 text

注意すべきこと Tailwind CSS前提。Tailwind CSSを採用したくない場合は使えないカスタマイズした際に、shadcn/ui自体のアップデートへの追従

Slide 13

Slide 13 text

shadcn/uiが私の心を掴む理由

Slide 14

Slide 14 text

shadcn/ui採用の経緯 Vue2からReactへの移行 Vuetify2も使っていたのでその移行先をどうするか Vuetify2のレールに乗らない独自のレイアウトも ※Vuetify2 = Vue2で使えるMaterial Designベースのライブラリ

Slide 15

Slide 15 text

移行の際の柔軟な要件デザインのルックアンドフィールの変更については融通がきくので完全再現する必要はない。むしろこの機に色々改善できる

Slide 16

Slide 16 text

検討していた選択肢既存のデザインシステムをカスタマイズして使う機能部分はHeadlessなコンポーネントライブラリを使ってスタイリング部分やvariantsは頑張って自前でデザイン・実装する 1 2

Slide 17

Slide 17 text

デザインやvariantsを最初から洗い出して設計しなおすのもそれなりに大変機能性が低いものはHeadless系のコンポーネントライブラリにないことが多い Alertとかそれぞれのデメリット - 選択肢 1

Slide 18

Slide 18 text

それぞれのデメリット - 選択肢デザインシステム系のライブラリはコントロールできない部分への依存度が高くなる仕様を変えたい場合やカスタマイズ時の苦労 Headless系より捨てにくい 2

Slide 19

Slide 19 text

つまり我々は・・・共有コンポーネントは自分達で作ったように完全にコントロールしたいイチからデザイン・コンポーネント設計に時間をかけずに、ある程度色々揃った状態からゴリゴリ変更したい

Slide 20

Slide 20 text

shadcn/uiええやんプロジェクトにコピー&ペーストされるのでコードは僕らの手の中良いプラクティスの設計・デフォルトで普段使いできるくらいのクオリティでミニマムなデザイン

Slide 21

Slide 21 text

Minimum-designed UI Kit

Slide 22

Slide 22 text

Minimum-designed UI Kit 色や形・レイアウトのバリエーションなど、創造性的なところは最小限個人的にはこのミニマムさには、カスタマイズの柔軟性への意図を感じています

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

それなりに完成度・拡張性の高い独自のコンポーネントライブラリを最速で作り始めるための雛形になってくれる改めて良いところを一言でまとめると

Slide 25

Slide 25 text

コピペUIキットムーブメント？ tailwind labsも現在Catalystというコピーして使うUIキットを開発中です Catalyst発表のプレゼンではコマンドでコピペというより、DLしたものを手でコピペしていました

Slide 26

Slide 26 text

コピペUIキットムーブメント？ https://youtu.be/CLkxRnRQtDE?si=FORy6ey_m-45eN0I&t=3507

Slide 27

Slide 27 text

Adam Wathan says... 数ヶ月ほど使っていれば、そのコンポーネントはコピペして持ってきたことも忘れるレベル上げが終わった状態からゲームを始められるような体験

Slide 28

Slide 28 text

コピペして持ってきたことも忘れる（追従の難しさへの反論) shadcn/uiへのアップデートが追従が難しいほどカスタマイズしてるなら、それはもう完全に独自のコンポーネントそもそもライブラリーを使用するというメンタルモデルの上にないので、追従の事をあんまり気にする必要もないのでは？

Slide 29

Slide 29 text

一緒に仕事をしましょう！（採用PR） Leaner見積のデザインシステムの旅はまだ始まったばかり。一緒にこの旅を楽しんでくれる方・・・ Leanerのデザインエンジニアについて興味があれば、お声がけください！

Slide 30

Slide 30 text

Let’s enjoy building good UI!! Thank you!