JSSアプリにおけるプレースホルダーの導入
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
プレースホルダーとは、JSSに含まれる特別なコンポーネントです。アプリのルートコンポーネントや他のコンポーネントに追加すると、このコンポーネントは 名前付きプレースホルダーキーを生成します。名前付きプレースホルダーキーを使って、JSSで登録された他の コンポーネント を対応するプレースホルダーに動的に配置できます。
Sitecoreに接続すると、プレースホルダーはパーソナライズ、テスト、編集者がページレイアウトを変更する機能など、Sitecoreの機能を可能にします。プレースホルダーの内容は、コンテンツ作成者や編集者がページレイアウトをどのように構成しているかによって決まります。
Sitecoreから切り離して作業する場合、ルートデータファイルを通じてコンポーネントを特定のプレースホルダーに割り当てる方法を決定します。
概念的には、プレースホルダーは子要素を持つ
プレースホルダーは入れ子にすることができます。コンポーネントにはルートだけでなく、プレースホルダーが付けられます。よくある例としては、階層構造が挙げられます。 main (placeholder) > Tabs (component) > tabs (placeholder) > Tab (component).
JSSアプリ開発は一般的に、プレースホルダーやコンポーネント階層を設計し、各コンポーネントを実装するという構成です。各フレームワーク固有のJSSは、このアーキテクチャを若干異なるイディオム的な方法で実装しています。
次の例を考えてみましょう。
-
ファイルapp.js:
-
コンポーネント定義ファイル(例えば HelloWorld.js
hello world! -
ルートデータファイルで指定されたレイアウト定義では、data/routes/en.yml:
placeholders: jss-content:
- componentName: HelloWorld
- componentName: HelloWorld
このようなコードは以下の出力を得ます:
プレースホルダーの命名に関する考慮事項
意味のあるプレースホルダー名を選ぶことで、JSSアプリの保守性が向上します。
プレースホルダーの名前を割り当てる際には慎重に考慮し、以下のベストプラクティスに従ってください。
- プレフィックス名にはアプリ固有のプレフィックスが付けられます。例えば、 contentの代わりに myapp-contentを使用します。これは、Sitecoreインスタンスが複数のJSSアプリやウェブサイトをホストできるため、プレースホルダー名の矛盾を避けるのが最善であるため重要です。
- プレースホルダーの一般的な目的を表す名前を選び、専門用語は避けてください。
- /sitecore/definitions/placeholders.sitecore.jsの各プレースホルダーに使いやすい表示名を割り当ててください。ルート上でプレースホルダーを使うだけで登録できます。しかし、表示名を追加することで、著者にとってアプリに良い印象を与えます。表示名は一意である必要はありません。
ページテンプレートごとのルートプレースホルダーの違い
ページタイプによって異なるルートのプレースホルダーをレンダリングする必要がある場合もあります。
成分は条件付きで異なる要素を返すことができるため、props.layoutData.sitecore.route.templateNameまたはprops.layoutData.sitecore.route.templateIdの値に基づいて異なる成分を返すことで簡単に達成できます。
JSSアプリにおけるプレースホルダーの扱いについて
JSSでサポートされているJavaScriptフレームワークのサンプルアプリケーションはすべて、プレースホルダーを扱うための必要なインフラを備えています。
使用するフレームワークによっては、以下のトピックのいずれかを参照してください。