メインコンテンツまでスキップ

本書の目的と学べること

本書について​

本書は、React と Tailwind CSS を学び始めた方を対象としています。デザインシステムに沿った、再利用可能で一貫性のあるコンポーネントの設計を、shadcn/ui の Button を題材として解説します。

shadcn/ui は、近年の React 開発で広く使われている UI コンポーネント集です。ライブラリとしてインストールするのではなく、コードを自分のプロジェクトにコピーして自由にカスタマイズできるのが特徴です。だからこそ、その「中身」を理解する価値があります。

本書は React 19 / Tailwind CSS v4 / 最新の shadcn/ui に対応しています。

この本を読み終えると​

読者が次のことをできるようになることを目標にしています。

デザインシステムのベストプラクティス（デザイントークン・宣言的なバリアント・安全なカスタマイズ・合成・型安全）に沿って、再利用可能なコンポーネントを自分で設計できるようになる。

Button はそのための入り口です。Button を深く理解すれば、Card・Input・Dialog など、他のコンポーネントにも同じ原則を応用できます。

対象読者​

  • React の基本（コンポーネント・props・state）を理解している
  • Tailwind CSS の基本的なクラス（p-4・text-sm など）を触ったことがある
  • 再利用しやすいコンポーネントの設計を学びたい
  • shadcn/ui のコードを読んで理解したい
備考

React・Tailwind CSS が完全に初めての方は、まず公式チュートリアルで基礎を学んでから本書に取り組むことをおすすめします。

なぜ Button コンポーネントなのか​

ボタンは最もシンプルに見えて、コンポーネント設計の本質的な課題がすべて詰まっています。

Button に詰まっている設計課題
├─ 複数のバリアント（default / secondary / destructive…）
├─ 複数のサイズ（sm / default / lg / icon…）
├─ スタイルのカスタマイズ（利用者による上書き）
├─ 一貫した色・テーマ（デザイントークン）
├─ セマンティック HTML（button か a か）
└─ DOM アクセス（フォーカス・測定…）

これらは、そのままデザインシステムの構成要素です。だから「Button を正しく作れる」ことは、「デザインシステムに沿ったコンポーネントを作れる」ことの第一歩になります。

本書の構成と学べること​

本書は、基礎編 → デザインシステム編 → コア技術編 → 実践編 と、土台から実践へ順に進みます。

まとまり章学ぶこと
基礎編はじめに（本章）本書の目的とデザインシステムの全体像
基礎編環境構築React 19 + Vite + Tailwind CSS v4 のセットアップ
基礎編完成形を見てみようこれから作る Button の全体像をつかむ
基礎編Tailwind CSS の基礎ユーティリティファーストと状態修飾子
デザインシステム編デザインシステムとトークン色・余白を「意味」で管理する（@theme / OKLCH）
コア技術編cvaバリアントを宣言的に管理する
コア技術編cn 関数clsx + tailwind-merge でクラスを安全に結合する
コア技術編ref の転送React 19 で DOM にアクセスする
コア技術編Radix UI SlotasChild で要素を差し替える（合成）
コア技術編TypeScript型安全なコンポーネント
実践編ハンズオンゼロから Button を実装する
実践編発展編学んだパターンを他のコンポーネントへ応用する
実践編まとめButton からデザインシステムへ

学習の進め方​

本書は、前から順に読むことを想定しています。特にデザイントークンの章以降は、前の章を土台にしています。各章には次の要素が含まれます。

  • 概念の説明：なぜその技術が必要なのか
  • 実際に動くコード例：本書のコードは最新版で動作を確認しています
  • 図解：仕組みを目で理解する
  • まとめ：要点の振り返り
備考

読むだけでなく、実際にコードを書いて動かしながら学ぶことを強くおすすめします。次章で、そのための環境を整えます。

さあ、始めましょう​

次章では、本書の学習に必要な開発環境（React 19 + Vite + Tailwind CSS v4）を構築します。