--- title: "JSS Reactサンプルアプリのアプリケーションビルディングシステム" slug: "the-application-building-system-in-the-jss-react-sample-app" abstract: "JSSでReactアプリケーションを構築する際に使えるツールについて説明しています。" --- # JSS Reactサンプルアプリのアプリケーションビルディングシステム JSS Reactアプリには、アプリの操作を簡素化するためのビルドシステムヘルパーが含まれています。 ## 足場 コマンドjss scaffold を使って[新しいJSS Reactコンポーネントをスキャフォールドできます](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によって定義され、あなたのニーズに合わせて完全にカスタマイズ可能です。スキャフォールディングはReactコンポーネントと切り離されたコンポーネント定義ファイルを作成し、コンポーネントを動作させるための有用なフィードバックを提供します。 ## 動的構成生成 JSSアプリは、現在のLayout Serviceエンドポイント設定など、JSS構成の一部を読み取れる必要があります。これを実現するために、ビルドを実行する前に、scripts/generate-config.jsで定義されたスクリプトがsrc/temp/config.jsファイルを動的にアセンブルします。アプリケーションは、設定へのアクセスが必要なときにこのファイルをインポートできます。このスクリプトは、設定要件が異なる場合に完全にカスタマイズ可能または削除可能です。 ## 動的コンポーネントファクトリーモジュール ビルドが始まると、JSS Reactアプリは自動的にsrc/temp/componentBuilder.jsファイル内にコンポーネントビルダーを生成します。 ComponentBuilderクラスは標準からすぐに実装componentFactoryを提供します。コンポーネントファクトリーは、JSSコンポーネント名とそのReactコンポーネント実装とのマッピングです。 src/temp/componentBuilder.jsファイルはJSSコンポーネントを定義するための規則を使って生成されます。これにより、新しいコンポーネントを手動で登録するのを避けられます。アプリがローカルで動作すると、コンポーネントビルダーが新しいコンポーネントを監視し、モジュールを更新します。この自動生成はscripts/generate-component-builder/index.jsファイル内で定義されており、完全にカスタマイズ可能です。 この慣習をJSSアプリケーションから削除するには: - /scripts/generate-component-builder.jsファイルを削除してください。 - /scripts/bootstrap.jsファイルで削除されたスクリプトへの参照を削除してください。 - package.jsonファイルからstart:watch-componentsコマンドと使用履歴を削除してください。