Sitecore のデータを利用した JSS アプリのページ構成
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
JSS アプリケーションは、Sitecore サイトで作成されたページをレンダリングします。Sitecore のすべてのページは、レイアウトを使用します。Sitecore のレイアウト エンジンは、複数のコンポーネントをホストできる名前付きプレースホルダーを定義することで機能します。JSS は、Sitecore のダイナミック プレースホルダー機能を活用し、Sitecore の編集者主導のコンポーネント ベースのレイアウト モデルをフロントエンド アプリケーションに拡張します。
Sitecore では、レイアウトはページのプレースホルダーとレンダリングの階層を表します。Sitecore のページを編集可能にするには、少なくとも 1 つのルート (ページレベル) プレースホルダーを定義する必要があります。コンテンツ編集者は、WYSIWYG Sitecore エディターを通じてレイアウト データを定義し、そのレイアウト データを XML としてデータベースに保存します。
JSS アプリケーションでは、レイアウトはすべてのページで使用される最上位コンポーネントです。Sitecore レイアウトと同様に、JSS アプリの Layout コンポーネントは、ページのコンポーネント階層をレンダリングする 、(いわゆるルート プレースホルダーと呼ばれる)少なくとも 1 つのプレースホルダー コンポーネントを定義します。
各ルート/ページは従来の JavaScript アプリケーションで既知のコンポーネントをホストしますが、コンポーネント階層は Sitecore レイアウト データによって動的に定義されるため、JSS アプリケーションには認識されません。
レイアウトを動的に駆動することにより、JSS アプリはコンテンツ編集者によって定義されたレイアウトをサポートし、データ駆動型のパーソナライゼーションと多変量テストをサポートできますが、そのためには、Sitecore でコンテンツ編集者が特定のページに対して構成したレイアウトが JSS アプリケーションで一致する構造を持つことが必要です。Sitecore ページで使用されるものと同じプレースホルダーを Layout コンポーネントに指定することに加えて、JSS アプリケーションは、ページで使用される Sitecore レンダリングに一致するコンポーネントも定義する必要があります。
Sitecore からレイアウト データをレンダリングするために、JSS アプリは Sitecore データベースのレイアウト データを直接使用することはありません。JSS アプリがページ/ルートにアクセスすると、カスタムルート処理とデータ フェッチ機能により、Sitecore エンドポイントから JSON 形式のデータがフェッチされます。フェッチしたレイアウト データに基づいて、コンテンツ編集者が Sitecore エディターでレンダリングを組み立てる方法に基づき、ページのコンポーネント階層をレンダリングできます。
コンポーネントを Sitecore レンダリングと JSS コンポーネントとして定義することは、冗長に思えるかもしれません。しかし、このアプローチにより、Sitecore のレイアウト データを、フロントエンドの実装に依存しない状態に保つことができます。同時に、開発者は JSON 形式のレイアウト データを使用して、JSON データを消費できる任意のテクノロジでフロントエンド アプリケーションを実装できます。したがって、単一の Sitecore インスタンスは、さまざまなテクノロジを使用して開発された複数のアプリケーションをホストでき、異なるテクノロジを使用しているにもかかわらず、オーサリング エクスペリエンスはアプリケーション全体で一貫しています。