HubSpotでのJavaScriptフレームワークとライブラリーの使用方法
HubSpotのCMSを使用すると、JavaScriptベースのウェブアプリを作成できます。
ウェブサイトでサーバー側のコードまたはコンテンツメンバーシップのメカニズムが必要な場合、Enterpriseサブスクリプションをお持ちであれば、HubSpotのサーバーレス関数とコンテンツメンバーシップ機能を利用できます。ただし、AWS LambdaなどのサードパーティープロバイダーとAPIゲートウェイを組み合わせて独自のシステムを構築し、サーバー側のコードを実行することもできます。
非公開アプリのアクセストークンなどの認証を求めるAPIエンドポイントへのアクセスが必要なウェブアプリを開発する場合、そのようなコードはブラウザー上で実行しないでください。ページを閲覧する全てのユーザーに対して資格情報が公開されることになります。適切なアプローチは、ブラウザーと認証されるAPIの間に抽象化レイヤー（資格情報の公開を必要としない、呼び出し元ウェブサイトと同じドメインから提供されるカスタムAPIエンドポイント）を作ることです。
カスタムAPIエンドポイントへのアクセスにより、認証付きのリクエストが可能なサーバーサイドコードが実行されます。次に、機密性が必要なデータやビジネスロジックの書式を設定し、その結果をブラウザーに送信できます。
このような処理には通常、サーバーレス関数を使用します。サーバーレス関数は非常に拡張性に優れ、自社でサーバーを保持および管理する必要もないからです。APIゲートウェイと組み合わせてAWS Lambdaなどのプロバイダーを使用できます。または、HubSpotのファーストパーティーサーバーレス関数を使用できます。HubSpotサーバーレス関数には、複数の個別のサービスを管理する必要がないという利点があります。利用が簡素化され、テーマ、テンプレート、モジュールなどのあらゆる素材と共通のデベロッパー ファイル システムに直接統合されます。
認証付きのAPI呼び出しが必要ないアプリの場合は、Enterpriseは必要ありません。ReactとVueは、動作にサーバーレス関数を必要としないフロント エンド フレームワークです。重要なのはこのフレームワークを使って何を行うかです。
ウェブアプリの開発では、状態とユーザーインターフェイス（UI）の管理にJavaScriptフレームワークを使用することが一般的です。
CMS Hubは特定のフレームワークの動作を念頭に置いて開発されていませんが、多くの一般的なJavaScriptフレームワークがHubSpotのCMS上で動作します。HubSpotでの開発時には、このようなフレームワークとのさまざまな連携方法に関する考慮が必要になる場合があります。とはいえ、これらのフレームワークの利用に欠かせない本質、つまり、カスタムテンプレート、モジュール、およびJavaScriptを記述する機能が利用できます。また、ビルドステップを使用できるように、ローカルでコーディングすることもできます。
当社では、一般的なJavaScriptフレームワークを使用したHubSpot開発のベストプラクティスを確立するために、開発者コミュニティーと連携しています。HubSpotのCMSでも単純なHTMLページのような設定は可能ですが、単純なHTMLページとの違いを意識してプロジェクトを設定することが必要になる場面があります。
また、慣れている開発ワークフローとは異なる部分があるかもしれません。さまざまな開発者の方の利便性を高めるためにも、ご意見をお寄せください。現在最適なのは、HubSpotの開発者フォーラムです。HubSpotでは、テストで得られた新たな情報により、引き続きドキュメントを更新していきます。
HubSpotのCMSには優れたモジュールシステムがあるため、HubSpotのテンプレート言語「HubL」を利用できるCSS、JavaScript、およびHTMLの再利用可能なコードを作成できます。HubSpotのモジュールは、制作担当者に多くの制御と機能を提供する方法として役立ちます。最新のJavaScriptフレームワークには、多くの場合、独自のモジュールシステムがあります。こうしたシステムはそれぞれ独立して設計されています。その結果、課題への対処方法も多様です。
サーバーサイドのレンダリングとは、サーバーのテンプレートロジックからページのHTMLを生成してから、HTMLをブラウザーに送信することです。
クライアントサイドのレンダリングとは、サーバーから軽量の「未完成」版のHTMLを送信し、JavaScriptを使用してHTMLを出力することです。これにより、サーバーからウェブブラウザー（クライアント）側にロジックの処理が移管されます。
ハイドレーションは、両方の手法を組み合わせることです。まず、サーバー側でできるだけHTMLを生成します。次にJavaScript側で、受け取ったHTMLを評価し、ページ上でのユーザーとのやり取りやデータの受領が発生したときに、必要に応じて小さな変更を行います。これにより、クライアントの負荷が軽減され、読み込まれたコンテンツがユーザーに見える状態になるまでにかかる時間も短縮される可能性があります。
HubSpotのCMSでは、HubLがサーバーサイドで処理され、CDNレベルでキャッシュされます。次にJavaScriptを使用して、ブラウザーがサイト訪問者に表示するHTMLのハイドレーション（つまり、クライアントサイドレンダリング）を処理することができます。
企業が成長し、お客様とプロスペクト（見込み客）に適応して問題を解決できるようになるためには、アナリティクス（分析）が重要です。複数のビューを含むシングル ページ アプリを構築する際は、さまざまなビューをページとして表示する訪問者をトラッキングすることをお勧めします。
ほとんどのアナリティクスプラットフォームでは、JavaScriptを使用してこれを行う方法を提供しており、HubSpotもその例外ではありません。アプリでビューが変更されると、ページビューをプッシュします。
HubSpotのモジュールシステムはサーバーサイド モジュール システムです。HubL＋HTMLのパーシャルからHTMLドキュメントを生成するとともに、ページ内の各モジュールの軽量化（ミニフィケーション）されたCSSおよびJavaScriptを生成します。
HubSpotモジュールを使用した開発には、次のようなメリットもあります。
- 制作担当者が、ドラッグ＆ドロップエリアまたはフレキシブルカラムを含むページにモジュールを追加できます。モジュール自体の移動や削除もできます。
- アプリの設定ができるフィールドを制作担当者に提供できます。
- コードは、モジュールが実際に使用されている場合にのみ、ページにレンダリングされます。
Module.cssとmodule.jsは自動的に軽量化されます。
HubSpotモジュールシステムを使用することによる負担は、モジュールを特定のファイルで構成し、コードの通常の配置場所とは別に配置する必要があることです。
アプリはモジュールフレームワーク内ではなく、テンプレートとして構築することもできます。これにより、ファイル構造の柔軟性が高まります。ただし、モジュール提供のようなメリットは得られません。制作担当者はページのドラッグ＆ドロップエリアおよびフレキシブルカラム内にこのアプリを追加できなくなります。
人気のVue.jsフレームワークでは、ビルドステップあり、なしのどちらでも利用できます。各手法の長所と短所の詳細については、Vueのドキュメントを参照してください。HubSpot上では、留意すべき特有の長所と短所があります。
ビルドステップなしのVue.jsは、モジュールに簡単に連携できます。
module.htmlファイル内にrequire_jsを指定してVueライブラリーを追加し、ページにモジュールが追加されたときに1回だけ読み込まれるようにします。
開発中は、devビルドを使用してデバッグに役立つ情報を取得します。本番環境では、特定のVueバージョンのCDN URLを使用するか、それをダウンロードし、HubSpotデベロッパー ファイル システム上にJavaScriptファイルとしてホスティングすることをお勧めします。
Vue.jsの「はじめに」からHTMLコードをコピーし、module.htmlファイルに貼り付けます。HubLとして評価されないように、このコードをHubLのrawタグで囲みます。
Vue.jsの「はじめに」からJavaScriptをコピーしてmodule.jsに貼り付けます。DOMコンテンツの読み込みが終了してから実行されるように、このコードをイベントリスナーで囲みます。モジュールを公開してプレビューします。これで、基本的なVueアプリが機能していることを確認できます。
VueJSアプリのビルドにHubSpotモジュールをご活用いただくためのボイラープレート（ベータ版）を作成しました。最も簡単な利用方法は、CMS CLIでhs create vue-appコマンドを実行することです。手順はリポジトリーに含まれています。
この新しいボイラープレートに関するご意見をお聞かせください。改善可能な点や、発生した問題点をお知らせください。フィードバックのご提供方法としては、GitHubリポジトリーにイシューをお送りいただくことが最適です。
HubSpotのCTAとフォームには独自のスクリプトタグがあり、それぞれ独自のHTMLを管理します。VueコンポーネントがフォームやCTAを変更しないようにするためには、CTA／フォームの埋め込みコードを包含するHTML要素を作成します。その要素にv-onceを適用します。これにより、コードが1回レンダリングされた後は、Vueコンポーネントでそのコードが無視されます。
HubLを使用してモジュールとパーシャルを作成する代わりに、JavaScriptとReactを使用することもできます。JavaScriptのモジュールとパーシャルは、サーバーでレンダリングされたReactコンポーネントをHubLによって生成されたHTMLに組み込む処理に加えて、サーバー側とクライアント側の両方の双方向性をサポートしています。詳しくは、HubSpotのJSビルディングブロックの概要をご覧ください。
また、HubSpotモジュール内でReactアプリを迅速に導入して運用を開始するためのReactボイラープレートをご確認ください。最も簡単な利用方法は、CMS CLIでhs create react-appコマンドを実行することです。ここから、リポジトリー内の手順に従ってください。
この新しいボイラープレートに関するご意見をお聞かせください。改善可能な点や、発生した問題点をお知らせください。フィードバックのご提供方法としては、GitHubリポジトリーにイシューをお送りいただくことが最適です。
現在提供されているさまざまなJavaScriptライブラリーを個別に文書化することは不可能です。HubSpot上でJavaScriptライブラリーを使用する際には、理解しておくべき重要なベストプラクティスがあります。
数多くのモジュールやテンプレートの間でJavaScriptライブラリー共有できますが、このようなライブラリーが複数回読み込まれることを心配する必要はなくなります。そのためには、require_js HubL関数を使用する必要があります。この関数を使用して読み込まれたスクリプトは、このスクリプトを必要とするモジュール数、パーシャル数、テンプレート数に関係なく、ページごとに1回だけ読み込まれます。
{{ require_js(get_asset_url('/js/jquery-latest.js')) }}
{{ require_js("https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js") }}デベロッパー ファイル システム内に保存されたファイルを要求するには、get_asset_url()を使用します。開発ファイルを同じ場所に配置してファイルのセキュリティーを一元管理できるだけでなく、DNSルックアップ数が減少する利点もあります。
requireを使用してパフォーマンスを向上できる理由は、ファイルの読み込みを1回に抑えることだけではありません。ページ上のアセットが特定のライブラリーを必要としない場合、そのライブラリーは全く読み込まれません。HubLロジックとrequireを併用しても、本当に必要な場合にのみリソースが読み込まれます。
貴重なご意見をありがとうございました。