---
title: "コンテンツレンダリング"
slug: "content-rendering"
abstract: "GraphQL APIを用いてフロントエンドアプリでSitecoreAIのコンテンツを表示する概要。"
---
# コンテンツレンダリング

> !注**このドキュメントの改善にご協力ください**フレームワークに依存しないドキュメントは現在開発中です。コンテンツ改善の提案があれば、このページの下部で **フィードバック** を共有してください。

Sitecoreの開発における重要なタスクの一つは、[SitecoreAIページビルダー](https://doc.sitecore.com/sai/en/users/sitecoreai/build-pages.html) で作成されたコンテンツを取得し、フロントエンドアプリケーションでレンダリングすることです。具体的な実装の詳細はフレームワークによって異なりますが、SitecoreAIのコンテンツレンダリングは同じ主要な手順に従います。

1.  *SitecoreAIからレイアウトとコンテンツを取得* - Sitecoreでは、レイアウトがページ上のどのコンポーネントをどこに表示するかを定義します。コンテンツ作成者がページビルダーでページを作成する際、レイアウト内でコンポーネントを配置しています。このステップでは、GraphQLクエリを使ってSitecoreAIページのJSON形式のレイアウトとコンテンツを取得します。JSONデータでは、コンポーネントがページ構造を表し、コンテンツはコンポーネントフィールド内に保存されます。
2.  *コンポーネント名をコードにマッピング* する - 取得したJSONのコンポーネント名(例えば "RichText")を、自分のアプリ内のコード( *RichText* コンポーネント実装など)にマッピングします。各コンポーネント実装は自分のフィールドを読み取り、フィールドタイプに従ってレンダリングします。これにより、アプリがユーザーインターフェースで正しいコンポーネントをレンダリングできるようになります。
3.  *コンポーネントを再帰的にレンダリングする* - アプリが他のコンポーネントの中にネストされたコンポーネントを表示できることを確認してください。

## 始めましょう

コンテンツレンダリングを始めるには:

-   [プレビュー GraphQL APIとデリバリー GraphQL APIについて学び、アクセスを得ましょう。これらはレイアウトやコンテンツを取得するために使うAPIです。](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/content-rendering/the-preview-and-delivery-graphql-apis.html "The Preview and Delivery GraphQL APIs")
-   [GraphQLスキーマ](https://doc.sitecore.com/sai/ja/developers/sitecoreai/experience-edge/experience-edge-apis/the-experience-edge-schema.html "The Experience Edge schema")、GraphQLのエントリポイント、そしてそれらがさまざまなSitecoreの概念とどのように関連しているかを確認しましょう。
-   [レイアウトの質問と回答の構造を見直しましょう。](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/content-rendering/layout-query-and-response.html "Layout query and response")
-   [フィールドタイプをレビュー](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/content-rendering/field-types-in-rendering-data.html "Field types in rendering data")し、これはコンポーネント実装を構築する際に不可欠です。
-   アプリのウォークスルー [でRender SitecoreAIのコンテンツを](https://doc.sitecore.com/sai/ja/developers/sitecoreai/introduction-to-framework-agnostic-sitecore-development/content-rendering/render-sitecoreai-content-in-your-app.html "Render SitecoreAI content in your app") 完成させてください。そこでは、レイアウトデータをプログラム的にSitecoreに問い合わせ、レスポンス内の再帰JSONを解析し、ページのコンポーネントをレンダリングします。