近年、開発者が UI ライブラリに取り組む方法に顕著な変化が見られ、npm パッケージ経由でコンポーネント ライブラリ全体をインストールすることから離れ、コードをコードベースに直接コピー&ペーストする方向に移行しています。

この傾向は、最大限の柔軟性を実現するためにプロジェクトに直接コピーできる既製のカスタマイズ可能なコンポーネントを開発者に提供するライブラリである Shadcn/UI によって主に普及しました。

複雑なコンポーネントではコピーが有効な理由

コピー&ペーストのアプローチは、特に認証ページ、詳細なダッシュボード、複雑なデータ視覚化などの複雑な UI 要素の場合に威力を発揮します。これらのコンポーネントには微調整されたカスタマイズが必要ですが、不変の npm パッケージでは実現が困難です。

このアプローチにより、開発者は無限の構成オプションでライブラリの API を圧倒するのではなく、最新のフロントエンド フレームワークの 構成可能かつ宣言的 の性質を活用して、コンポーネントのあらゆる部分をより詳細に制御できるようになります。

長くて複雑な CSS セレクターの代わりに、コンポーネント内の要素にスタイルを直接適用できます。複雑な依存関係注入ロジックを使用してコンポーネントを注入する代わりに、コンポーネントを自由に配置または再配置するだけです。

Bit Platform 上のインタラクティブな shadcnui チャート

このアプローチは、AI コーディング アシスタントの導入によりさらに重要性が増しました。長く複雑なプロンプトを使用して AI を通じてコン​​ポーネントを最初から生成したり、アシスタントと長時間会話したりする代わりに、必要なものに近い事前に構築された構成から始めることができます。

コードをプロジェクトに埋め込むことで、AI アシスタントに具体的な具体的なコンテキストを与えます。そこから、スタイルの微調整、アクセシビリティ機能の追加、レイアウトの変更などの段階的な調整を行うように依頼できます。

ビットコンポーネント: 直接編集できるパッケージ

Bit は、Web 開発の世界に新しいエンティティである Bit コンポーネントを導入しました。つまり、Bit コンポーネントはスーパー パッケージと考えることができます。特定のプロジェクト設定とは関係なく、共有、インストール、コピー、さらに共同作業することもできます。

簡単にするために、UI コンポーネントをデザイン システム コンポーネントとブロック コンポーネントの 2 つのグループに分けることができます。デザイン システムでは、カードなどの基本コンポーネントが基本的な構成要素です。一方、MediaCard などのブロック コンポーネントはデザイン システム要素で構成されていますが、より高度な機能を提供します。

選択肢 1: デザイン システム コンポーネントを使用して構成する

新しいコンポーネントを作成するときの最初のオプションは、デザイン システムから構成することです。たとえば、カスタム カードを作成するには、カード、ボタン、タイポグラフィなどのコンポーネントを組み合わせる必要がある場合があります。

ビット プラットフォームで共有される MUI ベースのコンポーネント

これらのコンポーネントは、npm、pnpm、yarn、または Bit のインストールを通じてプロジェクトにインストールできます:

npm i @bitdesign/material-ui.surfaces.card bitdesign.material-ui/inputs/button @bitdesign/material-ui.data-display.typography

選択肢 2: ブロック コンポーネントの利用

事前に構築されたブロック コンポーネントを選択する場合、単純なインストール以外にも柔軟な選択肢がいくつかあります。

最も簡単な方法は、コンポーネント パッケージを直接インストールし、その API を使用することです。このアプローチは、コンポーネントがそのままの状態でニーズに適合する場合、またはわずかな調整のみが必要な場合にうまく機能します。

大規模な変更を加える必要があるシナリオでは、Bit の fork コマンドを使用して、コンポーネントの完全なコードをプロジェクトにコピーできます。これには、ソース ファイル、依存関係、構成 (コンポーネントの開発ツールを含む) が含まれます。

https://bit.cloud/learnbit-react/material-ui-blocks/content/media-card

たとえば、MediaCard コンポーネントとその構成をコピーするには、ビット フォークを実行し、そのコンポーネント ID (パッケージ名ではなく) を引数として渡します。

bit fork learnbit-react.material-ui-blocks/content/media-card

Bit では、コンポーネントに変更を加えて新しいバージョンをリリースできる bit import コマンドも提供していることは注目に値します。このオプションを使用するには、コンポーネントを変更するための適切な権限が必要です (元のコンポーネントに影響を与えない bit fork コマンドとは異なります)。

依存関係のソースファイルの削除

依存関係のあるコンポーネントをフォークするとき、Bit は便宜上それらを自動インストールします。ただし、依存関係のソース コードに直接アクセスする必要がある場合は、それらの依存関係をフォークすることもできます。

たとえば、Button コンポーネントをコピーしたい場合は、Bit Platform 上のチームのコレクションからフォークすることもできます:

bit fork bitdesign.material-ui/inputs/button