JSSアプリのスキャフォールディング コンポーネント
このページの翻訳は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アプリケーションのルートディレクトリで、次のスクリプトを実行します。
フレームワークに応じて、スクリプトは次のファイルを生成します。
-
Vue.jsの1つのファイル コンポーネント: 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: src/components/ComponentName.tsx用のTypeScriptファイルとマニフェスト定義ファイルsitecore/definitions/components/ComponentName.sitecore.ts.
パスによるコンポーネントの作成
src/componentsフォルダのサブディレクトリにコンポーネントをグループ化する場合は、コンポーネントのディレクトリパスと名前を提供するスキャフォールディングスクリプトを使用してコンポーネントを作成できます。
特定のパスにコンポーネントを作成するには:
-
ターミナルのJSSアプリケーションのルートディレクトリで、次のスクリプトを実行します。
フレームワークに応じて、スクリプトは次のファイルを生成します。
-
Vue.jsの1つのファイル コンポーネント: 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: src/components/some/new/path/ComponentName.tsx用のTypeScriptファイルとマニフェスト定義ファイルsitecore/definitions/components/some/new/path/ComponentName.sitecore.ts.