> ## Documentation Index
> Fetch the complete documentation index at: https://developers.hubspot.jp/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# HubSpot CMSボイラープレート
> HubSpot CMSボイラープレートを使用して、HubSpotのCMSプラットフォームを活用するためのベストプラクティスを理解することができます。開発者はボイラープレートを利用することで、CMS Hub上で迅速にウェブサイトを構築できます。
[HubSpot CMSボイラープレート](https://github.com/HubSpot/cms-theme-boilerplate)を出発点として、CMS Hub上でウェブサイトを稼働させると同時に、CMS Hubのベストプラクティスを理解することができます。ボイラープレートはHubSpotが構築し、活発にメンテナンスを行っていますが、オープンソースのGitHubプロジェクトでもあるため、誰でも変更を提案したり、フォークして用途に合わせてカスタマイズしたりできます。CMS Hubを初めて利用する方で、ボイラープレートを出発点に新しいプロジェクトを開始する場合は、[CMS Hub上での開発手順を説明しているクイックスタートガイド](/cms/start-building/introduction/classic-hubl-quickstart)に従ってください。
[ボイラープレートのライブデモを表示](https://boilerplate.hubspotcms.com/)
[Watch](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2FHubSpot%2Fcms-theme-boilerplate%2Fsubscription) [Fork](https://github.com/login?return_to=https%3A%2F%2Fgithub.com%2FHubSpot%2Fcms-theme-boilerplate%2Ffork) [Star](https://github.com/HubSpot/cms-theme-boilerplate)
## HubSpot CMSボイラープレートの構造
ボイラープレートは、[ローカル開発ツール](/developer-tooling/local-development/hubspot-cli/install-the-cli)を使用して操作することも、[デザインマネージャー](https://knowledge.hubspot.com/cos-general/get-started-with-the-design-manager)で直接作業することもできます。ボイラープレートでは、全てのアセットを相対パスで参照するため、どのようなプロジェクトにも簡単に調整できます。相対パスで参照することから、HubSpotプラットフォーム上のどのアカウント間でもボイラープレートを移植できます。下のスクリーンショットは、ボイラープレートのアセットのフォルダー構造を示しています。ボイラープレートのアセットは複数のディレクトリーとしてまとめられるので、アセットがどこにあるのかを簡単に識別できます。
{{ page_meta.html_title }}
{% if site_settings.favicon_src %}
{% block header %}
{% global_partial path="../partials/header.html" %}
{% endblock header %}
{% block body %}
{% endblock body %}
{% global_partial path="../partials/footer.html" %}
{{ standard_footer_includes }}
```
このベースレイアウト内には、ヘッダーやフッターなどのグローバルパーシャルも含まれるため、これらのパーシャルのコードを専用のファイルに保持してモジュール方式で開発できます。さらに、これらはグローバルパーシャルなので、制作担当者も[グローバルコンテンツエディター](/cms/start-building/building-blocks/global-content)を使って簡単に編集できます。
ボイラープレートに含まれるアセットの詳細については、[GitHubのボイラープレートのwiki](https://github.com/HubSpot/cms-theme-boilerplate/wiki)を参照してください。
## jQuery
**HubSpotテーマボイラープレートは、jQueryがなくても機能**します。古いHubSpotアカウントでは、デフォルトでjQueryが読み込まれます。新しいHubSpotアカウントでは、jQueryはデフォルトで無効になっています。
従来、HubSpotスクリプトの正常な動作にはjQueryが必要で、そのためドメイン全体の設定があり、互換性が確保されていました。現在のHubSpotスクリプトにjQueryは使用されていません。jQueryが必須ではないため、開発者はソース管理にも使用できるライブラリーを適切な方法で組み込むことができます。新しいウェブサイトの場合は、jQuery設定を無効にすることをお勧めします。
既存のウェブサイトがあるドメインのjQueryを無効にした場合、jQueryに依存しているランディングページまたは既存のウェブページが機能しなくなる恐れがあることに注意してください。
**新しいウェブサイトでjQueryを使用する場合は、最新バージョンのjQueryを使用する**ことをお勧めします。これには次の2つの簡単な方法があります。
* 最新バージョンのjQueryをデベロッパーファイルシステムにアップロードし、[`require_js`](/cms/reference/hubl/functions#require-js)を使用することで、jQueryを必要に応じて読み込みます。
* 信頼できるCDNを採用し、[`require_js`](/cms/reference/hubl/functions#require-js)を使用することで、jQueryを必要に応じて読み込みます。
## 関連リソース
* [テーマを使ってみる](/cms/start-building/building-blocks/themes/getting-started)
* [CMS Hubで構築したウェブサイトのパフォーマンスの最適化](/cms/best-practices/testing-staging-performance/speed)
* [アクセシビリティーについて](/cms/best-practices/improve-existing-sites/accessibility)
HubSpot CMSボイラープレートの基礎となるテンプレート構造は、［templates］＞［layouts］フォルダーに格納されている[共通のベーステンプレート](https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/templates/layouts/base.html)を中心に展開します。つまり、このベーステンプレートで`{% extends %}`タグを使用して、メインコンテンツの`{% block body %}`ブロックを参照します。extendタグとブロックの使用例は、[templatesディレクトリーに格納されているいずれかのhtmlファイル](https://github.com/HubSpot/cms-theme-boilerplate/tree/main/src/templates)内で確認できます。詳しくは[ブロックと拡張](/cms/reference/hubl/overview#blocks-and-extends)をご参照ください。
このようにCMSシステムでの開発では、ベーステンプレート（メインテンプレートまたは親テンプレートとも呼ばれます）にサイト上のコンテンツを構成する主要な共通要素を含める方法が一般的です。共通の構成要素は通常、ウェブサイトに設定されている``要素に含まれる項目です。項目の例としては、共通メタプロパティー（タイトル、メタディスクリプションなど）、ファビコンのリンク、CSSのリンク、サードパーティーのスクリプトなどがあります。
```hubl theme={null}