第6部 コンポーネント設計

ここまで何度も「繰り返しはコンポーネント化で解決します」と先送りにしてきました。第6部で、その約束を回収します。

第3章で見たとおり、Tailwind の「クラスが長くなる」という弱点は、同じ長いクラス列を何度も書くときに最も痛みになります。ボタンを 50 か所に置くのに、毎回 15 個のクラスをコピーするのは現実的ではありません。この重複をどう減らすか——それがこの部のテーマです。

ただし、減らし方には良い方法と悪い方法があります。第22章でまず「@apply で CSS に逃がす」という一見便利な方法の落とし穴を理解し、なぜコンポーネント抽出が推奨されるのかを腹落ちさせます。第23章では再利用を支える道具（clsx・tailwind-merge・CVA）を、第24章では Rails、第25章では React での具体的な設計を扱います。