extract

再利用可能なパターン、コンポーネント、デザイントークンを特定し、抽出してデザインシステムに統合することで、体系的に再利用できるようにします。

発見

対象領域を分析し、抽出できるものを特定します。

1. デザインシステムを探す：「design system」「ui」「components」などを検索して、デザインシステム、コンポーネントライブラリ、共有 UI ディレクトリを見つけます。その構成を把握します。

   • コンポーネントの構成と命名規則
   • デザイントークンの構造（存在する場合）
   • ドキュメントのパターン
   • インポート／エクスポートの規則

   重要：デザインシステムが存在しない場合は、作成する前に確認してください。まず、希望する配置場所と構成を把握します。

2. パターンを特定する：次の項目を探します。

   • 繰り返し使われるコンポーネント：複数回使用されている類似の UI パターン（ボタン、カード、入力欄など）
   • ハードコードされた値：トークン化すべき色、余白、タイポグラフィ、シャドウ
   • 一貫性のないバリエーション：同じ概念に対する複数の実装（3 種類の異なるボタンスタイルなど）
   • 再利用可能なパターン：体系化する価値のあるレイアウト、構成、インタラクションのパターン

3. 価値を評価する：すべてを抽出すべきとは限りません。次の点を検討します。

   • 3 回以上使われているか、今後再利用される可能性があるか
   • 体系化することで一貫性が高まるか
   • 汎用的なパターンか、特定のコンテキストに限定されるか
   • 保守コストに対するメリットはどの程度か

抽出を計画する

体系的な抽出計画を作成します。

• 抽出するコンポーネント：どの UI 要素を再利用可能なコンポーネントにするか
• 作成するトークン：どのハードコードされた値をデザイントークンにするか
• サポートするバリエーション：各コンポーネントにどのようなバリエーションが必要か
• 命名規則：既存のパターンに沿ったコンポーネント名、トークン名、プロパティ名
• 移行手順：既存の使用箇所をどのようにリファクタリングし、新しい共有バージョンを使うようにするか

重要：デザインシステムは段階的に成長します。将来再利用されるかもしれないものをすべて抽出するのではなく、今明らかに再利用可能なものを抽出してください。

抽出して拡充する

改良した再利用可能なバージョンを構築します。

• コンポーネント：次の特徴を備えた、適切に設計されたコンポーネントを作成します。

  • 明確なプロパティ API と適切なデフォルト値
  • さまざまなユースケースに対応する適切なバリエーション
  • アクセシビリティへの配慮（ARIA、キーボード操作、フォーカス管理）
  • ドキュメントと使用例

• デザイントークン：次の特徴を備えたトークンを作成します。

  • 明確な命名（プリミティブとセマンティック）
  • 適切な階層と構成
  • 各トークンを使用するタイミングの説明

• パターン：次の内容を含むパターンをドキュメント化します。

  • このパターンを使う場面
  • コード例
  • バリエーションと組み合わせ

絶対に行わないでください：

• 汎用化せずに、一度限りの特定コンテキスト向けの実装を抽出する
• 役に立たないほど汎用的なコンポーネントを作成する
• 既存のデザインシステムの規則を考慮せずに抽出する
• 適切な TypeScript 型やプロパティのドキュメントを省略する
• あらゆる値にトークンを作成する（トークンにはセマンティックな意味が必要です）

移行する

既存の使用箇所を新しい共有バージョンに置き換えます。

• すべての使用箇所を探す：抽出したパターンを検索します
• 体系的に置き換える：各使用箇所を更新し、共有バージョンを使うようにします
• 十分にテストする：見た目と機能が従来どおりであることを確認します
• 不要なコードを削除する：古い実装を削除します

ドキュメント化する

デザインシステムのドキュメントを更新します。

• 新しいコンポーネントをコンポーネントライブラリに追加する
• トークンの使用方法と値を記載する
• 例とガイドラインを追加する
• Storybook やコンポーネントカタログがあれば更新する

優れたデザインシステムは、成長し続けるものです。パターンが現れたら抽出し、慎重に拡充して、一貫して保守してください。