---
title: "コンテンツレンダリングのトラブルシューティング"
slug: "troubleshoot-content-rendering"
abstract: "フロントエンドアプリケーションでSitecoreコンテンツをレンダリングする際のよくあるエラーと解決策。"
---
# コンテンツレンダリングのトラブルシューティング

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

このトピックでは、フロントエンドアプリでSitecoreコンテンツをレンダリングする際の最も一般的なエラーと解決策について説明します。

## ページにオレンジ色のエラーボックスが表示されます

オレンジ色のエラーボックスでコンポーネント名が表示された場合、そのコンポーネントはコンポーネントマップに登録されていません。フォールバックコンポーネントはこの目に見えるエラーボックスを表示し、どの実装が欠けているかすぐに確認できます。実装を提供するまでは、そのコンポーネントのネストされたプレースホルダー子はレンダリングされません。

問題を解決するには、コンポーネント用のレンダー関数を追加し、コンポーネントマップにレジスタ付けしてください。

入れ子状のプレースホルダー(PartialDesignDynamicPlaceholderまたはContainerFullBleed)を公開することだけを目的とした構造ラッパーコンポーネントの場合もエラーボックスが表示されますが、意味のあるフィールドをレンダリングすることはできません。これらの場合、ラッパーを表示せずにネストされた子のみをレンダリングするパススルーコンポーネントを作成してください。

::::タブズ:::tab{title="Astro"}

\---
// src/components/Passthrough.astro
import Placeholder from './Placeholder.astro';

const { placeholders } = Astro.props;
---

{Object.entries(placeholders ?? {}).map((key, items) => (
 <Placeholder name={key} rendering={items} />
))}

::::::tab{title="Go"}

func renderPassthrough(\_, \_ mapstringany, placeholders mapstringany) template.HTML {
 var sb strings.Builder
 for key, items := range placeholders {
 sb.WriteString(string(renderPlaceholder(key, items)))
 }
 return template.HTML(sb.String())
}

:::::::すべての構造ラッパーに対してコンポーネントマップにパススルーコンポーネントを登録する:

::::タブズ:::tab{title="Astro"}

// src/components/componentMap.js
import Passthrough from './Passthrough.astro';

export const componentMap = {
 // ...existing entries...
 'PartialDesignDynamicPlaceholder': Passthrough,
 'ContainerFullBleed': Passthrough,
};

::::::tab{title="Go"}

// components.go

"PartialDesignDynamicPlaceholder": renderPassthrough,
"ContainerFullBleed": renderPassthrough,

:::::::コンテンツコンポーネントについては、フィールドをレンダリングする実際のコンポーネントを作成し、それをコンポーネントマップに追加してください:

::::タブズ:::tab{title="Astro"}

// src/components/componentMap.js
import Hero from './Hero.astro';

export const componentMap = {
 // ...existing entries...
 'Hero': Hero,
};

::::::tab{title="Go"}

// components.go

"Hero": renderHero,

:::::::