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
フロントエンド UIコンポーネント Shadcn/uiの良さを伝えたい!
Search
Shogo
April 26, 2024
Programming
0
24
フロントエンド UIコンポーネント Shadcn/uiの良さを伝えたい!
Shogo
April 26, 2024
Tweet
Share
More Decks by Shogo
See All by Shogo
本業 + 副業2社で働くエンジニアの時間術
shogo4131
0
110
スタートアップで学ぶフルリモート開発の進め方
shogo4131
0
410
フリーランスエンジニア辞めてみた!
shogo4131
0
470
Jotaiをプロジェクトに導入してみた
shogo4131
0
14
激戦区東京でフリーランスとして生き残った方法3選
shogo4131
0
9
MUIは不要? React次世代コンポーネントライブラリ Mantine!!!
shogo4131
0
19
Other Decks in Programming
See All in Programming
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
1k
Site Reliability Engineering for GMO
pyama86
9
1.1k
Snowflakeで眠ったデータを起こそう!
estie
0
160
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
1k
GraphQLサーバの構成要素を整理する #ハッカー鮨 #tsukijigraphql / graphql server technology selection
izumin5210
4
920
Native Federation: The Future of Micro Frontends in Angular
manfredsteyer
PRO
0
130
Hanami and htmx
bkuhlmann
0
230
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
見た目から始める生産性向上
ikumatadokoro
10
1.5k
Compose-View Interop in Practice (mDevCamp 2024)
stewemetal
0
170
Try creating your own orderedmap
kazamori
1
260
使ってみよう Azure AI Document Intelligence
kosmosebi
2
370
Featured
See All Featured
Fireside Chat
paigeccino
22
2.6k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
41
4.4k
Making Projects Easy
brettharned
109
5.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
How to Ace a Technical Interview
jacobian
273
22k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
The Cult of Friendly URLs
andyhume
74
5.7k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
Transcript
フロントエンド UIコンポーネント Shadcn/uiの良さを伝えたい! @react_nextjs 2024/4/27
自己紹介 名前: Reactおじさん (@react_nextjs) 会社: 株式会社ROUTE06 職業: SWE、PM 技術スタック: React、Next.js、TypeScript、GraphQL
経歴: 営業 → SES → フリーランス → ROUTE06(今ここ) + 副業1社 好きな言葉: 誠意は言葉ではなく金額
株式会社ROUTE06 Tech Blog はこちら 会社紹介はこちら
「 ROUTE06 数字 」で検索 🔍 株式会社ROUTE06
Shadcn/ui なんて読むの? なにこれ? シャドコン?
Shadcn/ui シャドシーエヌ
Shadcn/uiとは ※公式から引用
コンポーネントライブラリじゃないだど? MUI、Mantine、Chakra UI となにが違う?
Shadcn/uiとは • Radix UIとTailwindCSSをベースとして作られたUIコンポー ネントの集まり • 従来のライブラリをインストールする形ではなくCLI経由で インストールできる • Vercelの開発者が開発している
さっそく見てみる 1. セットアップ 2. ボタンコンポーネントインストール
お気づきですか? 1. セットアップ 2. ボタンコンポーネントインストール npm installしていないです!なのでpackage.jsonに追加されることもないです!!これ大事!
ソースコード & デザイン
何が起こっているのか? shadcn/uiのgithubからボ タンコンポーネントをコピー しているだけ!!
メリット • プロジェクトにあったUIコンポーネントが爆速で作れる • テンプレは出来上がっているので軽微な修正で済む • npm packageではないのでパッケージの更新が不要
デメリット • TailwindCSSとRadix UIベースなのでTailwindCSSを好む人以外は使用 しにくいかもしれない • formなどのコンポーネントをインストールする際に、react-hook-formな ども付随してインストールされるので知らないうちに他のライブラリも一 緒にインストールされているのでちゃんと確認しないといけない •
ある程度修正して使うことが前提っぽいのでコンポーネントの運用を しっかりしないと統一感のないコードになってしまう可能性がある。
まとめ • 個人開発や自社内の管理画面など作る場合は、爆速で 作れるのでおすすめ度が高い • TailwindCSSベースなので好みが分かれる • これreactの便利なhooksバージョン作ったらめちゃ良さそ うじゃない(?)
ご清聴ありがとうございました!!