---
title: "SXAストアフロント"
slug: "sxa-storefront"
abstract: ""
---
# SXAストアフロント

ストアフロントソリューションのカスタマイズを通じて、ストアフロントの開発と展開を加速させましょう。このセクションでは、SXA Storefrontの設定や設定、レンダリングのカスタマイズ方法、トラブルシューティングに関する一般的な開発者作業を扱います。

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

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

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

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

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

-   スクリバンのみのレンダリング(例えば、 [オーダーライン](https://doc.sitecore.com/xp/ja/developers/100/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/100/sitecore-experience-commerce/customizing-the-product-bundle-rendering.html "Customizing the Product Bundle rendering") レンダリング)
-   Razor専用レンダリング(例: [Login](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/commerce-account-renderings.html) レンダリング)
-   ノックアウトバインディング付きのRazor(例えば [、プロダクトインベントリ](https://doc.sitecore.com/xp/en/users/100/sitecore-experience-commerce/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の入門](https://doc.sitecore.com/xp/ja/developers/100/sitecore-experience-commerce/getting-started-with-storefront-for-developers.html "Getting started with Storefront for developers")」をご覧ください。