JSSアプリにおけるスキャフォールディングコンポーネント
このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。
新しいコンポーネントの作成は、JSSアプリケーション開発時に最も一般的な作業の一つです。
新しいコンポーネントの作成を容易にするために、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アプリケーションのルートディレクトリで、以下のスクリプトを実行します。
jss scaffold ComponentName
フレームワークに応じて、スクリプトは以下のファイルを生成します:
- Vue.js: src/components/ComponentName.vue のためのシングルファイルコンポーネントとマニフェスト定義ファイル sitecore/definitions/components/ComponentName.sitecore.js。
- React: src/components/ComponentName/index.js のJavaScriptファイルとマニフェスト定義ファイル sitecore/definitions/components/ComponentName.sitecore.js。
- Next.js: src/components/ComponentName.tsx 用のTypeScriptファイルとマニフェスト定義ファイル sitecore/definitions/components/ComponentName.sitecore.ts。
パスごとにコンポーネントを作成する
フォルダsrc/componentsのサブディレクトリにコンポーネントをまとめたい場合は、スキャフォールディングスクリプトでコンポーネントのパスと名前を指定して作成できます。
特定の経路でコンポーネントを作成するには:
-
ターミナル内のJSSアプリケーションのルートディレクトリで、以下のスクリプトを実行します。
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: src/components/some/new/path/ComponentName/index.js のJavaScriptファイルとマニフェスト定義ファイル 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。