1. JSSアプリケーションのコンポーネント

コンポーネントファクトリー

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

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

JSSアプリがページをレンダリングするとき、Sitecoreから取得したレイアウト データJSONを走査して、ページにレンダリングするコンポーネントを判断します。ただし、Sitecoreレンダリング名をJSSコンポーネントと一致させる方法がないと、ページはレンダリングできません。

コンポーネント ファクトリは、SitecoreレンダリングとそのJSSコンポーネント実装との間のマッピングであり、JSSアプリはレンダリングをコンポーネントに一致させるために使用します。すべてのJSSサンプル・アプリケーションには、レンダリング名をパラメーターとして受け取り、関連するJSSコンポーネントを返すJavaScript関数であるComponent Factory実装があります。

次に、コンポーネントファクトリの簡略化した例を示します。

import * as ContentBlock from 'src/components/ContentBlock';
import * as AnotherComponent from 'src/components/AnotherComponent';

const components = new Map();
components.set('ContentBlock', ContentBlock);
components.set('AnotherComponent', AnotherComponent);

export function componentModule(componentName: string) {
  return components.get(componentName);
};

export function componentFactory(componentName: string) {
  return components.get(componentName)?.default;
};

コンポーネントファクトリの生成

ほとんどのJSSサンプル・アプリケーションでは、コンポーネント・ファクトリーは、アプリケーションのコンポーネント・ディレクトリーを再帰的に検査することにより、ビルド時にプログラムによって生成されます。コンポーネントファクトリでマッピングを生成するためのロジックは、scripts/generate-component-factory.ts|jsファイルで定義されています。このファイルは、さまざまなプロジェクト構造をサポートするようにカスタマイズでき、フラットまたはネストされたディレクトリ構造で機能します。

コンポーネントファクトリのプログラムによる生成は必要ありませんが、新しいコンポーネントを手動で登録する必要がなくなるため、開発が容易になります。

メモ

JSS React Nativeアプリケーションの場合、サンプルのComponent Factoryはsrc/componentFactory.jsで定義されています。マッピングは手動で更新する必要があります。

ローカル開発サーバー上でアプリケーションを実行する場合、アプリケーションはcomponentsディレクトリへの変更を監視し、新しいコンポーネントでComponent Factoryを自動的に更新します。

JSS Angularアプリケーションの場合、アプリケーションを初めて実行したときに、コンポーネントファクトリはパスsrc/app/components/app-components.module.tsに生成されます。

JSS Next.jsアプリケーションの場合、アプリケーションを初めて実行するときに、コンポーネントファクトリはパスsrc/temp/componentFactory.tsに生成されます。

JSS ReactアプリケーションおよびVue.jsアプリケーションの場合、アプリケーションを初めて実行するときに、コンポーネントファクトリはパスsrc/temp/componentFactory.jsに生成されます。

コンポーネントファクトリと粒状コンポーネント

最新の開発手法では、粒状のコンポーネントを使用することが推奨されており、すべてのコンポーネントが単一の明確な責任を持っています。

Sitecoreレンダリングはオーサリングの概念であり、JSSコンポーネントは開発者の概念です。ほとんどの場合、SitecoreレンダリングとJSSコンポーネントは同じものを表しますが、対応するSitecoreレンダリングと同じデータを表すために、より小さく、より包含されたコンポーネントを好む場合があります。

たとえば、検索結果を表示するためのレンダリングについて考えてみます。コンテンツ作成者にとって、検索結果領域全体が1つのユーザー インターフェイス要素です。ただし、フロントエンド開発者にとって、検索結果の表示領域はコンポーネントの構成です。たとえば、検索結果コンテナのコンポーネント、すべての結果リスト項目のコンポーネント、場合によっては結果のさまざまなセクションのコンポーネントがあります。コンテンツ作成者は検索結果の複数のバリエーションを管理する必要がないため、レンダリングを小さな要素に分割しても意味がありません。そのようなアプローチは彼らの仕事を複雑にするでしょう。しかし、JSSで詳細なコンポーネントを作成するときにそうしないと、Sitecoreレンダリングに一致しないコンポーネントが作成されます。

結論として、Component Factoryにマッピングされたコンポーネントは、コンテンツ作成者に表示されるSitecoreレンダリングと一致する必要があります。レンダリング用の検索結果コンポーネントを構築するために詳細なコンポーネントを作成する場合は、それらのコンポーネントをコンポーネントファクトリに含めたり、プレースホルダを使用して問題を回避したりしないことをお勧めします。

代わりに、粒状コンポーネントを他のすべてのコンポーネントとは異なるディレクトリに配置することをお勧めします。JSSアプリケーションでprincipal componentsディレクトリがsrc/componentsであると仮定すると、開発専用コンポーネントをsrc/helpersやsrc/containersなどのディレクトリに配置できます。

Component Factoryはメイン ディレクトリのコンポーネント (この場合はsrc/components) のみを検査するため、src/helpersとsrc/containersに含めたコンポーネントを存在しないSitecoreレンダリングにマッピングしようとはしません。

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