Skip to main content

デザインシステム 技術スタック・周辺ライブラリ

本ドキュメントでは、ReactおよびTailwind CSSをベースとしたデザインシステムを構築する際に推奨される技術スタックと周辺ライブラリを定義する。

1. コアライブラリ（前提）​

UI構築およびスタイリングの基礎となるライブラリである。

ライブラリ名目的選定理由
ReactUI構築宣言的でコンポーネントベースのUIライブラリとして業界標準であるため。
Tailwind CSSスタイリング基盤ユーティリティファーストで、一貫性のあるデザインシステムを素早く構築できるため。
# インストールコマンド
npm install react react-dom
npm install -D tailwindcss postcss autoprefixer

2. ヘッドレスUIライブラリ（アクセシビリティ基盤）​

キーボード操作やアクセシビリティ対応を共通化するための基盤である。

ライブラリ名目的選定理由
React Aria ComponentsアクセシビリティUI基盤Adobeが提供する堅牢なWAI-ARIA対応。コンポーネントベースで柔軟なスタイリングが可能。
Radix UI Primitives柔軟なヘッドレスUI各機能が独立しており、必要なもののみ導入可能。多くのUIライブラリの基盤として採用実績が豊富。
# インストールコマンド
npm install react-aria-components @radix-ui/react-dialog

3. スタイルのバリエーション・クラス名管理​

Tailwind CSSのクラス名を効率的かつ安全に扱うためのユーティリティ群である。

ライブラリ名目的選定理由
tailwind-variantsスタイル出し分けPropsに応じたクラス切り替えが安全かつシンプル。TypeScriptの型推論と相性が良いため。
tailwind-mergeクラス名競合解決動的に生成されるクラスの衝突を解決し、意図したスタイルで正しく上書きするため。
clsxクラス名の結合軽量かつ高速に複数のクラス名や条件付きクラスを結合できるため。
# インストールコマンド
npm install tailwind-variants tailwind-merge clsx

4. アイコンライブラリ​

ライブラリ名目的選定理由
Lucide ReactUI用アイコンセット一貫性のある美しいデザイン。SVGベースでTailwind経由のスタイル設定が容易なため。
# インストールコマンド
npm install lucide-react

5. 開発環境・ドキュメント​

ツール名目的選定理由
Storybook開発環境 / カタログコンポーネント駆動開発の標準ツール。実装とデザインの乖離を防ぎ、独立した確認が可能。
# セットアップコマンド
npx storybook@latest init

6. コード品質管理（Lint & フォーマット）​

ツール名目的選定理由
prettier-plugin-tailwindcssフォーマット自動ソートクラス名の記述順序を自動で標準化し、コードの可読性と一貫性を保つため。
eslint-plugin-tailwindcssクラス名の静的検証無効なクラス名や意味のない重複指定を検知し、実装ミスを未然に防ぐため。
# インストールコマンド
npm install -D prettier prettier-plugin-tailwindcss eslint-plugin-tailwindcss

7. テストフレームワーク​

ツール名目的選定理由
Vitest + RTL単体・結合テスト高速なVitestと、ユーザー操作をシミュレートするReact Testing Libraryの組み合わせ。
# インストールコマンド
npm install -D vitest @testing-library/react @testing-library/dom @testing-library/jest-dom

8. ビルドツール（npmパッケージ配布時）​

ツール名目的選定理由
tsupライブラリのビルドesbuildベースで設定が少なく、高速にパッケージをバンドルできるため。
# インストールコマンド
npm install -D tsup
Last updated on