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
Ruby Pattern Matching
bkuhlmann
0
930
業務ツールとして使うPostman
msys75
0
110
Kotlin Multiplatform at Stable and Beyond (Android Makers 2024)
zsmb
0
540
The Cutting Edge Of Versioning (LambdaConf 2024)
chriskrycho
0
210
Komplexe Oberflächen mit SVG und der Web Animation API
joergneumann
0
690
スキーマ駆動開発による品質とスピードの両立 - 私達は何故、スキーマを書くのか
kentaroutakeda
0
190
敵対的ポイフル
futabato
0
150
if constexpr文はテンプレート世界のラムダ式である
faithandbrave
3
700
AmperとFleetを使ったAndroidアプリ
yoppie
0
280
VS Code をプロダクトにどう取り込むか
onomax
1
780
Polars入門
daikikatsuragawa
1
200
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
140
Featured
See All Featured
Gamification - CAS2011
davidbonilla
77
4.6k
Scaling GitHub
holman
457
140k
Build The Right Thing And Hit Your Dates
maggiecrowley
25
2k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
275
13k
Why Our Code Smells
bkeepers
PRO
331
56k
How GitHub Uses GitHub to Build GitHub
holman
468
290k
Testing 201, or: Great Expectations
jmmastey
30
6.4k
Done Done
chrislema
178
15k
RailsConf 2023
tenderlove
9
570
For a Future-Friendly Web
brad_frost
172
9k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
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バージョン作ったらめちゃ良さそ うじゃない(?)
ご清聴ありがとうございました!!