---
title: "JSSアプリにおけるプレースホルダーの導入"
slug: "introducing-placeholders-in-jss-apps"
abstract: "JSSアプリ内のプレースホルダーやベストプラクティスの命名について説明します"
---
# JSSアプリにおけるプレースホルダーの導入

プレースホルダーとは、JSSに含まれる特別なコンポーネントです。アプリのルートコンポーネントや他のコンポーネントに追加すると、このコンポーネントは *名前付きプレースホルダーキー*を生成します。名前付きプレースホルダーキーを使って、JSSで登録された他の [コンポーネント](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/components-in-jss-apps.html "Components in JSS apps") を対応するプレースホルダーに動的に配置できます。

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

Sitecoreから切り離して作業する場合、ルートデータファイルを通じてコンポーネントを特定のプレースホルダーに割り当てる方法を決定します。

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

プレースホルダーは入れ子にすることができます。コンポーネントにはルートだけでなく、プレースホルダーが付けられます。よくある例としては、階層構造が挙げられます。 main (placeholder) > Tabs (component) > tabs (placeholder) > Tab (component).

JSSアプリ開発は一般的に、プレースホルダーやコンポーネント階層を設計し、各コンポーネントを実装するという構成です。各フレームワーク固有のJSSは、このアーキテクチャを若干異なるイディオム的な方法で実装しています。

次の例を考えてみましょう。

-   ファイルapp.js:
    
    <div>
     <placeholder name="jss-content" />
    </div>
    
-   コンポーネント定義ファイル(例えば HelloWorld.js
    
    <div>hello world!</div>
    
-   ルートデータファイルで指定されたレイアウト定義では、data/routes/en.yml:
    
    placeholders:
     jss-content:
     - componentName: HelloWorld
     - componentName: HelloWorld
    

このようなコードは以下の出力を得ます:

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

## プレースホルダーの命名に関する考慮事項

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

プレースホルダーの名前を割り当てる際には慎重に考慮し、以下のベストプラクティスに従ってください。

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

## ページテンプレートごとのルートプレースホルダーの違い

ページタイプによって異なるルートのプレースホルダーをレンダリングする必要がある場合もあります。

成分は条件付きで異なる要素を返すことができるため、props.layoutData.sitecore.route.templateNameまたはprops.layoutData.sitecore.route.templateIdの値に基づいて異なる成分を返すことで簡単に達成できます。

## JSSアプリにおけるプレースホルダーの扱いについて

JSSでサポートされているJavaScriptフレームワークのサンプルアプリケーションはすべて、プレースホルダーを扱うための必要なインフラを備えています。

使用するフレームワークによっては、以下のトピックのいずれかを参照してください。

-   [JSS Next.jsアプリでのプレースホルダーの扱いについて](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/working-with-placeholders-in-a-jss-next-js-app.html "Working with placeholders in a JSS Next.js app")
-   [JSS Reactサンプルアプリでプレースホルダーを扱う](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/working-with-placeholders-in-a-jss-react-sample-app.html "Working with placeholders in a JSS React sample app")方法について。
-   [JSS Angularアプリでプレースホルダーを扱う方法](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/working-with-placeholders-in-a-jss-angular-app.html "Working with placeholders in a JSS Angular app")について。
-   [JSS Vue.jsサンプルアプリでプレースホルダーを扱う](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/working-with-placeholders-in-a-jss-vue-js-sample-app.html "Working with placeholders in a JSS Vue.js sample app")方法について。
-   [JSS React Nativeアプリでプレースホルダーを扱う](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/working-with-placeholders-in-a-jss-react-native-app.html "Working with placeholders in a JSS React Native app")方法について。