---
title: "JSS Vue.jsサンプルアプリのアプリケーションビルディングシステム"
slug: "the-application-building-system-in-the-jss-vue-js-sample-app"
abstract: "JSSでVue.jsアプリケーションを構築する際に使えるツール"
---
# JSS Vue.jsサンプルアプリのアプリケーションビルディングシステム

JSS Vue.jsアプリには、作業を簡素化するためのビルドシステムヘルパーが含まれています。

## 足場

jss scaffold <componentName>コマンドを使って[新しいJSS Vueコンポーネントをスキャフォールドできます](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/scaffolding-components-in-jss-apps.html "Scaffolding components in JSS apps")。スキャフォールドはscripts/scaffold-component.jsによって定義され、ニーズに合わせて完全にカスタマイズ可能です。スキャフォールディングはVueコンポーネントと切り離されたコンポーネント定義ファイルを作成し、コンポーネントを動作させるための有用なフィードバックを提供します。

> !注Vueのコンポーネントはシングルファイルコンポーネントでスキャフォールディングされます。シングルファイルコンポーネントを使いたくない場合は、スキャフォールディングスクリプトを必要に応じてカスタマイズできます。

## 動的構成生成

JSSアプリは、現在のLayout Serviceエンドポイント設定など、JSS構成の一部を読み取れる必要があります。これを実現するために、ビルドを実行する前に、scripts/generate-config.jsで定義されたスクリプトがsrc/temp/config.jsファイルを動的にアセンブルします。アプリケーションは、設定へのアクセスが必要なときにこのファイルをインポートできます。このスクリプトは、設定要件が異なる場合、完全にカスタマイズ可能または削除可能です。

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

ビルドが始まると、JSS Vueアプリは自動的にsrc/temp/componentFactory.jsファイル内の[コンポーネントファクトリー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-component-factory.html "The Component Factory")を生成します。コンポーネントファクトリーはJSSコンポーネント名とそのVueコンポーネント実装間のマッピングです。src/temp/componentFactory.jsファイルはJSSコンポーネントを定義するための規約で生成されます。これにより、新しいコンポーネントを手動で登録するのを避けられます。アプリがローカルで動作すると、コンポーネントファクトリーは新しいコンポーネントを監視し、モジュールを更新します。この自動生成はscripts/generate-component-factory.jsで定義されており、完全にカスタマイズ可能です。

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