---
title: "SXAストアフロントアーキテクチャ"
slug: "sxa-storefront-architecture"
abstract: "SXA Storefrontの要素とStorefrontテンプレートについて学びましょう。"
---
# SXAストアフロントアーキテクチャ

SXA Storefrontは、Sitecore Commerceの機能や機能を活用し、コマース固有のコントロールを用いて迅速かつ簡単にウェブショップを構築できるフレームワークです。SXA Storefront(以下の図で青色で示されている)は、以下のようなさまざまなコンポーネントの上に配置されています:

-   Sitecore Experience Platform – 最先端のCMSとマーケティング機能を備えた顧客体験管理ソフトウェアで、顧客体験を完全にコントロールできます。キャンペーンから訪問者活動、パフォーマンス測定まで、複数のチャネルですべての活動を統合できます。
-   Experience Accelerator—ウェブサイトをカスタマイズするための開発者アプリケーションで、コンポーネント、レイアウト、テンプレートの再利用を可能にします。
-   Sitecore Experience Commerce – 顧客ライフサイクル全体にわたるパーソナライズされた体験を提供することに特化したeコマースエンジンです。カタログおよび販売可能な商品管理、在庫管理、顧客管理、注文管理、プロモーション管理、価格管理を網羅しています。
-   Commerce Connect – ストアフロント開発者向けのSitecore Commerce APIで、フロントエンドのウェブショップソリューションとバックエンドの外部コマースシステムを統合するレイヤーです。バックエンドシステムは、SitecoreまたはサードパーティベンダーによってCommerce Connectコネクタが作成された任意のeコマースシステムを指します。Connectを通じて生成されるレポートには、Commerce向けの [Experience Profileレポート](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/experience-profile-commerce-tab.html "Experience Profile Commerce tab") や [Commerce Analyticsレポート](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/experience-profile-commerce-tab.html "Experience Profile Commerce tab") が含まれます。

以下の図は、Sitecoreソリューションを構成するコンポーネントを示しています。

![Overview diagram of the Sitecore solution](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/102/sitecore-experience-commerce/images/Architecture.png)

SXA Storefrontにはストアフロントサイトテンプレートが含まれており、事前に定義された構造とフォーマットを提供し、オンプレミスやクラウド上でウェブショップを迅速に作成・展開できます。このテンプレートはCommerceレンダリングで作成されたウェブショップテンプレートです。 [Habitatカタログ](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/catalogs.html "Catalogs")を使用し、サンプルテーマも含まれています。

## Commerce Foundationレイヤー

Commerce [Foundationレイヤー](https://helix.sitecore.net/principles/architecture-principles/layers.html?highlight=foundation%20layer#foundation-layer) は様々なサービスや機能を提供します。

![Commerce Foundation layer structure](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/102/sitecore-experience-commerce/images/FoundationLayer.png)

顧客が店舗とやり取りする際、CommerceレンダリングはCommerce Foundationレイヤーに [呼び出し](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/rendering-communication.html "Rendering communication") を行います。

## ストアフロントサイトテンプレート

[ストアフロントサイトテンプレート](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/elements-of-the-storefront-site-template.html)を使う理由はいくつかあります。

-   Sitecoreのベストプラクティスと最先端技術に基づくB2C eコマースソリューションを構築するための出発点を提供します。
-   採用可能で、SXAテーマでスキンを付け、本番環境向けにカスタマイズ可能です。
-   Sitecore Experience Platformの [エンゲージメント機能を](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/create-a-personalized-storefront-experience.html "Create a personalized storefront experience") 活用し、訪問者の行動を追跡・行動・フォローアップすることで、個人的な顧客体験を作り、生涯にわたる顧客を獲得します。

Storefrontサイトテンプレートを使用すると、ウェブショップに必要なすべての要素がコンテンツエディターに追加されます。顧客の要件に応じて、これらの要素をより適合させるカスタマイズが可能です。Storefrontコンポーネントのカスタマイズに関する詳細は、[Storefront開発者ドキュメント](https://doc.sitecore.com/xp/ja/developers/102/sitecore-experience-commerce/getting-started-with-storefront-for-developers.html "Getting started with Storefront for developers") および[Sitecore Experience Accelerator](https://doc.sitecore.com/xp/en/users/sxa/100/sitecore-experience-accelerator/introducing-sitecore-experience-accelerator.html)のドキュメントをご覧ください。

> !注チェックアウト時にオンライン決済を可能にするため、ストアフロントのサイトテンプレートにはBrainTreeとの連携が含まれています。BrainTreeに連絡して契約交渉を行い、必要な加盟店IDを取得してください。開発者アカウントはストアフロントの開発やテスト用に利用可能です。お好みの決済プロバイダーを統合するためのカスタムコマースコンポーネントを作成できます。Braintree決済プロバイダーをSitecoreと統合する方法のビデオ概要は、[Discover Sitecore](https://www.youtube.com/watch?v=SAaEF2UAERc)チャンネルをご覧ください。

## SXAストアフロントアーキテクチャ

SXA Storefrontはベストプラクティスを念頭に置き、モジュールアーキテクチャに基づいて構築されています。詳細は[Sitecore Helix開発ガイドライン](http://helix.sitecore.net/)をご覧ください。

SXAストアフロントで使用される技術は以下の通りです:

-   Sitecore Experience Platform
-   Sitecore Experience Accelerator
-   ベーシックBootstrap
-   JQuery
-   Knockout – クリーンな基礎データモデルを持つレスポンシブユーザーインターフェースを作成するのに役立つJavaScriptライブラリ
-   SitecoreとMicrosoft ASPです.NET MVC
-   HTML 5
-   Newtonsoft JSON

SXA Storefrontアーキテクチャでは:

-   内容、プレゼンテーション、カタログデータの間に明確な分離があります。
-   Storefrontの実装は、カスタムコードを注入してSitecoreに接続するよりも標準的な機能を重視しています。
-   SXA Storefrontではクッキーは導入されません。
-   製品カタログは、高度に最適化されたデータプロバイダーを用いて通常の商品としてSitecoreに表示されます。
-   実装は完全にSitecore MVCベースです。すべてのレンダリングはコントローラーベースです。

すべてのコンポーネントはコンポーネントAPIコール(AJAX)を用いて更新されます。これには以下の利点があります:

-   オブジェクトやデータはオンデマンドでロードされます(レイジーロード)し、ページポストバックはありません。
-   操作が進行中であるボタンやテーブルに進行状況インジケーターが表示されます。
-   Knockout.js 動的データバインディングに使用されます。
-   コンポーネントAPI呼び出しはJSONを返します。