> ## 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でのJavaScriptフレームワークの使用方法

> HubSpot CMSを使用すると、高度なJSベースのウェブアプリを作成できます。簡単に作業を開始するためのボイラープレートが用意されています。

'HubSpot CMSを使用すると、高度なJSベースのウェブアプリを作成できます。簡単に作業を開始するためのボイラープレートが用意されています。';

HubSpotのCMSを使用すると、JavaScriptベースのウェブアプリを作成できます。

## 必要なCMSのエディション

ウェブサイトでサーバー側のコードまたはコンテンツメンバーシップのメカニズムが必要な場合、Enterpriseサブスクリプションをお持ちであれば、HubSpotの[サーバーレス関数](https://developers.hubspot.com/docs)と[コンテンツメンバーシップ](https://developers.hubspot.com/docs)機能を利用できます。ただし、AWS LambdaなどのサードパーティープロバイダーとAPIゲートウェイを組み合わせて独自のシステムを構築し、サーバー側のコードを実行することもできます。

[非公開アプリのアクセストークン](/apps/legacy-apps/private-apps/overview)などの認証を求めるAPIエンドポイントへのアクセスが必要なウェブアプリを開発する場合、そのようなコードはブラウザー上で実行しないでください。ページを閲覧する全てのユーザーに対して資格情報が公開されることになります。適切なアプローチは、ブラウザーと認証されるAPIの間に抽象化レイヤー（資格情報の公開を必要としない、呼び出し元ウェブサイトと同じドメインから提供されるカスタムAPIエンドポイント）を作ることです。

カスタムAPIエンドポイントへのアクセスにより、認証付きのリクエストが可能なサーバーサイドコードが実行されます。次に、機密性が必要なデータやビジネスロジックの書式を設定し、その結果をブラウザーに送信できます。

このような処理には通常、サーバーレス関数を使用します。サーバーレス関数は非常に拡張性に優れ、自社でサーバーを保持および管理する必要もないからです。APIゲートウェイと組み合わせてAWS Lambdaなどのプロバイダーを使用できます。または、HubSpotのファーストパーティー[サーバーレス関数](https://developers.hubspot.com/docs)を使用できます。HubSpotサーバーレス関数には、複数の個別のサービスを管理する必要がないという利点があります。利用が簡素化され、テーマ、テンプレート、モジュールなどのあらゆる素材と共通のデベロッパー ファイル システムに直接統合されます。

認証付きのAPI呼び出しが必要ないアプリの場合は、Enterpriseは必要ありません。ReactとVueは、動作にサーバーレス関数を必要としないフロント エンド フレームワークです。重要なのはこのフレームワークを使って何を行うかです。

## フレームワークとライブラリー

ウェブアプリの開発では、状態とユーザーインターフェイス（UI）の管理にJavaScriptフレームワークを使用することが一般的です。

CMS Hubは特定のフレームワークの動作を念頭に置いて開発されていませんが、多くの一般的なJavaScriptフレームワークがHubSpotのCMS上で動作します。HubSpotでの開発時には、このようなフレームワークとのさまざまな連携方法に関する考慮が必要になる場合があります。とはいえ、これらのフレームワークの利用に欠かせない本質、つまり、[カスタムテンプレート](/cms/start-building/building-blocks/templates/overview)、[モジュール](https://developers.hubspot.com/docs)、およびJavaScriptを記述する機能が利用できます。また、ビルドステップを使用できるように、[ローカルでコーディング](/developer-tooling/local-development/hubspot-cli/install-the-cli)することもできます。

## 知っておくべきこと

当社では、一般的なJavaScriptフレームワークを使用したHubSpot開発のベストプラクティスを確立するために、開発者コミュニティーと連携しています。HubSpotのCMSでも単純なHTMLページのような設定は可能ですが、単純なHTMLページとの違いを意識してプロジェクトを設定することが必要になる場面があります。

また、慣れている開発ワークフローとは異なる部分があるかもしれません。さまざまな開発者の方の利便性を高めるためにも、ご意見をお寄せください。現在最適なのは、HubSpotの[開発者フォーラム](https://community.hubspot.com/t5/HubSpot-Developers/ct-p/developers)です。HubSpotでは、テストで得られた新たな情報により、引き続きドキュメントを更新していきます。

### 開発時の考慮事項

HubSpotのCMSには優れた[モジュールシステム](https://developers.hubspot.com/docs)があるため、[HubSpotのテンプレート言語「HubL」](/cms/reference/hubl/operators-and-expression-tests)を利用できるCSS、JavaScript、およびHTMLの再利用可能なコードを作成できます。HubSpotのモジュールは、制作担当者に多くの制御と機能を提供する方法として役立ちます。最新のJavaScriptフレームワークには、多くの場合、独自のモジュールシステムがあります。こうしたシステムはそれぞれ独立して設計されています。その結果、課題への対処方法も多様です。

#### サーバーサイドとクライアントサイドのレンダリング

サーバーサイドのレンダリングとは、サーバーのテンプレートロジックからページのHTMLを生成してから、HTMLをブラウザーに送信することです。

クライアントサイドのレンダリングとは、サーバーから軽量の「未完成」版のHTMLを送信し、JavaScriptを使用してHTMLを出力することです。これにより、サーバーからウェブブラウザー（クライアント）側にロジックの処理が移管されます。

ハイドレーションは、両方の手法を組み合わせることです。まず、サーバー側でできるだけHTMLを生成します。次にJavaScript側で、受け取ったHTMLを評価し、ページ上でのユーザーとのやりとりやデータの受領が発生したときに、必要に応じて小さな変更を行います。これにより、クライアントの負荷が軽減され、読み込まれたコンテンツがユーザーに見える状態になるまでにかかる時間も短縮される可能性があります。

HubSpotのCMSでは、HubLがサーバーサイドで処理され、CDNレベルでキャッシュされます。次にJavaScriptを使用して、ブラウザーがサイト訪問者に表示するHTMLのハイドレーション（つまり、クライアントサイドレンダリング）を処理することができます。

#### シングル ページ アプリ（SPA）アナリティクス

企業が成長し、顧客とプロスペクト（見込み客）の問題を解決できるように適応するためには、アナリティクス（分析）が重要です。複数のビューを含むシングル ページ アプリを構築する際は、さまざまなビューをページとして表示する訪問者をトラッキングすることをお勧めします。

ほとんどのアナリティクスプラットフォームでは、JavaScriptを使用してこれを行う方法を提供しており、HubSpotもその例外ではありません。アプリでビューが変更されると、[ページビューをプッシュ](/api-reference/legacy/tracking-code-v1/overview#tracking-in-single-page-apps)します。

#### HubSpotモジュールを利用してアプリを開発する

HubSpotのモジュールシステムはサーバーサイド モジュール システムです。HubL＋HTMLのパーシャルからHTMLドキュメントを生成するとともに、ページ内の各モジュールの軽量化（ミニフィケーション）されたCSSおよびJavaScriptを生成します。

HubSpotモジュールを使用した開発には、次のようなメリットもあります。

* 制作担当者が、ドラッグ＆ドロップエリアまたはフレキシブルカラムを含むページにモジュールを追加できます。モジュール自体の移動や削除もできます。
* アプリの設定ができるフィールドを制作担当者に提供できます。
* コードは、モジュールが実際に使用されている場合にのみ、ページにレンダリングされます。
* `Module.css`および`module.js`は自動的に軽量化されます。

HubSpotモジュールシステムを使用することによる負担は、モジュールを特定のファイルで構成し、コードの通常の配置場所とは別に配置する必要があることです。

#### 代わりに完全なテンプレートを構築する

アプリはモジュールフレームワーク内ではなく、テンプレートとして構築することもできます。これにより、ファイル構造の柔軟性が高まります。ただし、モジュール提供のようなメリットは得られません。制作担当者はページのドラッグ＆ドロップエリアおよびフレキシブルカラム内にこのアプリを追加できなくなります。

#### 区切り記号

一部のJavaScriptフレームワークでは、コードの区切り記号として中括弧`{ }`が使用されます。HubL言語でも、この中括弧を使用します。フレームワークとHubLの間で競合が生じないようにするには、未加工のHubLタグを使用してJSXをラップする、異なる区切り文字を使用するようにフレームワークを設定する、JavaScriptを事前にコンパイルするビルドステップを使用するという3つの戦略があります。

## Vue.js

人気の[Vue.js](https://vuejs.org/)フレームワークでは、ビルドステップあり、なしのどちらでも利用できます。各手法の長所と短所の詳細については、[Vueのドキュメント](https://vuejs.org/guide/quick-start.html)を参照してください。HubSpot上では、留意すべき特有の長所と短所があります。

### ビルドステップなしの場合

ビルドステップなしのVue.jsは、モジュールに簡単に連携できます。

#### Vueライブラリーをモジュールに追加する

`module.html`ファイル内に[`require_js`](/cms/reference/hubl/functions#require-js)を指定して[Vueライブラリー](https://vuejs.org/guide/quick-start.html#Direct-lt-script-gt-Include)を追加し、ページにモジュールが追加されたときに1回だけ読み込まれるようにします。

<Alert type="tip">
  開発中は、devビルドを使用してデバッグに役立つ情報を取得します。本番環境では、特定のVueバージョンのCDN URLを使用するか、それをダウンロードし、HubSpot[デベロッパー ファイル システム](/cms/start-building/introduction/overview#developer-file-system)上にJavaScriptファイルとしてホスティングすることをお勧めします。
</Alert>

#### HTMLコードを追加する

[Vue.jsの「はじめに」](https://vuejs.org/guide/introduction.html#Declarative-Rendering)からHTMLコードをコピーし、`module.html`ファイルに貼り付けます。HubLとして評価されないように、このコードをHubLのrawタグで囲みます。

```hubl theme={null}
{# raw prevents code within it from being evaluated as HubL #}

<div id="app">
  {{ message }}
</div>

```

#### JavaScriptコードを追加する

[Vue.jsの「はじめに」](https://vuejs.org/guide/introduction.html#Declarative-Rendering)からJavaScriptをコピーして`module.js`に貼り付けます。[DOMコンテンツの読み込みが終了してから実行されるように、イベントリスナーで](https://developer.mozilla.org/ja/docs/Web/API/Document/DOMContentLoaded_event)このコードを囲みます。モジュールを公開してプレビューします\*\*。これで、基本的なVueアプリが機能していることを確認できます\*\*。

```js theme={null}
var app = new Vue({
  el: "#app",
  data: {
    message: "Hello Vue!",
  },
});
```

### ビルドステップありの場合

Vue.jsアプリのビルドにHubSpotモジュールをご活用いただくための[ボイラープレート](https://github.com/HubSpot/cms-vue-boilerplate)（ベータ）を作成しました。最も簡単な利用方法は、[CMS CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli)で`hs create vue-app`コマンドを実行することです。手順は[リポジトリー](https://github.com/HubSpot/cms-vue-boilerplate/)に含まれています。

この新しいボイラープレートに関するご意見をお聞かせください。改善点や問題点についてお寄せいただけますと幸いです。フィードバックをご提供いただける場合は、[GitHubリポジトリーにイシューを送信](https://github.com/HubSpot/cms-vue-boilerplate/issues)する方法をお勧めしています。

### Vueコンポーネント内のHubSpotフォームとCTAを操作する

HubSpotのCTAとフォームには独自のスクリプトタグがあり、それぞれ独自のHTMLを管理します。VueコンポーネントがフォームやCTAを変更しないようにするためには、CTAまたはフォームの埋め込みコードを包含するHTML要素を作成します。[その要素に`v-once`を適用](https://vuejs.org/api/#v-once)します。これにより、コードが1回レンダリングされた後は、Vueコンポーネントでそのコードが無視されます。

## ReactJS

HubLを使用してモジュールとパーシャルを作成する代わりに、[JavaScriptとReact](https://developers.hubspot.com/docs)を使用することもできます。JavaScriptのモジュールとパーシャルは、サーバーでレンダリングされたReactコンポーネントをHubLによって生成されたHTMLに組み込む処理に加えて、サーバー側とクライアント側の両方の双方向性をサポートしています。詳しくは、HubSpotの[JSビルディングブロックの概要](https://github.hubspot.com/cms-js-building-block-examples/)をご参照ください。

また、HubSpotモジュール内で[React](https://github.com/HubSpot/cms-react-boilerplate)アプリを迅速に導入して運用を開始するための[Reactボイラープレート](https://reactjs.org/)をご確認ください。最も簡単な利用方法は、[CMS CLI](/developer-tooling/local-development/hubspot-cli/install-the-cli)で`hs create react-app`コマンドを実行することです。ここから、[リポジトリー](https://github.com/HubSpot/cms-react-boilerplate)内の手順に従ってください。

この新しいボイラープレートに関するご意見をお聞かせください。改善可能な点や、発生した問題点をお知らせください。フィードバックのご提供方法としては、[GitHubリポジトリーにイシューをお送り](https://github.com/HubSpot/cms-react-boilerplate/issues)いただくことが最適です。

## その他のJavaScriptライブラリー

現在提供されているさまざまなJavaScriptライブラリーを個別に文書化することは不可能です。HubSpot上でJavaScriptライブラリーを使用する際には、理解しておくべき重要なベストプラクティスがあります。

### スクリプトタグではなくrequire\_jsを使用する

数多くのモジュールやテンプレートの間でJavaScriptライブラリー共有できますが、このようなライブラリーが複数回読み込まれることを心配する必要はなくなります。そのためには、[`require_js`](/cms/reference/hubl/functions#require-js)HubL関数を使用する必要があります。この関数を使用して読み込まれたスクリプトは、このスクリプトを必要とするモジュール数、パーシャル数、テンプレート数に関係なく、ページごとに1回だけ読み込まれます。

```hubl theme={null}
{{ require_js(get_asset_url('/js/jquery-latest.js')) }}

{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js") }}
```

<Alert type="tip">
  デベロッパー ファイル システム内に保存されたファイルを要求するには、`get_asset_url()`を使用します。開発ファイルを同じ場所に配置してファイルのセキュリティーを一元管理できるだけでなく、DNSルックアップ数が減少する利点もあります。
</Alert>

Requireを使用してパフォーマンスを向上できる理由は、ファイルの読み込みを1回に抑えることだけではありません。ページ上のアセットが特定のライブラリーを必要としない場合、そのライブラリーは全く読み込まれません。HubLロジックとrequireを併用しても、本当に必要な場合にのみリソースが読み込まれます。

## 推奨されるチュートリアルとガイド

* [パフォーマンスの最適化](/cms/best-practices/testing-staging-performance/speed)
* [アクセシビリティーは機能ではない](/cms/best-practices/improve-existing-sites/accessibility)
* [HubSpotでWebコンポーネントを使用する方法](https://developers.hubspot.com/blog/use-web-components-in-hubspot-cms-development)
* [モジュールを使ってみる](https://developers.hubspot.com/docs)
* [サーバーレス関数を使ってみる](https://developers.hubspot.com/docs)
* [効率的な開発ワークフローの構築](/cms/start-building/introduction/developer-environment/creating-an-efficient-development-workflow)
* [HubDBを使って動的ページを作成する](https://developers.hubspot.com/docs)
* [Reactでモジュールを作成する](/cms/start-building/introduction/react-plus-hubl/overview)