---
title: "JSS Angularサンプルアプリのアプリケーションビルドシステム"
slug: "the-application-building-system-in-the-jss-angular-sample-app"
abstract: "JSSでAngularアプリケーションを構築する際に使えるツールについて説明しています。"
---
# JSS Angularサンプルアプリのアプリケーションビルドシステム

JSS Angularアプリには、アプリの操作を容易にするためのビルドシステムヘルパーが含まれています。

## 足場

[新しいAngular Schematicはjss scaffold <componentName>コマンドで足場を組](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/scaffolding-components-in-jss-apps.html "Scaffolding components in JSS apps")むことができます。

JSS Angular Schematicsは、デフォルトのコンポーネントスキャフォールディングツールに基づくJSSコンポーネント回路図ng generate提供します。スクリプトjss scaffold MyComponentを実行すると、新しいAngular回路図が作成され、切断されたコンポーネント定義ファイルが作成され、コンポーネントを動作させるための有益なフィードバックを提供します。

スキャフォールディングコンポーネントの設定は、angular.jsonファイルのAngular Schematicsのスキャフォールディング設定を追加・更新することで設定できます。

以下の例は、CSSの代わりにSCSSをスタイリングに使う新しいコンポーネントを生成する方法を示しています:

"schematics": {
     "@sitecore-jss/sitecore-jss-angular-schematics:jss-component": {
       "styleext": "scss"
     }
   }

追加設定については、[JSSのAngular Schematicスキーマ定義](https://github.com/Sitecore/jss/blob/master/packages/sitecore-jss-angular-schematics/src/jss-component/schema.json) または [スキーマタイプ](https://github.com/Sitecore/jss/blob/master/packages/sitecore-jss-angular-schematics/src/jss-component/schema.d.ts)を参照してください。

## 動的構成生成

JSSアプリは、Angular環境ファイルが提供するものよりも動的な設定システムが必要です。なぜなら、設定はscjssconfig.jsonファイルやpackage.json\`\`configセクションで定義された構成とも統合されなければならないからです。

これを実現するために、ビルドを実行する前に、scripts/generate-config.jsで定義されたスクリプトがsrc/environments/environment\*.tsファイルを動的にアセンブルします。 scripts/generate-config.jsスクリプトは設定要件が異なる場合に完全にカスタマイズ可能、または削除可能です。

## 動的コンポーネントファクトリーモジュール

ビルドが始まると、JSS Angularアプリは自動的にsrc/temp/componentFactory.jsファイル内のコンポーネントファクトリーを生成します。コンポーネントファクトリーはJSSコンポーネント名とそのAngularコンポーネント実装とのマッピングです。

src/temp/componentFactory.jsファイルはJSSコンポーネントを定義するための慣習で生成されます。これにより、新しいコンポーネントを手動で登録する手間を避けられます。アプリがローカルで動作すると、コンポーネントファクトリーが新しいコンポーネントを監視し、モジュールを更新します。この自動生成はscripts/generate-component-factory.jsで定義されており、完全にカスタマイズ可能です。

> !注この慣例をJSSアプリケーションから削除するには:
> 
> -   src/temp/.gitignoreファイルでcomponentFactory.jsを削除してください。
>     
> -   削除 /scripts/generate-component-factory.js。
>     
> -   /scripts/bootstrap.jsファイルで削除されたスクリプトへの参照を削除してください。
>