--- title: "JSSアプリにおけるスキャフォールディングコンポーネント" slug: "scaffolding-components-in-jss-apps" abstract: "スキャフォールディングスクリプトを使ってJSSサンプルアプリで新しいコンポーネントを作成します" --- # JSSアプリにおけるスキャフォールディングコンポーネント 新しいコンポーネントの作成は、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パッケージ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-angular-schematics.html "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。