> ## Documentation Index
> Fetch the complete documentation index at: https://docs.base44.com/llms.txt
> Use this file to discover all available pages before exploring further.
> ## Agent Instructions
> Internal links on these pages omit the .md extension. Append .md to a docs page URL, or send an Accept: text/markdown header, to get that page as markdown.
# アプリにコンポーネントを追加する
> アプリエディタでコンポーネントライブラリを閲覧し、洗練された既製の UI コンポーネントを追加します。Base44 はアプリのテーマ、フォント、コンテンツに合わせてコンポーネントを再構築します。
コンポーネントライブラリは、洗練された既製の UI コンポーネントのコレクションです。アプリエディタの AI チャットから直接アプリに追加できます。レイアウトを一から説明する必要はありません。厳選されたコンポーネントを閲覧して選ぶだけで、Base44 がアプリ内に再構築します。
コンポーネントを追加すると、Base44 がサイトに合わせてテーマを適用します。汎用的なブロックをそのまま配置するのではなく、色、フォント、コンテンツをアプリに合わせて調整します。AI チャットに依頼すれば、デザインをさらにカスタマイズすることもできます。
***
## コンポーネントライブラリを開く
コンポーネントライブラリは、AI チャットのプラスメニューから開きます。プラスメニューはプロンプトを入力する場所の横にあります。
コンポーネントを選択すると、AI チャットは自動的に **Build mode** に切り替わります。チャットモードの詳細は、[AI チャットモード](/ja/Building-your-app/AI-chat-modes) を参照してください。
**コンポーネントライブラリを開くには:**
1. アプリエディタに移動します。
2. AI チャットで、プロンプトボックスの横にあるプラスアイコンをクリックします。
3. **Explore component library** をクリックします。
***
## コンポーネントを閲覧してプレビューする
コンポーネントライブラリは大きなウィンドウで開きます。上部に検索ボックス、左側にカテゴリの一覧があります。**All components** にはライブラリのすべてが表示されます。各カテゴリは、**Commerce**、**Navigation**、**Booking & Scheduling** など、目的ごとにコンポーネントをまとめています。
コンポーネントを探す方法は 3 つあります。
* **検索:** 検索ボックスにキーワードを入力します。開いているカテゴリ内を検索します。ライブラリ全体を検索するには、先に **All components** を選択してください。
* **カテゴリ:** 左側のカテゴリをクリックすると、そのカテゴリのコンポーネントだけが表示されます。スマートフォンでは、カテゴリは検索ボックスの上に横一列で表示されます。
* **フィルター:** **Filters** をクリックすると、タグで一覧を絞り込めます。
コンポーネントにカーソルを合わせると、動作を確認できます。クリックすると詳細が開きます。詳細では、**Desktop** と **Mobile** を切り替えられるライブプレビューと短い説明が表示されます。一部のコンポーネントでは、**Try different states** で追加前に各状態を確認できます。コンポーネント名の横の矢印で、前後のコンポーネントに移動できます。
***
## コンポーネントを追加する
コンポーネントの詳細から、AI にその使い方を伝えます。次に、プロンプトに追加するか、すぐに構築します。1 つのメッセージで追加できるコンポーネントは 1 つです。メッセージを送信すると、Base44 はコンポーネントをアプリ内の React コードとして再構築します。スタイル、フォント、文言もデザインに合わせて調整します。
**アプリにコンポーネントを追加するには:**
1. アプリエディタの AI チャットで、プロンプトボックスの横にあるプラスアイコンをクリックします。
2. **Explore component library** をクリックします。
3. 目的のコンポーネントをクリックします。
4. **How should the AI use it?** で、配置する場所を説明します。たとえば、ページやセクションです。この手順は省略できます。
5. **Add to chat** をクリックすると、プロンプトに配置されます。送信前にメッセージを編集できます。すぐに送信する場合は **Build now** をクリックします。
**コンポーネントの追加についての補足:**
* **クイック追加:** 詳細を開かずにコンポーネントを追加するには、カードの **+** をクリックします。
* **もう一度確認する:** 後でコンポーネントを再確認するには、プロンプトボックス内か送信済みメッセージの上にあるチップをクリックします。
* **新しいコードライブラリ:** アプリにまだないコードライブラリがコンポーネントに必要な場合があります。その場合、Base44 はコンポーネントの構築の一環として、インストールの承認を求めます。詳細は [npm パッケージの追加と使用](/ja/Building-your-app/NPM-packages) を参照してください。
***
## よくある質問
質問をクリックすると詳細が表示されます。
1 つのメッセージで追加できるコンポーネントは 1 つです。別のコンポーネントを追加するには、コンポーネントライブラリをもう一度開き、同じ手順を繰り返します。
いいえ。コンポーネントの追加は通常の構築メッセージです。そのため、他のプロンプトと同じようにクレジットを使用します。コンポーネントの閲覧や追加に別途料金はかかりません。
はい。構築されたコンポーネントはアプリの一部になります。そのため、アプリの他の部分と同様に、AI チャットにスタイル、コンテンツ、レイアウトの変更を依頼できます。
このページは AI によって翻訳されました。最も正確で最新の情報については、[英語版](/) を参照してください。
This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.