JSS アプリのスキャフォールディング コンポーネント

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

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

新しいコンポーネントの作成は、JSS アプリケーションの開発中に実行される最も一般的なタスクの 1 つです。

新しいコンポーネントの作成を容易にするために、JSS Next.js、React、および Vue.js サンプル アプリケーションには、scripts/scaffold-component.[ts|js] ファイルで定義されたスキャフォールディング スクリプトが用意されています。このスクリプトを呼び出すには、JSS CLIコマンド jss scaffold を使用します。このスクリプトは、src/components フォルダーに相対する場所にコンポーネント ファイルを作成し、sitecore/definitions/components フォルダーにマニフェスト定義ファイルを作成します。スキャフォールディング スクリプトによって生成されたプロジェクト構造が気に入らない場合は、カスタマイズできます。

ヒント

Sitecore ファーストのワークフローを使用している場合、sitecore/definitions フォルダーにファイルを作成する機能は必要ないため、削除してください。

Angular コンポーネントをスキャフォールディングする場合、JSS はアプリの作成時に JSS Angular Schematics パッケージをインストールします。

相対パスまたはコンポーネント名を使用して、スキャフォールディング ユーティリティでコンポーネントを作成できます。

名前でコンポーネントを作成する

コンポーネントの名前のみを指定するスキャフォールディング スクリプトを使用して、コンポーネントを作成できます。

コンポーネントを作成するには:

  • ターミナルで、JSS アプリケーションのルート ディレクトリにある次のスクリプトを実行します。

    RequestResponse
    jss scaffold ComponentName

フレームワークに応じて、スクリプトは次のファイルを生成します。

  • Vue.js 用の単一ファイルコンポーネント: src/components/ComponentName.vue とマニフェスト定義ファイル sitecore/definitions/components/ComponentName.sitecore.js。

  • React 用の JavaScript ファイル: src/components/ComponentName/index.js とマニフェスト定義ファイル sitecore/definitions/components/ComponentName.sitecore.js。

  • Next.js 用の TypeScript ファイル: src/components/ComponentName.tsx とマニフェスト定義ファイル sitecore/definitions/components/ComponentName.sitecore.ts。

パスでコンポーネントを作成する

src/components フォルダーのサブディレクトリにコンポーネントをグループ化する場合は、コンポーネントのディレクトリ パスと名前を指定するスキャフォールディング スクリプトを使用してコンポーネントを作成できます。

特定のパスにコンポーネントを作成するには:

  • ターミナルで、JSS アプリケーションのルート ディレクトリにある次のスクリプトを実行します。

    RequestResponse
    jss scaffold some/new/path/ComponentName

フレームワークに応じて、スクリプトは次のファイルを生成します。

  • Vue.js 用の単一ファイルコンポーネント: src/components/some/new/path/ComponentName.vue とマニフェスト定義ファイル sitecore/definitions/components/some/new/path/ComponentName.sitecore.js。

  • React 用の JavaScript ファイル: src/components/some/new/path/ComponentName/index.js とマニフェスト定義ファイル sitecore/definitions/components/some/new/path/ComponentName.sitecore.js。

  • Next.js 用の TypeScript ファイル: src/components/some/new/path/ComponentName.tsx とマニフェスト定義ファイル sitecore/definitions/components/some/new/path/ComponentName.sitecore.ts。

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

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