---
title: "CSSテーマとJavaScriptを事前に最適化しましょう"
slug: "preoptimize-your-css-theme-and-javascript"
abstract: "テーマのスタイリングには事前最適化を活用しましょう。"
---
# CSSテーマとJavaScriptを事前に最適化しましょう

SXAは、組み込みのテーマツールを使ってフロントエンドの開発者マシンで最適化されたファイルを構築できます。これにより、Sitecoreインスタンス外でpre-optimized-minファイルを生成でき、資産をより細かくコントロールできます。

最適化はすべてフロントエンド開発中に行うことができます。この仕組みにより、テーマファイルをGitのようなリポジトリに保存し、バージョントラッキングが可能になります。テーマファイルはシリアル化されたアイテムとして保存されず、内容もエンコードされないため、統合が容易になります。また、異なる開発者が同じテーマに同時に取り組むことも可能です。

> !注デフォルトでは、設定は事前最適化を推奨しており、ソースCSSやJSのアップロードはしません。デフォルト設定を変更するには、config.jsファイルへ行ってください:<Theme>/gulp/config.js。

スタイルやスクリプトのアップロードにpre-optimized-minファイルを使用するには:

1.  [SXA CLI](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/add-a-theme-using-sxa-cli.html "Add a theme using SXA CLI")を使って新しいテーマを作成します。すべてのスクリプトとスタイルのアセットは自動的にローカルのテーマフォルダにダウンロードされます。
    
2.  [npm installを使い、gulp watcherタスクを実行し](https://doc.sitecore.com/xp/ja/developers/sxa/93/sitecore-experience-accelerator/modify-your-site-design-with-creative-exchange-live.html "Modify your site design with Creative Exchange Live") てください。
    
3.  スタイルやスクリプトを変更すると、pre-optimized-minファイルが自動的に作成され、Sitecoreインスタンスにアップロードされます。
    
    例えば、アコーディオンコンポーネントのスタイルを変更して保存すると、ソースが別々にアップロードされているのではなく、pre-optimized-minファイルを使ってアップロードされたことが表示されます。
    
    ![Uploading of pre-optimized-min was successful message.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-preoptimizedmin-message.png)
    
    コンテンツエディターでは、テーマのstyleやscriptsフォルダにはpre-optimized-minファイルのみが入り、ソースアセットは含まれません。
    
    ![The theme folder contains the pre-optimized-min folder only.](https://doc.sitecore.com/api/markdown-image/xp/ja/developers/sxa/93/sitecore-experience-accelerator/images/SXA-preoptimizedmin-styles.png)