---
title: "SXAストアフロント"
slug: "sxa-storefront"
abstract: "SXA Storefrontの概要と開発者向けのリソースを把握しましょう。"
---
# SXAストアフロント

SXA Storefrontは、Sitecoreのストアフロントの開発と展開を加速させます。

フロントエンド開発には以下の要素が含まれます。

![Front end development elements.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/FrontendDev.png)

バックエンド開発は[Helixの原則](https://helix.sitecore.net/) に従い、以下の要素を含みます。

![Backend development elements.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/101/sitecore-experience-commerce/images/BackendDev.png)

SXA Storefrontソリューションの [フィーチャーレイヤー](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/sxa-storefront-architecture.html "SXA Storefront architecture") には、店舗サイトを構築するために必要なすべてのレンダリングが含まれています。これらのレンダリングは以下の通りに構築されます:

-   スクリバンのみのレンダリング(例えば、 [オーダーライン](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/customizing-the-order-lines-rendering.html "Customizing the Order Lines rendering") レンダリング)
-   Knockoutバインディング付きのScriban(例: [Product Bundle](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/customizing-the-product-bundle-rendering.html "Customizing the Product Bundle rendering") レンダリング)
-   Razor専用レンダリング(例: [Login](https://doc.sitecore.com/xp/en/users/101/sitecore-experience-commerce/en/commerce-account-renderings.html) レンダリング)
-   ノックアウトバインディング付きのRazor(例えば [、プロダクトインベントリ](https://doc.sitecore.com/xp/en/users/101/sitecore-experience-commerce/en/commerce-catalog-renderings.html) レンダリング)

Scriban専用レンダリングの場合、HTMLマークアップはScribanテンプレートに記載されていますが、それでも最低でもRazorビューと、以下のProduct Priceレンダリングの例に示されているようなコードが必要です。

<div @Html.Sxa().Component(Model.Rendering.RenderingCssClass ?? "cxa-productprice-component", Model.Attributes) data-cxa-component-class="ProductPrice" data-cxa-component-initialized="false" data-cxa-component-type="component">
 <div class="component-content">
 @if (Model.Item != null)
 {
 foreach (BaseVariantField variantField in Model.VariantFields)
 {
 @Html.RenderingVariants().RenderVariant(variantField, Model.Item, Model.RenderingWebEditingParams, Model)
 }
 }
 </div>
</div>

SitecoreにはSXA Storefront開発の開始に役立つ多くのリソースがあり、その主要なリソースの一部はここに掲載されています。

> !注以下のリンクの一部はSitecoreドキュメントサイトの別のエリアに繋がっています。リンクをクリックしてこのページに戻るには、ブラウザの戻るボタンを使ってください。

## 一般

-   [SXAストアフロントアーキテクチャ](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/sxa-storefront-architecture.html "SXA Storefront architecture")
-   [コンテンツツリーアーキテクチャ](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/content-tree-architecture.html "Content tree architecture")
-   [SXAのストアフロントがCommerce Engineに呼び起こす](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/sxa-storefront-calls-to-commerce-engine.html "SXA Storefront calls to Commerce Engine")
-   [ストアフロントサイトテンプレートの要素](https://doc.sitecore.com/xp/en/users/101/sitecore-experience-commerce/en/elements-of-the-storefront-site-template.html)
-   [ストアフロントのセットアップワークフロー](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/workflow-to-set-up-a-storefront.html "Workflow to set up a storefront")
-   [商業テナントと敷地の足場](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/commerce-tenant-and-site-scaffolding.html "Commerce tenant and site scaffolding")
-   [ストアフロントのパフォーマンス設定](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/performance-settings-for-sxa-storefront.html "Performance settings for SXA Storefront")
-   [非同期通話とキャッシュの理解](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/understanding-asynchronous-calls-and-caching.html "Understanding asynchronous calls and caching")
-   [レンダリングビュープロバイダーのオーバーライド](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/override-the-default-rendering-view-provider.html "Override the default Rendering View Provider")
-   [SXA Storefrontでのプライバシーと同意](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/privacy-and-consent-with-sxa-storefront.html "Privacy and consent with SXA Storefront")

## マーケティングオートメーション

-   [Commerceマーケティングオートメーションキャンペーンのデータフロー](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/commerce-marketing-automation-campaigns-data-flow.html "Commerce Marketing Automation campaigns data flow")
-   [Commerceマーケティング自動化キャンペーンをカスタマイズ](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/commerce-marketing-automation-campaigns.html "Commerce Marketing Automation campaigns")
-   [商務省のマーケティングオートメーションキャンペーンにおける複数回の登録と匿名の連絡先](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/multiple-enrollments-and-anonymous-contacts-in-commerce-marketing-automation-campaigns.html "Multiple enrollments and anonymous contacts in Commerce marketing automation campaigns")
-   [コマースのマーケティングオートメーションキャンペーンとの連携](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/working-with-commerce-marketing-automation-campaigns.html "Working with Commerce marketing automation campaigns")

## レンダリング

-   [商業図面](https://doc.sitecore.com/xp/en/users/101/sitecore-experience-commerce/en/commerce-renderings.html)
-   [製品リストのレンダリング選び](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/choosing-between-available-renderings-for-product-lists.html "Choosing between available renderings for product lists")
-   [オンラインで製品リストをレンダリングする](https://doc.sitecore.com/xp/en/users/101/sitecore-experience-commerce/en/render-a-product-list-online.html)
-   [SXAストアフロントレンダリング通信](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/rendering-communication.html "Rendering communication")
-   [ウォークスルー:SXA Storefront用のカスタムモジュール作成とレンダリング](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--creating-a-custom-module-and-rendering-for-sxa-storefront.html "Walkthrough: Creating a custom module and rendering for SXA Storefront")

## スクリバンテンプレート

-   [Scribanテンプレートの扱い方](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/working-with-scriban-templates.html "Working with Scriban templates")
-   [Scribanテンプレート用の組み込みCommerce関数](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/the-embedded-commerce-functions-for-scriban-templates.html "The embedded Commerce functions for Scriban templates")
-   [Scribanテンプレート用の埋め込みされたCommerceアイテムとオブジェクト](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/the-embedded-commerce-items-and-objects-for-scriban-templates.html "The embedded Commerce items and objects for Scriban templates")
-   [商品バンドルを識別するためのカスタムラベルを追加してください](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/customize-the-commerce-search-results-rendering-to-identify-product-bundles.html "Customize the Commerce Search Results rendering to identify product bundles")

## Search

-   [商取引検索範囲](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/commerce-search-scopes.html "Commerce search scopes")
-   [検索の設定](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/configuring-site-searches-in-sxa-storefront.html "Configuring site searches in SXA Storefront")
-   [Commerce Search結果レンダリングのカスタマイズ](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/customizing-the-commerce-search-results-rendering.html "Customizing the Commerce Search Results rendering")

## SXA

-   [再利用可能なリッチテキストの追加](https://doc.sitecore.com/xp/en/users/sxa/101/sitecore-experience-accelerator/en/add--reusable--rich-text.html)
-   [レンダリングをコピーしてカスタマイズする](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/copy-and-customize-a-rendering.html)
-   [SXAパイプラインを理解する](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/the-sxa-pipelines.html)
-   [SXAスクリプトライブラリをご利用ください](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/the-sxa-script-library.html)
-   [カスタムテーマを作成してください](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/create-a-custom-theme.html)
-   [サイトごとにHTMLのレンダリングをカスタマイズ](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/customize-rendering-html-per-site.html)
-   [カスタムグリッドを作成する](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/create-a-custom-grid.html)
-   [アセットオプティマイザーを有効にする](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/enable-and-configure-the-asset-optimizer.html)
-   [Scribanテンプレート](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/scriban-templates.html)
-   [SXA Searchサービス](https://doc.sitecore.com/xp/en/developers/sxa/101/sitecore-experience-accelerator/en/the-sxa-search-service.html)

## 例

-   [ウォークスルー:トップカテゴリナビゲーションの設定](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--configuring-visual-navigation-by-category.html "Walkthrough: Configuring visual navigation by category")
-   [攻略:新しいScribanテンプレートの作成](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--creating-a-new-scriban-template.html "Walkthrough: Creating a new Scriban template")
-   [ウォークスルー:SXA Storefront用のカスタムモジュール作成とレンダリング](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--creating-a-custom-module-and-rendering-for-sxa-storefront.html "Walkthrough: Creating a custom module and rendering for SXA Storefront")
-   [ウォークスルー:Commerce Search Resultsレンダリングを使ったクロスセルとアップセル](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/walkthrough--cross-selling-and-upselling-using-the-commerce-search-results-rendering.html "Walkthrough: Cross-selling and upselling using the Commerce Search Results rendering")

## ビデオ

以下の動画がDiscover Sitecoreチャンネルで視聴可能です:

-   [Sitecore Experience Commerceの紹介](https://www.youtube.com/watch?v=HgwnRTYtTXs)
-   [メールキャンペーンのランディングページを作成する](https://www.youtube.com/watch?v=f4v3vht_A9k)
-   [Sitecore Experience Commerceの開発](https://www.youtube.com/watch?v=G47K3QdVU78)
-   [Sitecore Experience Commerceのカスタマイズ開発](https://www.youtube.com/watch?v=yrNFXhmnYvQ)
-   [概要Braintree決済プロバイダーの統合](https://www.youtube.com/watch?v=SAaEF2UAERc)
-   [航行方法の概要](https://www.youtube.com/watch?v=IS3Nz0NwLxA)
-   [Scribanテンプレートの使用概要](https://www.youtube.com/watch?v=HgwnRTYtTXs&feature=youtu.be&t=91)
-   [レンダリングバリアント](https://www.youtube.com/watch?v=HyMCJ0zhbK8&list=PL2bl35t0WZd0abyx-x6CrqitasCkJAfRd)
-   [SXAストアフロントの深掘り](https://www.youtube.com/embed/KS_rjfsElpE?start=900)

## 追加リソース

以下のリストには、追加の有用リソースへのリンクが含まれています。

-   [開発の始まり](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/getting-started-with-development.html "Getting started with development")
-   [Commerce Connect(ストアフロントAPI)](https://doc.sitecore.com/xp/ja/developers/101/sitecore-experience-commerce/commerce-connect.html "Commerce Connect")
-   [Sitecore開発者ドキュメント](https://doc.sitecore.net/developers/)
-   [Sitecoreコミュニティ](https://community.sitecore.net/)
-   [Sitecoreナレッジベース](https://kb.sitecore.net/)
-   Helixドキュメントと [Helixワークショップ](https://www.youtube.com/watch?v=RchuR18xLa0&index=1&list=PL1jJVFm_lGnz0XzXU5uNJSgTGMxNFsOky)
-   [GitHubのSitecore](https://github.com/Sitecore)
-   [Sitecore PowerShell拡張](https://doc.sitecorepowershell.com/)