JSSアプリでのプレースホルダーの導入

Version: 22.x

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

プレースホルダは、JSSに含まれる特別なコンポーネントです。このコンポーネントをアプリのルートコンポーネントまたは別のコンポーネントに追加すると、named placeholder key.名前付きプレースホルダ・キーを使用して、JSSに登録されている他のコンポーネントを対応するプレースホルダに動的に配置できます。

Sitecoreに接続すると、プレースホルダーは、パーソナライゼーション、テスト、エディターによるページレイアウトの変更など、Sitecoreの機能を有効にします。プレースホルダーの内容は、コンテンツ作成者と編集者がページレイアウトをどのように構成したかによって決まります。

Sitecoreから切断して作業する場合は、ルートデータファイルを介して特定のプレースホルダーへのコンポーネントのバインドを決定します。

概念的には、プレースホルダーは子要素を持つ <div/> タグに似ており、各子はコンポーネントまたは静的コンポーネントツリーです。

プレースホルダーはネストできます: コンポーネントは、ルートだけでなく、プレースホルダーを持つことができます。この一般的な例は、次のような階層です。 main (placeholder) > Tabs (component) > tabs (placeholder) > Tab (component).

JSSアプリの開発は、通常、プレースホルダー/コンポーネント階層を設計し、各コンポーネントを実装することで構成されます。各フレームワーク固有のJSSは、このアーキテクチャを少し異なる慣用的な方法で実装します。

次の例を考えてみます。

ファイルapp.jsの場合:

RequestResponse

<div>
  <placeholder name="jss-content" />
</div>

コンポーネント定義ファイル ( HelloWorld.js
RequestResponse
```
<div>hello world!</div>
```
ルート・データ・ファイルで指定されたレイアウト定義では、次のdata/routes/en.ymlを行います。
RequestResponse
```
placeholders:
    jss-content:
    - componentName: HelloWorld
    - componentName: HelloWorld
```

このようなコードの結果、次の出力が得られます。

RequestResponse

<div>
    <div>hello world!</div>
    <div>hello world!</div>
</div>

プレースホルダーの名前付けに関する考慮事項

意味のあるプレースホルダー名を選択すると、JSSアプリの保守性を向上させることができます。

プレースホルダーを割り当てるときは、プレースホルダーの名前を慎重に検討し、次のベストプラクティスに従ってください。

プレースホルダー名には、アプリ固有のプレフィックスを付けます。たとえば、contentの代わりにmyapp-contentを使用します。Sitecoreインスタンスは複数のJSSアプリやWebサイトをホストでき、プレースホルダー名の競合を避けるのが最善であるため、これは重要です。
プレースホルダーの一般的な目的を説明する名前を選択し、専門用語は避けてください。
/sitecore/definitions/placeholders.sitecore.jsの各プレースホルダーにわかりやすい表示名を割り当てます。ルート上でプレースホルダーを使用するだけで、ルートを登録できます。ただし、表示名を追加すると、作成者にとってアプリは心地よい印象になります。表示名は一意である必要はありません。

ページテンプレートによるルートプレースホルダーの変動

場合によっては、ページの種類に応じて異なるルートプレースホルダーをレンダリングする必要があります。

コンポーネントは条件付きで異なる要素を返すことができるため、これはprops.layoutData.sitecore.route.templateNameまたはprops.layoutData.sitecore.route.templateIdの値に基づいて異なるコンポーネントを返すことで簡単に実現できます。

JSSアプリでのプレースホルダの操作

JSSでサポートされているJavaScriptフレームワーク用のすべてのサンプルアプリケーションには、プレースホルダを操作するために必要なインフラストラクチャがあります。

使用するフレームワークに応じて、次のいずれかのトピックを参照してください。

何かフィードバックはありますか?

この記事を改善するための提案がある場合は、