1. Sitecore JavaScriptレンダリングSDK (JSS) for Next.js

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

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

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

JSS Next.jsアプリでプレースホルダーを使用するには、いくつかの方法があります。

先端

JSSアプリのプレースホルダーに関するガイドを読んで、プレースホルダーとは何か、どのように機能するかを理解することをお勧めします。

基本的なプレースホルダー手法の使用

コンポーネントにプレースホルダーを追加する最も一般的な方法は、Placeholderコンポーネントを使用することです。

import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';

const App = ({ rendering }) => (
  <div>
    <h1>My App</h1>
    <Placeholder name="jss-main" rendering={rendering} />
  </div>
);

Placeholderコンポーネントの場合:

  • nameは、公開するプレースホルダのキーです。

  • renderingは以下を表すことができます。

    • 現在Sitecoreが提供するレイアウト/ルート データ。

    • 別のコンポーネント内からプレースホルダーを公開する場合は、親コンポーネント データ。

高次コンポーネント手法の使用

高次コンポーネント (HOC) パターンを使用すると、プレースホルダー内のコンポーネントの配列を取得し、プレースホルダーを公開するコンポーネントにプロパティとして挿入できます。

import { withPlaceholder } from '@sitecore-jss/sitecore-jss-nextjs';

const Tabs = ({ tabs }) => {
  return (
    <div>
      {tabs}
    </div>
  );
};

export default withPlaceholder('tabs')(Tabs);

component配列を出力すると、アプリケーションはコンポーネントを出力した場所にレンダリングします。

HOC手法を使用してプレースホルダを出力すると、プレースホルダにはラッピング コンポーネントがなく、インラインでレンダリングされます。HOCアプローチは、based on a specific component hierarchyライブラリを使用している場合に便利です。基本的なプレースホルダ手法を使用すると、すべての子コンポーネントがコンポーネントツリーでその下にレンダリングされます。

たとえば、次の構造でreact-fullpageライブラリを使用する場合です。

<SectionsContainer>
  <Section color="#69D2E7">Page 1</Section>
  <Section color="#A7DBD8">Page 2</Section>
  <Section color="#E0E4CC">Page 3</Section>
</SectionsContainer>

ライブラリは、次のコンポーネント階層を想定しています。

SectionsContainer
    Section

ただし、基本的なプレースホルダ手法を使用してSectionコンポーネントを追加する場合は、次のようになります。

<SectionsContainer>
  <Placeholder name="jss-sections" rendering={rendering} />
</SectionsContainer>

結果のコンポーネント階層は次のようになります。

SectionsContainer
    Placeholder    
        YourComponent 
            Section

HOCベースのプレースホルダーを使用すると、インライン コンポーネントまたはコンポーネント変換を使用して、よりフラットなコンポーネント階層を実現できます。

インラインコンポーネント

ライブラリがコンポーネントのラッピングの単一レイヤーを防止しない場合は、次のようなコンポーネント階層を取得します。

SectionsContainer
    YourComponent 
        Section

子コンポーネントをレンダリングコンポーネントに配置できます。例えば：

import { withPlaceholder } from '@sitecore-jss/sitecore-jss-nextjs';

const ContainerComponent = ({ sectionsPlaceholder }) => {
  return <SectionsContainer>{sectionsPlaceholder}</SectionsContainer>;
};

// you can also alias the property for the placeholder when using the HOC - or pass an array of placeholders
export const ContainerSitecoreComponent = withPlaceholder({ placeholder: 'sections', prop: 'sectionsPlaceholder' })(ContainerComponent);

// the <Section> is in the child Sitecore component added to the placeholder
export const ChildSitecoreComponent = (props) => (
  <Section>
    <h1>Your components here</h1>
  </Section>
);

コンポーネントの変換

次のように、完全にフラットなコンポーネント階層を実現するには、次のようにします。

SectionsContainer
    Section

挿入されたプロパティが配列であることを利用し、map関数を使用してラッパーで子コンポーネントを変換できます。

子Sitecoreコンポーネントは、ラッピングにまったく気付かず、コンテンツのみをレンダリングして、この手法を使用するときに懸念事項を明確に分離できます。

例えば：

