---
title: "JSSで切断された作業"
slug: "working-disconnected-in-jss"
abstract: "JSSコードファーストにおけるルートデータの定義とデータのカスタマイズ、分離開発"
---
# JSSで切断された作業

[切断](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-disconnected-mode.html "Start a JSS app in disconnected mode")された状態での作業を支援し、後でデータをSitecoreにデプロイするには、[Manifest API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-manifest-api.html "JSS Manifest API")でマニフェストを生成することで、Sitecoreなしでアプリデータを定義する必要があります。

マニフェストはJSONファイルで、あなたのデータを形式で表現し、[App Import API](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/jss-app-import-api.html "JSS App Import API")を使ってSitecoreにインポートしたり、アプリを切断モードでホストしたりできます。

切断して作業する場合は [、まずコードファーストの開発ワークフロー](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/code-first-development-workflow.html "Code-first development workflow")を使います。

> !ヒントあなたのアプリは[Sitecoreファーストの開発アプローチ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/sitecore-first-development-workflow.html "Sitecore-first development workflow")を活用できるため、アプリマニフェストを生成する必要はありません。Sitecoreファーストの開発には、アプリを実行するためにSitecoreインスタンスが必要です。
> 
> JSSアプリの初期展開では、たとえその後パターンを使わなくても、Sitecoreにコードファーストを使うことをおすすめします。これにより、JSSアプリケーションのアイテム設定に時間を短縮できます。

## ルートデータの定義

ルートデータは、*切断モードで*動作するときにアプリが提供するルートを表すために使われます。 Placeholderコンポーネントおよびレンダリングされるコンポーネントは、ルートデータが [特定のスキーマ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/adding-manifest-definitions-in-code-first-jss-apps.html "Adding Manifest definitions in code-first JSS apps")に従うことを期待します。

切断された開発の場合、ルートデータは通常、静的なYAMLやJSONファイル、または単純なJavaScriptファイルから取得されます。接続された開発や本番環境では、ルートデータは[Sitecoreレイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service") への呼び出し(HTTPリクエストまたは統合モードSSRの場合はプロセス中)で取得されます。

サンプルアプリは[YAML](https://en.wikipedia.org/wiki/YAML)ファイルを使って/data/routesルートデータを定義します。もしその形式を好みJSONファイルを使うことも可能です(ファイルを.jsonにリネームし、[YAMLからJSONへの変換](https://jsonformatter.org/yaml-to-json)器で処理するだけです)。YAMLはコメント、多行値、その他のコンテンツ作成体験を向上させる機能をサポートしています。

作業中にコード[ファーストのJSSサンプルアプリで](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/add-additional-root-placeholders-in-a-code-first-jss-sample-app.html "Add additional root placeholders in a code-first JSS sample app")フィールド[付きのルートタイプを作成](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/create-a-route-type-with-fields-in-jss-code-first-development.html "Create a route type with fields in JSS code-first development")したり、追加のルートプレースホルダーを追加したりできます。

## 切断モードでのデータカスタマイズ

切断モードが起動すると、Sitecore上で接続モードで動作可能なJSSサービスのモックバージョンが作成されます。

これらのモックサービスは [、サーバー側のレイアウトサービスのカスタマイズ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/extending-the-layout-service.html "Extending the Layout Service") を考慮してカスタマイズする必要があるかもしれません。これにより、切断モードも同じカスタマイズを受けられます。

### 切断モードプロキシ

切断モードはローカルHTTPサーバーを起動し、モックAPIを実行します。これはscripts/disconnected-mode-proxyのサンプルアプリで定義されており、切断モードのデータを変更したいときにカスタマイズされます。

デフォルトの切断モードプロキシには、データをカスタマイズする多くのオプションが備わっています。 sitecore-jss-dev-toolsパッケージは、オプションの全配列とその署名を文書化するDisconnectedLayoutServiceOptions TypeScriptのタイピングをエクスポートします。VS CodeのようなTypeScript対応エディタは、ファイルがTypeScriptでなくてもこのメタデータを読み取ることを可能にします。

const proxyOptions = {
 appRoot: \_\_dirname,
 appName: config.appName,
 watchPaths: '../data',
 language: config.language,
 port: 3042,
 compilers: '@babel/register',
 ...
};

### コンテキストのカスタマイズ

Sitecore側で [レイアウトサービスのコンテキストをカスタマイズ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/extending-context-data-returned-by-the-layout-service.html "Extending context data returned by the Layout Service") する際、切断時に同様のカスタマイズを適用したいかもしれません。 customizeContextフックを使えば、それが可能です:

const proxyOptions = {
 appRoot: \_\_dirname,
 customizeContext: (context, route, currentManifest, request, response) => {
 return { myCustomContextProperty: 'helloworld', ...context };
 },
 ...
};

### コンポーネントデータのカスタマイズ

[SitecoreでRendering Contents ResolverやIntegrated GraphQLを使ってコンポーネントデータをカスタマイズする](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/customizing-the-layout-service-rendering-output.html "Customizing the Layout Service rendering output")際は、切断時に同様のカスタマイズを適用したいかもしれません。customizeRenderingフックを使えばそれが可能です:

const proxyOptions = {
 appRoot: \_\_dirname,
 customizeRendering: (rendering, rawManifestRendering) => {
 // mock integrated GraphQL results for a specific component name
 if (rendering.componentName === 'ContentBlock' && rendering.fields) {
 rendering.fields = {
 data: {
 item: {
 id: 'mock-graphql-result-id',
 heading: {
 jss: rendering.fields.heading,
 }
 }
 }
 };

 return rendering;
 }

 // customize data based on a flag value added to the component definition on the route
 // i.e. in YAML,
 // - componentName: Whatever
 // addCoolStuff: true
 if (rawManifestRendering.dataSource.addCoolStuff) {
 return {
 coolStuff: 
 'React',
 'Vue',
 ,
 ...transformed,
 };
 }

 // returning falsy will cause JSS to use the default value
 return undefined; // is a function
 },
 ...
};

### 高度なカスタマイズ

サンプルアプリで切断されたサーバーはデフォルトでcreateDefaultDisconnectedServer() ヘルパー関数を使用します。この機能は基本的なカスタマイズAPIを提供し、切断されたサーバーを動作させる複数のミドルウェアの登録をカプセル化します。また、デフォルトDisconnectedServerOptionsでサポートされていない高度なカスタマイズを行いたい場合、関数をアンパックして自分でミドルウェアを登録することもできます。