---
title: "接続モードで動作するSitecoreファーストJSSアプリで新しいコンポーネントを作成する"
slug: "create-a-new-component-in-a-sitecore-first-jss-app-running-in-connected-mode"
abstract: "Sitecoreに接続されたJSSアプリで新しいコンポーネントを作成・展開する"
---
# 接続モードで動作するSitecoreファーストJSSアプリで新しいコンポーネントを作成する

Sitecore-firstを開発する際、接続モードでアプリケーションを動かす場合、Sitecoreインスタンスにコンポーネント登録を展開できます。

> !重要JSS Next.jsアプリでSitecore優先の開発ワークフローでコンポーネントを作成するには、「 [Walkthrough: Sitecore firstの開発ワークフローを用いてJSS Next.jsアプリで新しいコンポーネントを作成する](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/walkthrough--create-a-new-component-in-a-jss-next-js-app-using-the-sitecore-first-development-workflow.html "Walkthrough: Create a new component in a JSS Next.js app using the Sitecore-first development workflow")」を参照してください。
> 
> 以下の手順はReact、Angular、またはVue.js JSSアプリケーションに適用されます。

アプリケーションが接続モードで動作しているときに新しいコンポーネントを作成するには:

1.  コンポーネントが存在すべきプレースホルダー名を決定します。このプレースホルダー名は、コンポーネントのJavaScriptコード(ルートまたは他のコンポーネント)で定義され、コンポーネントがHTMLソースコードのどこに注入されているかを決定します。
    
2.  [コマンドjss deploy component](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-javascript-rendering-sdk-cli-tools-api-reference.html#UUID-ba8bae12-5938-63d2-1ae1-451aec88abe5_UUID-55a165b5-479e-e61a-95ca-27b8a3c26690 "jss deploy component")を使ってコンポーネントの登録情報をSitecoreデータベースに展開します。
    
    jss deploy component <ComponentName> --allowedPlaceholders=placeholderName
    
3.  JSSアプリでコンポーネントを作成し、Component Factoryで登録します。
    
4.  アプリのビルド成果物をSitecoreに展開する:
    
    jss deploy files
    
5.  Sitecoreにログインし、[対応しているSitecoreエディター](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-editors-and-content-management.html "Sitecore editors and content management")のいずれかでアプリ上でルートを開きます。その後、UIの許可されたプレースホルダーに新しいコンポーネントを追加します。