const ContainerComponent = ({ sectionsPlaceholder }) => {
  return (
    <SectionsContainer>
      {sectionsPlaceholder.map((component, index) => {
        // this if is important, as it prevents breakage when using Sitecore Experience Editor
        if (component.props && component.props.type === 'text/sitecore') return component;

        // wraps _all_ child components in a <Section> component
        return <Section key={index}>{component}</Section>;
      })}
    </SectionsContainer>
  );
};

export const ContainerSitecoreComponent = withPlaceholder({ placeholder: 'sections', prop: 'sectionsPlaceholder' })(ContainerComponent);

レンダリングpropsテクニックの使用

JSSは、高次コンポーネントの代替としてrender propsパターンをサポートしています。<Placeholder>コンポーネントのrenderプロパティを使用すると、上位コンポーネントと同じ方法でプレースホルダーコンテンツのレンダリングを引き継ぎ、動的プロパティを使用できます。

次の例は、コンポーネント配列を取得し、renderプロパティを使用してレンダリングする方法を示しています。

import { Placeholder } from '@sitecore-jss/sitecore-jss-nextjs';

const App = ({ rendering }) => (
  <div>
    <h1>My App</h1>
    <Placeholder name="jss-main" rendering={rendering} render={(components, placeholderData, props) => <div>{components}</div>} />
  </div>
);

プレースホルダーのrender関数には、次の2つの省略可能な引数を使用できます。

  • propsパラメータは、<Placeholder>に渡されるプロパティのミラーです。

  • placeholderDataパラメータは、現在のプレースホルダーのレイアウト データを提供します。

直接プレースホルダーイントロスペクション手法

コンポーネントの代わりにプレースホルダーのデータにアクセスできます。たとえば、タブなどのコンポーネントを2つの場所 (タブのタイトルとタブの内容) にレンダリングするコンポーネントの場合などです。プレースホルダ階層は大きなJavaScriptオブジェクトであるため、props.renderingを使用してトラバースし、子コンポーネントのデータと項目を検出できます。

const Tabs = ({ rendering, tabs }) => (
<Tab.Container>
  <div class="tabsHeading">
    {(rendering.placeholders.tabs || [])
      .filter((tab) => tab && tab.fields && tab.fields.title)
      .map((tab, index) => (
        <Tab.Heading key={index}>
          <Text field={tab.fields.title} />
        </Tab.Heading>
      ))}
  </div>

  <div class="tabContents">
    {tabs}
  </div>
</Tab.Container>
);

export default withPlaceholder('tabs')(Tabs);

プレースホルダーによるエクスペリエンスの向上

プレースホルダーは、カスタムコンポーネントを使用して開発者/エディターのエクスペリエンスを向上させるためのオプションを提供します。基本的なプレースホルダ手法を使用する場合は、Placeholderコンポーネントプロパティを使用して、エラーや欠落しているJavaScript実装に対してプレースホルダがレンダリングするカスタムコンポーネントを構成できます。HOCパターンを使用する場合は、propsTransformerオプションを使用して、関数を使用して同じプロパティを挿入できます。

エラーコンポーネント

プレースホルダーでレンダリングエラーが発生した場合、プレースホルダーはプレースホルダーの内容の代わりにエラーコンポーネントを表示し、エラーの詳細をコンソールに記録します。このコンポーネントをカスタマイズするには、errorComponentプロパティを使用してカスタムコンポーネントを置き換えます。

欠落しているコンポーネントコンポーネント

プレースホルダーにcomponentFactory不明なレンダリング名が含まれている場合 (たとえば、バックエンド開発者がFooレンダリングを作成してページに追加するが、まだFoo.jsがない場合)、レンダリングはコンポーネントのmissingComponentComponentプロパティで定義されたMissingComponentコンポーネントに置き換えられます。デフォルトの実装は単純なメッセージですが、missingComponentComponentプロパティのカスタムコンポーネントを使用してカスタマイズできます。

非表示のレンダリングの処理

パーソナライゼーションルールでレンダリングが非表示になっている場合、レンダリングにJSS実装がない場合のエラーメッセージを防ぐために、レンダリングはHiddenRenderingコンポーネントに置き換えられます。コンポーネントを作成し、hiddenRenderingComponentプロパティを使用してプレースホルダに提供できます。

この記事を改善するための提案がある場合は、 お知らせください!