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
Open standards for building event-driven applications in the cloud
meteatamel
0
190
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
190
Ruby GitHub Packages
bkuhlmann
0
650
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
570
Node.js v22 で変わること
yosuke_furukawa
PRO
12
4k
SwiftUIで使いやすいToastの作り方 / How to build a Toast system which is easy to use in SwiftUI
lovee
3
190
Folding Cheat Sheet #4
philipschwarz
PRO
0
100
Anthropic Cookbook のおすすめレシピ
schroneko
7
1.3k
禅の心を手に入れよ
eltociear
1
420
Balkan Ruby 2024 — How and why to run SQLite on Rails in production
fractaledmind
0
100
Git Rebase
bkuhlmann
11
1.6k
CDKコントリビュートの最初の壁を越えよう! -簡単issueの見つけ方-
badmintoncryer
3
310
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Adopting Sorbet at Scale
ufuk
69
8.6k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
18
6.9k
Code Reviewing Like a Champion
maltzj
515
39k
Designing the Hi-DPI Web
ddemaree
276
33k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
21
1.9k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.7k
GraphQLとの向き合い方2022年版
quramy
33
12k
GitHub's CSS Performance
jonrohan
1025
450k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4k
Web Components: a chance to create the future
zenorocha
306
41k
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バージョン作ったらめちゃ良さそ うじゃない(?)
ご清聴ありがとうございました!!