---
title: "Sitecoreデータを用いたJSSアプリ内のページ作成"
slug: "page-composition-in-jss-apps-using-sitecore-data"
abstract: "JSSがSitecoreで定義されたレイアウトをどのように作成し、ページをレンダリングするかを理解しましょう。"
---
# Sitecoreデータを用いたJSSアプリ内のページ作成

JSSアプリケーションはSitecoreサイト用に作成されたページをレンダリングします。Sitecoreの各ページはレイアウトを使用しています。Sitecoreのレイアウトエンジンは、複数のコンポーネントをホストできる名前付きプレースホルダーを定義することで動作します。JSS Sitecoreの [動的プレースホルダー](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/sitecore-dynamic-placeholders-and-jss.html) 機能を活用し、著者主導のコンポーネントベースのレイアウトSitecoreモデルをフロントエンドアプリケーションに拡張しています。

Sitecoreでは、レイアウトはページのプレースホルダーおよびレンダリング階層を表します。編集可能になるためには、Sitecoreのページは少なくとも1つのルート(ページレベル)プレースホルダーを定義しなければなりません。コンテンツオーダーはWYSIWYGのSitecoreエディターを通じてレイアウトデータを定義し、レイアウトデータをXMLとしてデータベースに保存します。

JSSアプリケーションにおいて、レイアウトとはすべてのページで使用されるトップレベルのコンポーネントです。Sitecoreレイアウトと同様に、JSSアプリのLayoutコンポーネントは少なくとも1つの [プレースホルダー](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/introducing-placeholders-in-jss-apps.html) コンポーネント、いわゆるルートプレースホルダーを定義し、ページのコンポーネント階層を描画します。

各ルート/ページは従来のJavaScriptアプリケーションでは既知のコンポーネントをホストしますが、コンポーネント階層はSitecoreレイアウトデータによって動的に定義されるため、JSSアプリケーションには知られていません。

レイアウトを動的に駆動することで、JSSアプリはコンテンツオーサーによって定義されたレイアウトをサポートし、データ駆動型のパーソナライズや多変量テストもサポートできますが、また、コンテンツSitecoreオーサーが特定のページに対して作成したレイアウトが、JSSアプリケーション内で一致する構造を持つことも求められます。 LayoutコンポーネントでSitecoreページで使われるのと同じプレースホルダーを指定するだけでなく、JSSアプリケーションはページで使用されているSitecoreレンダリングに合致するコンポーネントも定義しなければなりません。

Sitecoreからレイアウトデータをレンダリングする場合、JSSアプリはSitecoreデータベースのレイアウトデータを直接使用しません。JSSアプリがページやルートにアクセスすると、カスタムルート [処理やデータ取得](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/route-handling-and-data-fetching-in-jss-apps.html) 機能を使ってSitecoreのエンドポイントからJSON形式のデータを取得します。取得したレイアウトデータに基づき、コンテンツオーサーがSitecoreエディターでレンダリングを組み立てた方法に基づいてページの [コンポーネント](https://doc.sitecore.com/xp/en/developers/hd/22/sitecore-headless-development/components-in-jss-apps.html) 階層をレンダリングできます。

コンポーネントをSitecoreレンダリングとJSSコンポーネントと定義するのは冗長に思えるかもしれません。しかし、このアプローチによりSitecoreレイアウトデータはフロントエンド実装に依存しない状態を保つことができます。同時に、開発者はJSON形式のレイアウトデータを使って、JSONデータを消費可能なあらゆる技術でフロントエンドアプリケーションを実装できます。したがって、単一のSitecoreインスタンスで異なる技術で開発された複数のアプリケーションをホストし、異なる技術を使っていても作成体験はアプリケーション間で一貫性を保つことができます。