$30 off During Our Annual Pro Sale. View Details »

なぜコピペで使うコンポーネント集を利用するのか?

mottox2
November 18, 2023

 なぜコピペで使うコンポーネント集を利用するのか?

フロントエンドカンファレンス沖縄2023で発表に使用したスライドです。

mottox2

November 18, 2023
Tweet

More Decks by mottox2

Other Decks in Technology

Transcript

  1. Bootstrap時代 € CSSフレームワークとも呼ばれていた、 SPA普及以前によ く使われていたもG € でかいCSSを読み込んで使う、 グローバ' € カスタマイズはできた!

    € CSS本体をいじってしまうと、 1万行ぐらいあったりする ので、 どこをいじったか分かりにくくなることがあった
  2. React/Vueコンポーネント時代 T MUI、 Chakra等コンポーネントライブラリと言ったら、 多く の人が思い浮かべるものF T npmで配布されるコンポーネントを読み込んで利用するF T テーマ的な概念はあるが、

    細かいカスタマイズは難しいF T 自作コンポーネントとのインタフェースを揃えにくいF T スタイリングライブラリを強制されがち。
  3. コンポーネントライブラリ固有の 知識が多すぎない? スタイルはブラックボックスの中 MUIのサンプル // スタイルはブラックボックスの中、原則props経由で見た目を変更する /* 何も考えずにコンポーネントを作ると、sxPropsが使えない */ import

    from import from import from const = => = = = = = Card ; CardContent ; ArticleCard () ( < > < {{ mt: }}> < > < {{ fontSize: }} >Okinawa</ > </ > </ > { } < /> </ > ); '@mui/material/Card' '@mui/material/CardContent' '@/components/ArticleCard' "text.secondary" "" "margin-top: 16px;" Page sx sx color article style div div Card 4 CardContent Typography 14 Typography CardContent Card ArticleCard
  4. Radix Primitivesのサンプルコード import from import as from import const =

    => = = = = = = = = React ; Tabs ; ; () ( < > < > < > Account </ > < > Password </ > </ > </ > ) 'react' '@radix-ui/react-tabs' './styles.css' "TabsRoot" "tab1" "TabsList" "Manage your account" "TabsTrigger" "tab1" "TabsTrigger" "tab2" * Tabs.Root Tabs.List Tabs.Trigger Tabs.Trigger Tabs.Trigger Tabs.Trigger Tabs.List Tabs.Root Demo className defaultValue className aria-label className value className value
  5. Radix Primitivesのサンプルコード .TabsRoot .TabsList .TabsTrigger { : ; : ;

    : ; : ( ); } { : ; : ; : ( ); } { : ; : ; : ; : ; display flex flex-direction column width 300 box-shadow 0 2 10 var flex-shrink 0 display flex border-bottom 1 solid var font-family inherit background-color white padding 0 20 height 45 px px px px px px --black-a4 --mauve-6 サンプルコードが提供されてるとはいえ このテンションでやるのは大変
  6. shadcn/ui r Radix Primitiveに対し てTailwindのスタ イ ルを当てたコ ンポーネン ト集x r

    イ ン ス トール用のCLIが用意されてい て、 以下のよ うなコ マン ド で依存関係も含めて導入でき るx r `npx shadcn-ui@latest add button r Tailwindのテーマを利用した実装にな っ ている。
  7. shadcn/ui export interface extends typeof ?: const = = ...

    => const = ? : return < = = ... /> . < >, < buttonVariants> { } React. < , >( ({ , , , , }, ) { asChild Slot ( className { ( ({ , , }))} ref {ref} { } ) ButtonProps React ButtonHTMLAttributes HTMLButtonElement VariantProps forwardRef HTMLButtonElement ButtonProps cn asChild className variant size asChild props ref Comp buttonVariants variant size className props boolean Button false Comp "button"
  8. À

  9. À Park UI À Ark UIをベースにスタイルを当てたコンポーネント集i À PandaCSS (React、 Vue、

    Solid) とTailwindを対象にし ているi À(おそらく、 自作コンポーネントライブラリを作るのに向い ている。 )
  10. À 余談: 雰囲気がニュートラルであること À 良い意味で 「らしさ」 がないスタイル、 UIデザインのスター ト地点にしやすv À

    ニュートラルな理6 À スタイルが自由にいじれるから好き勝手変更でき9 À ダークモードなどを考えると自ずとニュートラルにな りがち
  11. なぜ採用したのか? - そもそもの前提条件 ‡ 組織的にReact + TailwindCSSを使うことが多f ‡ ロックインすることは許容していE ‡

    人数は多くないのでUIだけにコストはかけずらf ‡ 対象となるアプリケーションはユーザー向けフロントエン ドと内部向けフロントエンドが存在するサービス
  12. 編集者向け ウェブアプリ寄り フロントエンド x 同じチームで触るとしたら MUIやChakraは避けたF x TailwindとCSS in JSの

    スイッチングコストは結構 でかい (主観) → スタイリングのライブラリ を統一したい
  13. このプロジェクトの行き来はしんどい const = => return = = = () {

    < > < > < >Hello Okinawa</ > < >Hello Okinawa</ > </ > </ > } ChakraPage fontSize mt color Card CardBody Text Text Text Text CardBody Card 'xl' "4" "gray.500" const = => return = = () { < > < > < >Hello Okinawa</ > < >Hello Okinawa</ > </ > </ > } TailwindPage className className Card Card.Body Card.Body Card p p p p "text- xl" "mt-4 text- gray-500"