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
7k
なぜコピペで使うコンポーネント集を利用するのか?
フロントエンドカンファレンス沖縄2023で発表に使用したスライドです。
mottox2
November 18, 2023
Tweet
Share
More Decks by mottox2
See All by mottox2
もう一歩進めたい OG画像の動的生成
mottox2
7
1.7k
UIコンポーネントライブラリをうまく使うためにできること / components-with-designer
mottox2
7
3.8k
Figma Plugin公開までの壁を乗り越える
mottox2
2
3k
Puppeteerでつくる画像と動画 / images and videos made with puppeteer
mottox2
0
650
手触りのよいウェブを考える / better-mobile-web
mottox2
3
1.8k
組織と権限とSlack App / slack-app-with-roles
mottox2
1
630
SSRを避けるためにやっていること / ssr-alternative
mottox2
9
3.2k
JSXでつくる宣言的UIなプレゼンテーション / jsx-presentation
mottox2
7
33k
プレイヤー目線の技術ブランディング / personal branding
mottox2
4
4.3k
Other Decks in Technology
See All in Technology
フォーイット_エンジニア向け会社紹介資料_Forit_Company_Profile.pdf
forit_tech
1
1.7k
OCI Success Journey OCIの何が評価されてる?疑問に答える事例セミナー(2025年2月実施)
oracle4engineer
PRO
2
280
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
10
2.1k
AWSアカウントのセキュリティ自動化、どこまで進める? 最適な設計と実践ポイント
yuobayashi
7
2k
株式会社Awarefy(アウェアファイ)会社説明資料 / Awarefy-Company-Deck
awarefy
3
12k
結果的にこうなった。から見える メカニズムのようなもの。
recruitengineers
PRO
1
130
きのこカンファレンス_ランチスポンサーセッション
kabaya
1
300
最近のラズピッピいじり / 20250308-rpijam-13th-birthday
akkiesoft
0
130
Linuxのブートプロセス
sat
PRO
6
100
RaspberryPi CM4(CM5も)面白いぞ!
nonnoise
1
270
ライフステージの変化を乗り越える 探索型のキャリア選択
tenshoku_draft
2
370
リクルートのエンジニア組織を下支えする 新卒の育成の仕組み
recruitengineers
PRO
2
210
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Unsuck your backbone
ammeep
669
57k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
The Language of Interfaces
destraynor
156
24k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Visualization
eitanlees
146
15k
A designer walks into a library…
pauljervisheath
205
24k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
115
51k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.3k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
11
560
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
11
1.3k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
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!