--- title: "JSSアプリにおけるルート処理とデータ取得" slug: "route-handling-and-data-fetching-in-jss-apps" abstract: "JSSがSitecoreからのルート変更やデータ取得をどのように処理するか" --- # JSSアプリにおけるルート処理とデータ取得 Sitecoreでは、コンテンツ作成者が各ページのURLを希望するURL構造に従って整理することで、各ページのURLを管理できます。 JSSアプリのルートは、ウェブサイトのページやSitecoreのルート項目に似ています。サンプルアプリは、アプリ実行時にルートを解決するために、ライブラリで最も人気のあるルーティングプラットフォームを使用しています。ルートは階層的に定義されており、伝統的なページツリーアーキテクチャを形成しています。アプリにこのルーティングパラダイムを強制する必要はないため、より複雑なルーティングパターンを実装することも可能です。 例えば、以下のSitecoreツリー構造のコンテンツ項目がページやルートであると仮定すると: content site 1 Home About Products Product X Product Y Product Z site 2 Home site 3 Home Sitecoreはこれらのページを自動的に以下のURLにマッピングします: https://site-1-hostname/ https://site-1-hostname/about https://site-1-hostname/products https://site-1-hostname/products/product-x https://site-1-hostname/products/product-y https://site-1-hostname/products/product-y https://site-2-hostname/ https://site-3-hostname/ JSSアプリはSitecoreのURLマッピングを完全にサポートすることが期待されています。 > !注サイトのホスト名やページ名をURLセグメントにマッピングする方法(ケーシング、空白置換など)のルールはXML設定で定義されています。ビジネス要件に基づいてカスタマイズするかどうかは、チームのSitecore開発者と相談してください。Sitecoreがルーティング要件を処理する際のカスタマイズには、フロントエンドとバックエンドの開発者間の協力が必要です。 > > カスタムルーティングを使うには、Sitecoreのバックエンドで同じカスタムルーティングを実装し、カスタムルーティングされたサイトの編集が必要になるかもしれません。可能であれば、階層的なルートを使うようにしましょう。 JSSアプリでルートを変更するには、RESTまたはGraphQLを使ってSitecoreエンドポイントに呼び出して新しいルートのデータを取得する必要があります。したがって、JSSサンプルアプリでは、データ取得や状態管理も扱うカスタムルーティング実装を定義しています。 - Next.jsアプリは [ファイルシステムベースのルーターとオプションのキャッチオールルート](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/routing-and-page-composition-in-jss-next-js-apps.html "Routing and page composition in JSS Next.js apps")を使用します。 - Reactサンプルアプリは/src/RouteHandler.jsファイル内にRouteHandlerコンポーネントを実装しています。詳細については、[JSS Reactアプリのルーティングと状態管理](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/routing-and-state-management-in-the-jss-react-app.html "Routing and state management in the JSS React app")をご覧ください。 - Angularサンプルアプリは changeRoute 関数を使用しています。選択したレンダリング方法に基づき、アプリは /src/app/jss-context.server-side.service.ts ファイルのサーバー側実装、または src/app/jss-context.service.tsのクライアント側実装を使用します。詳細については、 [JSS Angularサンプルアプリのルーティングと状態管理](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/routing-and-state-management-in-the-jss-angular-sample-app.html "Routing and state management in the JSS Angular sample app")をご覧ください。 - Vue.js/src/RouteHandler.vueでRouteHandlerコンポーネントを実装しています。詳細については、[JSS Vue.jsサンプルアプリの「ルーティングと状態管理](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/routing-and-state-management-in-the-jss-vue-js-sample-app.html "Routing and state management in the JSS Vue.js sample app")」をご覧ください。 - React Native /src/dataService/dataService.connected.js ファイル内にルーティングハンドラを実装しています。詳細については、「 [React Native JSSアプリのルーティングと状態管理](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/routing-and-state-management-in-react-native-jss-apps.html "Routing and state management in React Native JSS apps")」を参照してください。 [カスタムデータフェッチャーを使う](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/fetch-layout-data-using-a-custom-rest-data-fetcher.html "Fetch layout data using a custom REST data fetcher")か、[Sitecoreレイアウトサービスを拡張する戦略](https://doc.sitecore.com/xp/ja/developers/hd/19/sitecore-headless-development/extending-the-layout-service.html "Extending the Layout Service")のいずれかを使うことで、アプリケーションに合ったデータ取得機能をカスタマイズできます。