UI コンポーネントの共有: コピー VS インストール

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

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

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

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

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

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

ビットプラットフォーム上のインタラクティブな shadcnui チャート

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

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

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

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

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

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

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

Bit Platform で共有される 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

以上がUI コンポーネントの共有: コピー VS インストールの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。