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

フロントエンド 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バージョン作ったらめちゃ良さそうじゃない(？)

ご清聴ありがとうございました！！

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

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

Shogo

More Decks by Shogo

Other Decks in Programming

Featured

Transcript