---
title: "最初のコンポーネントを組み立てましょう"
slug: "build-your-first-component"
abstract: "既存のコンポーネントをコピーしてレンダリングし、追加機能を構築することでコンポーネントを作成します。"
time: "20 minutes"
---
# 最初のコンポーネントを組み立てましょう

これは [入門ウォークスルーシリーズ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai.html)の第4部です。ここでの手順を完了する前に、プロジェクトと環境を作成し、[サイトとページを作成し](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/create-a-site-and-a-page.html "Create a site and a page")、[ローカル開発環境を整](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/set-up-your-local-development-environment.html "Set up your local development environment")えていることを確認してください。

この例では、タイトルとテキストを含むコードコンポーネントを追加します。コンポーネントを作成するには、[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)に標準搭載されている既存のコンポーネントのうちの1つをクローンします。既存のコンポーネントをクローンすることで、必要なボイラープレートアイテムや設定を作成することで開発時間を節約でき、必要なベーステンプレートがページビルダーのコンテンツ作成機能をサポートするように設定されていることを確認できます。

このウォークスルーでは、以下の方法を説明します:

1.  [新しいコンポーネントを作成してデプロイする](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/build-your-first-component.html#create-and-deploy-the-new-component)
2.  [レンダリング定義を作成する](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/build-your-first-component.html#create-the-rendering-definition)
3.  [そのコンポーネントをあなたのサイトページに追加してください](https://doc.sitecore.com/sai/ja/developers/sitecoreai/getting-started-with-sitecoreai/build-your-first-component.html#add-the-component-to-your-site-page)

## 新しいコンポーネントを作成してデプロイする

最初のステップでは、ローカルプロジェクトでコンポーネント構造を作成します。

### Content SDK (Next.js)

Content SDKを使っている場合は、Reactコンポーネントを作成します。このコンポーネントは以下の性質を受け入れます:

-   rendering – はコンポーネントの表示(レンダリング)に関する情報を含む。
-   params – Sitecoreからコンポーネントに渡されたパラメータを含むオブジェクト。

このコンポーネントは以下のSitecoreパラメータを使用します:

パラメータ

概要

Styles

コンテナ用のCSSクラス。

GridParameters

グリッドシステム用のCSSクラス(例:Bootstrap)。

RenderingIdentifier

分析に使われるコンポーネントの一意識別子です。

さらに、Pagesの右側で設定可能なスタイルを含むコンポーネントを作成した場合、該当するHTML要素のdata-class-change属性を利用できます。Pagesでは、コンテンツ作成者がスタイリングメニューでスタイルを変更すると、その変更はプレビューキャンバスに反映されます。

新しいコンポーネントを作成するには:

1.  コードエディタでクローンリポジトリを開いていることを確認してください。
    
2.  /examples/kit-nextjs-skate-park/src/componentsフォルダで新しいファイルを作成し、名前をTitleAndText.tsxにします。
    
3.  新しいファイルに以下のコードを貼り付けてください:
    
    import React from 'react';
    import { Field, Text } from '@sitecore-content-sdk/nextjs';
    
    interface Fields {
     Title: Field<string>;
     Text: Field<string>;
    }
    
    type TitleAndTextProps = {
     params: { key: string: string };
     fields: Fields;
    };
    
    export const Default = (props: TitleAndTextProps): React.ReactElement => {
     const containerStyles = props.params && props.params.styles ? props.params.styles : '';
     const styles = \`${props.params.GridParameters} ${containerStyles}\`.trimEnd();
    
     return (
     <div className={\`container-default component ${styles}\`}>
     <div data-class-change className={containerStyles}>
     This container must be refreshed without reloading the page.
     </div>
     <h1 className="component-content title row">
     <Text field={props.fields.Title} />
     </h1>
     <div className="component-content text row">
     <Text field={props.fields.Text} />
     </div>
     </div>
     );
    };
    
    > !注上記のコード例のように、コンポーネントのルート要素にコンポーネントクラスが含まれていることを確認してください(container-default component ${styles})。これにより、ページエディターはキャンバス内のコンポーネントを特定し、リアルタイムでスタイリングの変更を適用できます。このクラスがなければ、右側パネルからのスタイル更新はページリフレッシュ後にのみ効果が発揮されます。
    
4.  ファイルを保存してください。
    
    > !重要ファイルが新しい行で終わるようにしなければ、コンパイルされません。
    
5.  変更をコミットに追加し、その変更をリポジトリにプッシュします。これにより自動的にSitecoreAIへの展開が開始されます。 [Deployアプリ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/deploying-sitecoreai/deploy-app.html)で進捗を追跡できます。展開完了後に次のステップに進みましょう。
    

### ASP.NETコアSDK

ASP.NET Core SDKを使っている場合は、C#コンポーネントを作成します。このコンポーネントは以下のSitecoreパラメータを使用します:

パラメータ

概要

Styles

コンテナ用のCSSクラス。

GridParameters

グリッドシステム用のCSSクラス(例:Bootstrap)。

RenderingIdentifier

分析に使われるコンポーネントの一意識別子です。

さらに、Pagesの右側で設定可能なスタイルを含むコンポーネントを作成した場合、該当するHTML要素のdata-class-change属性を利用できます。ページビルダーでは、コンテンツ作成者がスタイリングメニューでスタイルを変更すると、その変更がプレビューキャンバスに反映されます。

新しいコンポーネントを作成するには:

1.  先ほどサイトを作成していたサイトのダッシュボードに戻ります。オプション**![actions.png](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/actions.png)メニュー**をクリックし、**ページビルダーで編集**をクリックしてページを開いてください。最初にエラーが出るのは、Page Builderをローカルの開発者インスタンスに接続する必要があるからです。
    
2.  「 **デフォルトホスト編集** メニュー」をクリックして「 **ローカルホスト**」を選択してください。
    
3.  ローカルインスタンスに接続する値を入力し、https://localhost:5001、セーブします。ページビルダーはローカルの開発環境と接続され、3つの空のプレースホルダーが表示されます。
    
    ![Page builder connected to your local host to get started with ASP.NET](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/asp_local_host_5001_pages.png)
    
4.  左側のペインで「**コンポーネント**![components.png](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/components.png)」をクリックし、**タイトル**コンポーネントを見つけてページの中央のプラス記号にドラッグします。
    
5.  キャンバスには最初のページタイトルが表示されます。右側の **「コンテンツ** 」タブで「 **ページを開くコンテンツ** 」をクリックしてフィールド値を編集します。
    
6.  コードエディタでクローンリポジトリを開いていることを確認してください。
    
7.  /headapps/aspnet-core-starter/modelsフォルダ内にTitleAndText.csという新しいファイルを作成します。
    
8.  新しいファイルに以下のコードを貼り付けてください:
    
    using Sitecore.AspNetCore.SDK.LayoutService.Client.Response.Model.Fields;
    using Sitecore.AspNetCore.SDK.RenderingEngine.Binding.Attributes;
    
    namespace Sitecore.AspNetCore.Starter.Models;
    public class TitleAndText
    {
     SitecoreComponentField
     public TextField? Title { get; set; }
    
     SitecoreComponentField
     public TextField? Text { get; set; }
    }
    
9.  /headapps/aspnet-core-starter/Views/Shared/Components/SitecoreComponentフォルダ内にTitleAndText.cshtmlという新しいファイルを作成します。
    
10.  新しいファイルに以下のコードを貼り付けてください:
     
     @model TitleAndText
     
     <div class="container-default">
      <h1 class="component title row">
      <sc-text asp-for="@Model.Title" />
      </h1>
      <div class="component text row">
      <sc-text asp-for="@Model.Text" />
      </div>
     </div>
     
11.  /headapps/aspnet-core-starter/Extensions/ServiceCollectionExtensions.csファイルを開き、AddModelBoundViewメソッドに新しいコンポーネントとそのモデルを登録するための呼び出しを追加してください。クラスは次のようになります(追加したTitleAndTextコンポーネントを登録する追加の行に注目してください):
     
     using Sitecore.AspNetCore.SDK.RenderingEngine.Configuration;
     using Sitecore.AspNetCore.Starter.Models.LinkList;
     using Sitecore.AspNetCore.Starter.Models.Navigation;
     using Sitecore.AspNetCore.Starter.Models.Title;
     
     namespace Sitecore.AspNetCore.Starter.Extensions;
     
     public static class ServiceCollectionExtensions
     {
      public static RenderingEngineOptions AddStarterKitViews(this RenderingEngineOptions renderingEngineOptions)
      {
      renderingEngineOptions.AddModelBoundView<Title>("Title")
      .AddModelBoundView<Container>("Container")
      .AddModelBoundView<ColumnSplitter>("ColumnSplitter")
      .AddModelBoundView<RowSplitter>("RowSplitter")
      .AddModelBoundView<PageContent>("PageContent")
      .AddModelBoundView<RichText>("RichText")
      .AddModelBoundView<Promo>("Promo")
      .AddModelBoundView<LinkList>("LinkList")
      .AddModelBoundView<Image>("Image")
      .AddModelBoundView<PartialDesignDynamicPlaceholder>("PartialDesignDynamicPlaceholder")
      .AddModelBoundView<Navigation>("Navigation")
      .AddModelBoundView<TitleAndText>("TitleAndText");
     
      return renderingEngineOptions;
      }
     }
     
12.  変更をコミットに追加し、その変更をリポジトリにプッシュします。これにより自動的に[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)への展開が開始されます。 [Deployアプリ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/deploying-sitecoreai/deploy-app.html)で進捗を追跡できます。展開完了後に次のステップに進みましょう。
     

## レンダリング定義を作成する

これでコンポーネントのレンダリング定義を作成できます。レンダリング定義は、コンポーネントの.tsxファイルがプロジェクト内でどこにあるか、正しくレンダリングするためにどのデータが必要かを[SitecoreAI](https://doc.sitecore.com/sai/en/users/sitecoreai/sitecoreai.html)に伝えるために使われます。既存のレンダリングをクローンすることで実現できます^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a\_xmc\_rendering。これにより、手動で行う必要のないすべてのアイテムを自動的に生成できます。その後、サイトコレクション作成時に作成したヘッドレスモジュールにレンダリングを追加します。モジュールは/sitecore/system/Settings/Projectで見つけることができます。

コンポーネントをクローンするには:

1.  クラウドポータルで、先ほど作成した環境のタイルをクリックしてください。例えば*Getting Started*。
    
2.  右側のペインで「 **アプリを開く**」をクリックします。
    
3.  メニューの上部バーで **「コンテンツ**」をクリックし、次に **「コンテンツエディター**」をクリックしてください。
    
4.  コンテンツエディターで /sitecore/layout/Renderings/Feature/Headless Experience Accelerator/Page Content/Rich Textに移動します。 **コンテンツ** タブで「 **カスタマイズページ** 」セクションまでスクロールし、コンポーネントがページ内で見えるようにするには、「 **編集可能** 」のチェックボックスが選択されていることを確認してください。
    
    ![Rich Text component window showing checked editable check box](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/editableCheckbox.png)
    
5.  「 **リッチテキスト** 」というレンダリングを右クリックし、「 **スクリプト>クローンレンダリング**」をクリックしてください。
    
6.  **「Create Derivative rendering** window」では、以下を指定します:
    
    -   **一般**タブで名前を入力し*TitleAndText*。
    -   **General**タブの「**Add to module**」欄で、「**Renderings/Project/Getting Started/Getting Started」「Getting Started」を選択します**。
    -   パラメータタブで**「****元のレンダリングパラメータのコピーを作成」**を選択します。これによりレンダリングが元のコンポーネントから切り離され、依存関係が減ります。
    -   **Datasource**タブの**Datasource**欄で、**元のDatasourceのコピーを作成する**を選択します。
    
    ![The Create derivative rendering window used when cloning the Rich Text rendering in the Content Editor](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/Clone_Rendering.png)
    
7.  「 **進行」**をクリックし、プロセスが完了したらウィンドウを閉じます。
    
8.  /sitecore/templates/Project/Getting Started/Getting Started Content/Textに移動し、**ビルダー**タブで作成したフィールドの値を変更してください:
    
    -   タイトル - **単行テキスト**を選択してください。
    -   テキスト - **マルチラインテキスト**を選択します。
    
    ![Defining the fields in the new title and text component in the Content Editor](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/Text_component_fields.png)
    
9.  両方のフィールドで **ソース** 列が空であることを確認しましょう。
    
10.  左上で「 **保存**」をクリックします。
     
     ![Save icon in Content Editor](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/CE_Save.png)
     
11.  /sitecore/content/Getting Started/Getting Started/Presentation/Available Renderingsへナビゲート。
     
12.  **「Available Renderings**」項目を右クリックし、「**Insert > Available Renderings**」をクリックしてください。
     
13.  新しいアイテム名を*Getting Started Content*して「 **OK」**をクリックします。新しいアイテムは自動的に開きます。
     
14.  **レンダリング**欄で**編集**をクリックします。
     
15.  左側の木で、以前作成したレンダリングアイテムを見つけて選択してください。 /Layout/Renderings/Project/Getting Started/Getting Started Content/TitleAndText。矢印をクリックして右側のリストに移動し、その後**OK**をクリックします。
     
     ![Edit the rendering to include the new title and text component](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/edit_rendering_title_and_text.png)
     
16.  左上で「 **保存**」をクリックします。
     
17.  メインSitecoreAIダッシュボードに戻るには、**Launchpad** ![XMC\_Switcher.png](https://doc.sitecore.com/api/markdown-image/sai/ja/developers/sitecoreai/images/XMC_Switcher.png)をクリックしてください。
     

## そのコンポーネントをあなたのサイトページに追加してください

この段階で、新しいコンポーネントの必要な設定が完了しており、サイトで使用可能になります。このステップで、Page Builderに戻り、先ほど作成したページにコンポーネントを追加すれば、ローカル開発インスタンスで確認できるようになります。

サイトページにコンポーネントを追加するには:

1.  メインの **チャンネルダッシュボード** で、新しいサイトタイルにカーソルを合わせて「 **ページビルダー**」をクリックします。あるいは、新しいブラウザタブで https://pages.sitecorecloud.io/を開きます。
2.  コンポーネント**タブの****「Starting Content**」セクションで、**TitleAndText**コンポーネントが見えます。ページのプラスアイコンのいずれかにドラッグします。これでページ上にコンポーネントがレンダリングされ、タイトルとテキストフィールドに「*テキストなし*」インジケーターが表示されるはずです。
3.  タイトル欄とテキスト欄にテキストを入力してください。
4.  ブラウザでローカルホストに移動し、入力したテキストで新しいコンポーネントがレンダリングされているのを確認しましょう(Content SDKは http://localhost:3000/ 、.NETは http://localhost/5001/)。

ウォークスルーシリーズをクリアしましたね!新しいコンポーネントの作成を続け、ローカルで変更をテストし、ソース管理プロバイダーにプッシュできます。これによりSitecoreAIでのデプロイが開始され、新しいコンポーネントがページビルダーで利用可能になります。

^UUID-3ceb7d45-3caf-3196-3a9a-f59a9474182a\_xmc\_rendering:ヘッドアプリケーション内の単一コンポーネントに関する情報を格納するための構成項目です。サイトページは複数のレンダリングで構成されています。 *レンダリング* という用語は *コンポーネントと同*義で使われることが多く、レンダリングはコンポーネント定義の一部に過ぎません。レンダリングはコンテンツエディターで定義されており、/sitecore/layout/Renderings/Feature。