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
なぜコピペで使うコンポーネント集を利用するのか?
Search
mottox2
November 18, 2023
Technology
8
6.7k
なぜコピペで使うコンポーネント集を利用するのか?
フロントエンドカンファレンス沖縄2023で発表に使用したスライドです。
mottox2
November 18, 2023
Tweet
Share
More Decks by mottox2
See All by mottox2
もう一歩進めたい OG画像の動的生成
mottox2
6
1.4k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.7k
Figma Plugin公開までの壁を乗り越える
mottox2
2
2.6k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
610
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.7k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
570
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.1k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
32k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
4.1k
Other Decks in Technology
See All in Technology
HashHub会社案内「なぜ今、パブリックブロックチェーンに賭けるのか」
hashhub
3
75k
Strict Concurrencyにしたらdeinitでクラッシュする話
0si43
0
120
Vista FinderMx
jtes
0
160
低コストで実現する社内文書RAG機能を搭載したAIチャットボット開発
takapy
3
620
Webセキュリティのあるきかた
akiym
14
4.5k
たった一人で始めた音楽制作が気がついたら会社公認の部活動になっていた話〜組織の垣根を超えるコラボレーションを実現するには〜 / On-KAG-bu
piyonakajima
0
170
【shownet.conf_】多様化するネットワーク環境を柔軟に統合するルーティングテクノロジー
shownet
PRO
0
290
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
280
k6を活用した再現性・拡張性の高い負荷試験基盤の構築
biwashi
11
3k
【shownet.conf_】3Dアプローチで守るセキュリティ
shownet
PRO
0
290
つよつよリーダーが 抜けたらどうする? 〜ナビタイムのAgile⽀援組織の変遷〜
navitimejapan
PRO
22
13k
成果のためのコミュニケーション - 語彙を育てよう -/communication-for-good-outcome-developing-vocabulary
hassaku63
4
150
Featured
See All Featured
Optimising Largest Contentful Paint
csswizardry
31
2.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
26
1.9k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.5k
Creatively Recalculating Your Daily Design Routine
revolveconf
217
12k
Robots, Beer and Maslow
schacon
PRO
157
8.2k
Web development in the modern age
philhawksworth
205
10k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
230
17k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
42
6.5k
How to Ace a Technical Interview
jacobian
275
23k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
364
22k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
29
1.7k
GraphQLの誤解/rethinking-graphql
sonatard
65
9.9k
Transcript
なぜコピペで使う コンポーネント集を利用するのか? フロントエンドカンファレンス沖縄2023 @mottox2
@mottox2 UIデザインとウェブフロントエンド
コンポーネント集、 どうしていますか? 既存のものを使っていますか?
本セッションの対象者 小規模チーム シングルプロダクト マルチプロダクト 大規模 マルチプロダクトであるとか、 サービスが成熟期な人にはNot for meと感じられるかもしれません
コンポーネント集の歴史を振り返る 1. Bootstrap時代 2. React/Vueコンポーネント時代 3. Unstyledコンポーネント時代
Bootstrap時代 CSSフレームワークとも呼ばれていた、 SPA普及以前によ く使われていたもG でかいCSSを読み込んで使う、 グローバ' カスタマイズはできた!
CSS本体をいじってしまうと、 1万行ぐらいあったりする ので、 どこをいじったか分かりにくくなることがあった
React/Vueコンポーネント時代 T MUI、 Chakra等コンポーネントライブラリと言ったら、 多く の人が思い浮かべるものF T npmで配布されるコンポーネントを読み込んで利用するF T テーマ的な概念はあるが、
細かいカスタマイズは難しいF T 自作コンポーネントとのインタフェースを揃えにくいF T スタイリングライブラリを強制されがち。
コンポーネントライブラリ固有の 知識が多すぎない? スタイルはブラックボックスの中 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
Unstyledコンポーネント時代 スタイルがなく、 機能だけを提供す アクセシビリティを担保しながら作る観点もあ その分、 自分たちで書く量も多8
自作コンポーネントライブラリの基礎にもなりう Headless UI, Ark UI, Radix Primitivesなど
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
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 サンプルコードが提供されてるとはいえ このテンションでやるのは大変
楽な状態と自由な状態のトレードオフ unstyledなライブラリは自由ではあるが、 あまりにも手 数がかかりすぎp MUI系はカスタマイズがしにくい上に、 流儀に沿わないと ポテンシャルを活かせな9
headless系との噛み合わせも 自作コンポーネントに思想を組み込むのも漏れがち
自由と楽さ、 どちらが欲しいですか?
両取りできる!?コピペで導入するコンポーネント集 r コンポーネント集のサイトからコードをプロジェクトにコ ピペして利用するもE r Unstyledなライブラリにスタイルを当てたものが用意さ れている
コピペで導入するとは何? コピペで導入でき、 コードがプロジェクト上に露出すf 今までprops経由やthemeで変更を行う必要があった部 分が露出し、 カスタマイズ可能v ライブラリ特有の部分が少なく、
挙動も把握しやす ライブラリ自体を離脱する選択が取りやすいので、 採用し やすい
両取りできる!?コピペで導入するコンポーネント集 t 有名どころは3X t radix primitiveにスタイルを当てたshadcn/uS t ArkUIにスタイルを当てたParkU3 t Tailwind
Labsが開発中のCatalyst (現在未公開)
None
shadcn/ui r Radix Primitiveに対し てTailwindのスタ イ ルを当てたコ ンポーネン ト集x r
イ ン ス トール用のCLIが用意されてい て、 以下のよ うなコ マン ド で依存関係も含めて導入でき るx r `npx shadcn-ui@latest add button r Tailwindのテーマを利用した実装にな っ ている。
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"
À
À Park UI À Ark UIをベースにスタイルを当てたコンポーネント集i À PandaCSS (React、 Vue、
Solid) とTailwindを対象にし ているi À(おそらく、 自作コンポーネントライブラリを作るのに向い ている。 )
Next.jsのプロジェクトにshadcn/uiのボタンを追加しま Q `npx shadcn-ui@latest init EQ `npx shadcn-ui@latest add button
ÇQ 作成されたButtonを読み込む 時間があればデモ
À 余談: 雰囲気がニュートラルであること À 良い意味で 「らしさ」 がないスタイル、 UIデザインのスター ト地点にしやすv À
ニュートラルな理6 À スタイルが自由にいじれるから好き勝手変更でき9 À ダークモードなどを考えると自ずとニュートラルにな りがち
使いたいという理由もありましたが 状況にフィットしたので 実プロジェクトでshadcn/uiを採用しています
なぜ採用したのか? - そもそもの前提条件 組織的にReact + TailwindCSSを使うことが多f ロックインすることは許容していE
人数は多くないのでUIだけにコストはかけずらf 対象となるアプリケーションはユーザー向けフロントエン ドと内部向けフロントエンドが存在するサービス
一般ユーザー向け 編集者向け ウェブサイト寄り フロントエンド ウェブアプリ寄り フロントエンド Tailwind製 何を使おう? なぜ採用したのか? -
スタイリング方法の統一
編集者向け ウェブアプリ寄り フロントエンド x 同じチームで触るとしたら MUIやChakraは避けたF x TailwindとCSS in JSの
スイッチングコストは結構 でかい (主観) → スタイリングのライブラリ を統一したい
このプロジェクトの行き来はしんどい 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"
` カスタマイズが入るコンポーネントの見込みがあっ1 ` ちょっと凝ったFileUplod、 SelectBo ` 外部ライブラリと連携するRichEditoÈ ` CSS in
JS系のを入れたくなかった なぜ採用したのか? - 外部ライブラリとの連携
使ってみてどうか? x 総評としては入れて良かったと感じているI x Tailwindを使いつつUIパーツが速攻で用意できてよいI x TailwindのconfigやVariantのレールが引けて良いI x 気に入らないことがあったらすぐ変更できる安心感I x
離脱しやすいので導入の心理的コストが低い。
どんな懸念がある? コピペで導入する方法が枯れてないことによる負債化X 共有コンポーネントが触りやすすぎることによる負債化。 → やはり気を使ってメンテナンスしていく必要はありそう 離脱しても単なるTailwindプロジェクトになるので一定
の安心感はある
まとめ u セッションタイトル→自由と便利さを両どりするためP u コンポーネント集にも新時代が訪れつつあるP u その中でも妥協点になりうるコピペで使うコンポーネン ト集が現れてきているP u 今回の選択はあくまで一例、
自分のプロジェクトにあった ものを選ぼう。
Thank you!