フロントエンド UIコンポーネント Shadcn/uiの良さを伝えたい！

Transcript

1. フロントエンド UIコンポーネント Shadcn/uiの良さを伝えたい！ @react_nextjs 2024/4/27
2. 自己紹介 名前: Reactおじさん (@react_nextjs) 会社: 株式会社ROUTE06 職業: SWE、PM 技術スタック: React、Next.js、TypeScript、GraphQL 経歴: 営業 → SES → フリーランス → ROUTE06(今ここ) + 副業1社 好きな言葉: 誠意は言葉ではなく金額
3. 株式会社ROUTE06 Tech Blog はこちら 会社紹介はこちら
4. 「 ROUTE06 数字 」で検索 🔍 株式会社ROUTE06
5. Shadcn/ui なんて読むの？ なにこれ？ シャドコン？
6. Shadcn/ui シャドシーエヌ
7. Shadcn/uiとは ※公式から引用
8. コンポーネントライブラリじゃないだど？ MUI、Mantine、Chakra UI となにが違う？
9. Shadcn/uiとは • Radix UIとTailwindCSSをベースとして作られたUIコンポー ネントの集まり • 従来のライブラリをインストールする形ではなくCLI経由で インストールできる • Vercelの開発者が開発している
10. さっそく見てみる 1. セットアップ 2. ボタンコンポーネントインストール
11. お気づきですか？ 1. セットアップ 2. ボタンコンポーネントインストール npm installしていないです！なのでpackage.jsonに追加されることもないです！！これ大事！
12. ソースコード & デザイン
13. 何が起こっているのか？ shadcn/uiのgithubからボ タンコンポーネントをコピー しているだけ！！
14. メリット • プロジェクトにあったUIコンポーネントが爆速で作れる • テンプレは出来上がっているので軽微な修正で済む • npm packageではないのでパッケージの更新が不要
15. デメリット • TailwindCSSとRadix UIベースなのでTailwindCSSを好む人以外は使用 しにくいかもしれない • formなどのコンポーネントをインストールする際に、react-hook-formな ども付随してインストールされるので知らないうちに他のライブラリも一 緒にインストールされているのでちゃんと確認しないといけない • ある程度修正して使うことが前提っぽいのでコンポーネントの運用を しっかりしないと統一感のないコードになってしまう可能性がある。
16. まとめ • 個人開発や自社内の管理画面など作る場合は、爆速で 作れるのでおすすめ度が高い • TailwindCSSベースなので好みが分かれる • これreactの便利なhooksバージョン作ったらめちゃ良さそ うじゃない(？)
17. ご清聴ありがとうございました！！