---
title: "JSS Vue.jsサンプルアプリにおけるルーティングと状態管理"
slug: "routing-and-state-management-in-the-jss-vue-js-sample-app"
abstract: "クライアント側およびサーバー側のルーティングおよび状態管理フローの概要"
---
# JSS Vue.jsサンプルアプリにおけるルーティングと状態管理

サンプルアプリは[レイアウトサービス](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/layout-service.html "Layout Service")(または切断モードのローカル [ルートデータファイル](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/types-of-jss-manifest-data.html "Types of JSS Manifest data") )に基づく動的ルーティングを使用し、ルートやナビゲーションの変更によってアプリの状態変更をトリガーします。主要な実行フローの追跡はルート設定から始めなければなりません。

> !ヒントこの実行フローにはSitecoreJssStoreプラグインが言及されています。プラグインは開発者が[Sitecoreコンテキストデータやルーティングデータにアクセスする](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/the-sitecore-context-and-route-level-data-in-the-jss-vue-js-sample-app.html "The Sitecore Context and route-level data in the JSS Vue.js sample app")のに役立ちます。

## クライアント側ルーティング

src/main.jsファイルのアプリの主要なクライアント側エントリーポイントから、以下はクライアント側ルーティングの流れを説明します。

-   ファイル src/main.jsでは、サーバー側レンダリング(SSR)および状態データが収集され、src/createApp.jsに渡されます。
-   ファイルsrc/createApp.jsでは、Vueアプリインスタンスが src/router.js で定義されたアプリルーターとともに作成・設定され、レンダリングはsrc/AppRoot.vueに引き継がれます。アプリに初期の状態/ルートデータが提供されると、アプリケーションはファイルsrc/lib/SitecoreJssStorePlugin.jsにあるカスタマイズ可能なVueプラグインを使って状態を設定し管理JSS 。
-   ファイル src/AppRoot.vueでは、 <router-view />コンポーネントが現在のルートに合わせてコンポーネントをレンダリングする責任を負っています。src/router.jsで定義されています。
-   ファイル src/router.jsでは、ルーターがアプリのルート変更に応答し、それをsrc/RouteHandler.vue コンポーネントに渡すように設定されています。
-   ファイル src/RouteHandler.vueでは、ルート/レイアウトサービスデータがSitecoreJssStorePlugin によってVueリアクティブデータオブジェクトに提供されます。初期データがない場合は、現在のルートのレイアウトサービスデータを取得し、アプリのルートおよび言語の状態が更新されます。その後のルート変更はsrc/lib/SitecoreJssStorePlugin.jsを通じてグローバルアプリの状態を更新します。
-   ファイル src/RouteHandler.vueでは、実際のアプリマークアップレンダリングがLayout.vueコンポーネントに渡されます。グローバルアプリ状態はリアクティブデータオブジェクトにバインドされているため、新しいレイアウトサービス/ルートデータが受信されるとsrc/Layout.vueコンポーネントは再レンダリングされます。また、グローバルアプリステートは src/Layout.vue外に存在するコンポーネントがルートやコンテキストデータの変更に反応する方法を提供します。
-   ファイルsrc/Layout.vueでは、JSSアプリのシェルHTMLとグローバル要素、そしてルートのプレースホルダーがレンダリングされます。
-   ルートの残りの構造はルートデータによって定義され、各プレースホルダーにどのコンポーネントとそのコンテンツデータが存在するかを定義します。

## サーバーサイドルーティング

VueアプリがNodeサーバーによってプリレンダリングされると、最初の応答でクライアントにHTMLを返します。つまり、ルートデータフローはクライアント側のルーティングに似ていますが、いくつかの重要な違いがあります。

以下は、サーバー側のルートデータフローがクライアント側のルーティングとどのように異なるかを説明します。

-   最初のステップは適用モードによって異なります:
    -   [統合モード](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/start-a-jss-app-in-integrated-mode.html "Start a JSS app in integrated mode")のみでは、Sitecoreはリクエストを受け取り、サーバー側でルートを解析し、リクエストされたアイテムがJSSアプリケーションによって処理されているか、またどのバンドルを実行するかを決定します。
    -   [ヘッドレスモードのみ](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/headless-server-side-rendering-mode.html "Headless server-side rendering mode")では、Node SSRプロキシがリクエストを受け取り、それをSitecoreレイアウトサービスに渡します。
-   ノードホストはserver/server.jsファイルにあるサーバーバンドルからrenderView関数を呼び出します。関数の引数にはルートデータ/レイアウトサービスの出力が含まれます。
-   renderView関数は以下の手順を実行します。
    -   サーバー側レンダリング(レイアウトサービス、辞書)で使用するためのデータを受け取ります。
    -   クライアント側レンダリングで使用される src/createApp.js ファイルを通じてアプリを作成し、初期化します。
    -   ファイル src/createApp.jsでは、SSRデータが src/lib/SitecoreJssStorePlugin.js プラグインを使ってアプリケーションの初期状態に設定されます。
    -   Vueツールを使ってアプリをHTMLにレンダリングします。
    -   レンダリングされたアプリをindex.htmlテンプレートに埋め込み、メタデータとSSR状態を設定します。SSR状態(window.\_\_JSS\_STATE\_\_)はクライアント上でアプリの状態を再ハイドレートするために使われ、初期ルートデータをLayout Serviceに呼び出す必要がなくなります。
    -   最終的なHTMLでレンダリングコールバック関数を呼び出します。