---
title: "コンポーネント内でコードをラップする"
slug: "wrapping-code-in-a-component"
abstract: "ローコードコンポーネントやフォーム、さらにBYOCコンポーネント、Webコンポーネント、Reactコンポーネントなどの外部コンポーネントもローコードコンポーネント内にラップできます。また、ローコードコンポーネント内にJavaScriptやHTMLコードを追加することも可能です。"
---
# コンポーネント内でコードをラップする

コードや他のコンポーネント(例えば)を使ってコンポーネントを作成できます。

-   また別の [ローコードコンポーネント](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/prototyping-components.html "Prototyping components")です。
-   [外部のBYOCコンポーネント](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/wrapping-code-in-a-component/add-an-external-component-to-the-component-builder.html "Add an external component to the Component builder")(ウェブまたはReactコンポーネント)。
-   [HTMLおよび/またはJavaScript](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/wrapping-code-in-a-component/add-html-and-javascript-to-a-component.html "Add HTML and JavaScript to a component")のコードの一部です。
-   [Forms](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/forms.html "Forms")で作成されたFormコンポーネントです。

また、Page Builderのキャンバス上で登録済みの外部コンポーネントやローコードコンポーネントを直接使うこともできます。しかし、コンポーネントを別のローコードコンポーネントでラップすることには利点があります。これにより、以下が可能になります:

-   例えば、既存のコンポーネントの周りにテキスト、コピー、画像を追加するなど、コードコンポーネントを中心にUIを構築しましょう。
-   コードコンポーネントのレスポンシブバージョンを作成しましょう。
-   コンポーネントビルダーからコンポーネントのスタイリングをコントロールできます。

> !注Sitecoreコンポーネントのテーマは、埋め込みされる外部コンポーネント(ReactやWebコンポーネントなど)のスタイリングを上書きするために下層的に下に流れます。これは段落、リンク、ヘッダー、ボタンのスタイリングに関わるものです。