---
title: "コンポーネントにHTMLとJavaScriptを追加する"
slug: "add-html-and-javascript-to-a-component"
abstract: "コンポーネントビルダーにHTMLおよびJavaScript要素を含めてください。"
---
# コンポーネントにHTMLとJavaScriptを追加する

コンポーネントビルダーは、HTMLやJavaScriptの要素をウェブサイトにリアルタイムでレンダリングできる柔軟なツールです。

JavaScriptファイルをHTMLブロックやウェブコンポーネントと組み合わせてリンクすることができます。例として挙げられるユースケースは以下の通りです:

-   Google Analyticsの追跡スニペットを追加します。
-   アニメーションを動かすためのカスタムコードの作成。
-   レンダリングされたHTMLを動的に操作すること。

> !注コンポーネントにJavaScriptを含めるオプションは、スクリプトファイルがページ上に存在し、一度だけ読み込まれることを保証する以外に追加機能は提供しません。
> 
> JavaScriptで表示要素をより正確に制御するには、HTML要素インスタンスを参照し、イベントを受信し操作する [ウェブコンポーネント](https://doc.sitecore.com/sai/ja/users/sitecoreai/design-components/components/wrapping-code-in-a-component/wrap-a-web-component-in-a-sitecore-component.html "Wrap a web component in a Sitecore component") を使いましょう。

また、リッチテキストを含むデータソースから動的データを追加したい場合には、HTMLブロックを使うこともできます。HTMLブロックは、段落や見出し、テキストに含まれる他のHTML要素とともにマッピングされたデータを表示できます。これは、段落や見出し要素を追加する場合のテキストがリッチテキストプロパティにマッピングされる場合とは異なります。後者の場合、データマッピングシステムは他の段落、見出し、リスト項目など、すべての構造的要素をデータマップされたHTMLから削除しますが、リンクや書式はそのまま残します。これは元の要素が段落や見出しのままであるためです。

## HTMLブロック要素を追加してください

HTMLブロックの内容は直接編集や操作にはアクセスできませんが、スタイルガイドが提供するスタイルを引き継ぎます。HTMLブロックを使って、コンテンツ内に <script> タグを付けてJavaScript関数を呼び出すことができます。

コンポーネントにHTMLを追加する:

1.  コンポーネントビルダーで、HTMLブロックを追加したいコンポーネントを開きます。
2.  外部コンポーネントを追加したいセクションや要素のコンテキストバーで、「 **Add element** > **HTML block**」をクリックします。
3.  コンテキストバーで既存の要素 **内の「Append** 」をクリックし、コンポーネントセクションのグリッド上でコンテナを作成するためにクリック&ドラッグしてください。
4.  ブロックコンテンツを設定するには、右側の **「コンテンツ** 」セクションで「 **HTML コンテンツ**」をクリックしてください。
5.  希望する設定をクリックしてください:
    -   **なし** - コードは追加されません。このオプションを使って、このコンポーネントに適用された以前の設定をすべて消去できます。
    -   **静的** - コンポーネントに含めたいHTMLを入力します。
    -   **マッピング** - HTMLブロックを埋めるために使用する [データソース](../adding-dynamic-content-to-a-component/manage-dynamic-content.md "Manage dynamic content") とプロパティを選択します。

埋め込み要素の[レイアウトやアライン](../prototyping-components/configuring-an-element.md "Configuring an element")メントをさらに[スタイリング](../styling-components/style-a-single-element-and-text.md "Style a single element and text")や編集が可能です。

## JavaScriptコードを追加してください

ウェブコンポーネントやHTMLブロックにJavaScriptを追加するには、そのコンポーネントのコードが以下のいずれかの要件を満たす必要があります。

-   JavaScriptファイルはオンラインでホストされており、コンポーネント固有のURLを使ってアクセス可能です。
-   JavaScriptコードは [動的データソース](../adding-dynamic-content-to-a-component/manage-dynamic-content.md "Manage dynamic content")に含まれています。

コンポーネントにJavaScriptコードを追加するには:

1.  コンポーネントビルダーでコンポーネントを開き、JavaScriptコードを追加したいコンポーネント要素をクリックします。
2.  ブロック内容を設定するには、右側のペインの **「コンテンツ** 」セクションで「 **JavaScript code**」をクリックしてください。
3.  希望する設定をクリックしてください:
    -   **なし** - コードは追加されません。このオプションを使って、このコンポーネントに適用された以前の設定をすべて消去できます。
    -   **URLから** - JavaScriptがホストされているURLを入力し、 **Back** :mdiChevronLeft:をクリックすると、最初の右側設定ペインに戻ります。
    -   **マッピング** - **データソース** のドロップダウンメニューで、含めたいJavaScriptのデータ [ソース](../adding-dynamic-content-to-a-component/manage-dynamic-content.md "Manage dynamic content") を選択します。次に、含めたいJavaScriptコードのデータパスをクリックし、「 **Complete**」をクリックします。

JavaScriptコードはコンポーネント要素に追加されます。