shadcn/ui を採用する理由

shadcn/uiは、ボタン、入力フォーム、選択リスト、ダイアログ、一覧表といった画面の共通部品をまとめたReact向けの部品集です。一般的なライブラリのようにパッケージとして読み込むのではなく、必要な部品のソースコードを自分のプロジェクトにコピーして使う点が特徴です。そのため、見た目や振る舞いを案件の要件に合わせて自由に書き換えられます。見た目の指定にはTailwind CSSを使い、キーボード操作や読み上げ対応といったアクセシビリティの基本は、土台となるライブラリが担っています。

弊社では、Next.jsとReactで開発する業務システムの管理画面や利用者向け画面で、shadcn/uiを採用しています。業務システムでは、フォームや一覧表、確認ダイアログといった同じ種類の部品を多数の画面で使うため、最初に共通部品を揃えることが開発速度と品質の両方に効きます。shadcn/uiは部品がプロジェクトの中にソースコードとして存在するため、案件固有の仕様、たとえば日本語の日付表記や独自の入力ルールを、外部ライブラリの制約に縛られずに実装できます。Tailwind CSSと同じ基準値で見た目を管理でき、Storybookで部品ごとの表示を確認しながら進められる点も相性が良いところです。将来ほかの開発会社が引き継ぐ場合でも、部品のコードがすべて手元にあるため、ブラックボックスになりにくいと考えています。

shadcn/uiの部品はプロジェクトの中にコピーされるため、本家の更新が自動で反映されることはありません。これは自由に編集できる利点の裏返しで、不具合修正や新機能を取り込む際は、差分を確認しながら手動で反映します。部品を編集した箇所を記録しておくと、更新時の突き合わせが楽になります。土台となるライブラリやTailwind CSSの更新には追従が必要なため、依存関係の棚卸しの際に合わせて確認し、ステージング環境で主要な画面を確認してから本番に反映します。