---
title: "SXA StorefrontのテーマにECMAScript 6+を追加してください"
slug: "add-ecmascript-6--to-sxa-storefront-themes"
abstract: "JavaScriptのクロスブラウザ問題を解決するために使用できるコードの概要。コードトランスパイルは、gulpタスクが実行される際にBabelトランスコンパイラによって行われます。"
---
# SXA StorefrontのテーマにECMAScript 6+を追加してください

JavaScriptのクロスブラウザ問題を避けるために、SXA Storefrontには[ECMAScript(ES)](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/use-ecmascript-6--in-your-theme.html) ウォッチャーが含まれています。ECMAScript 6+は、現在および古いブラウザバージョンの両方でコードに使用できます。ソースフォルダ内のECMAScript 6+コードは自動的にscriptsフォルダ内のファイルに変換されます。 [Babel](https://babeljs.io/docs/en/)トランスコンパイラは、es-watchと名付けられたgulpタスクが実行されるとコードをトランスパイルします。タスクはソースコードリポジトリのsrc\\Project\\Storefront\\src\\Scripts\\gulpにあるタスクフォルダに保存されます。

> !注変更がSitecoreのコンテンツと同期されるよう、[Gulpで設定](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/add-a-theme-using-sxa-cli.html) された別のプロジェクトを運営していると仮定しています。

SXA StorefrontのテーマにECMAScript 6+を追加するには:

1.  src\\Project\\Storefront\\src\\Scripts\\gulp\\config.jsファイルを開いて、ファイルのes:セクションで以下の設定値を指定してください。
    
    js: {
     path: 'Commerce/\*\*/\*.js',
     esLintUploadOnError: true
    }
    es: {
     path: '../Sources/Commerce/\*\*/\*.js',
     srcFolderName: 'Sources',
     destFolderName: 'Scripts'
    },
    loginQuestions{
    
    ここで:
    
    -   path は変化を監視すべきスクリプトの相対的な経路です。
    -   srcFolderName はソースフォルダ名です。
    -   destFolderName は宛先フォルダ名です。
2.  ECMAScript 6+コードをsrcFolderName項目で指定されたフォルダに保存してください。
    
3.  デフォルトのgulpタスクを開始するか、タスクを独立して実行する場合はes-watchタスクを実行してください。
    
    ESウォッチャーは、ソースフォルダ内の任意のECMAScript 6+コードが後方互換性のあるJavaScriptコードに変換され、destFolderName項目で指定されたフォルダに保存されることを保証します。
    

> !注[SXA CLI](https://doc.sitecore.com/xp/en/developers/sxa/100/sitecore-experience-accelerator/add-a-theme-using-sxa-cli.html)というコマンドラインツールを使って、テーマの追加や設定を自動化できます。