Skip to content
気ままに、ちまちま。テックと日常。

【HubSpot】はじめてのHubSpotサーバーレス関数（前編）：まずは動かしてみよう🧪

【HubSpot】はじめてのHubSpotサーバーレス関数（前編）：まずは動かしてみよう🧪
6:45
目次

✅ はじめに

HubSpotでブログやページを作っていると、「ちょっと動的な処理を入れたいな…」「外部サービスと連携したいな…」と思うこと、ありませんか？

そんなときに便利なのが、HubSpotのサーバーレス関数です。
JavaScript / Node.js で書けて、サーバー側での処理を簡単に追加できる仕組みなんです💡

たとえば、こんなことができるようになります👇

  • 🔄 外部システムからデータを取得して、ページに動的に表示

  • 📝 フォーム送信を受け取って、HubDBやHubSpot CRMにデータを保存

  • 🧮 ブラウザ側では扱いにくい複雑な計算や認証処理をサーバー側で実行

  • 📤 フォーム送信と同時に、別のシステムにもデータを送信

🔗 公式ドキュメントはこちら → Serverless functions overview

今回は、そんなサーバーレス関数の「いちばん最初の一歩」として、Hello World を表示する関数を動かしてみるところまでをやってみます🧪

「設定とか難しそう…」と思った方も、だいじょうぶ。
コピペだけでもOK！ 実際に手を動かしながら、サクッと動かす体験を一緒にしてみましょう🙌

DALL·E 2025-03-24 20.04.40 - A soft and cute illustration of a young woman (developer or blogger style) sitting at a desk with a laptop, raising her fist slightly in a small let

 

⚙️ 準備しよう

まずは、HubSpotのサーバーレス関数を動かすために必要な準備をしていきます。

✅ 必要なもの

以下の3つがあればOKです！

  1. HubSpot アカウント
    1. Content Hub (CMS Hub) Enterprise もしくは CMS開発者用サンドボックスアカウント
    2. CMS開発者サンドボックスアカウントは一部制限はあるものの無料でつくれるよ～（参考）
  2. HubSpot CLI
    1. ローカル開発をするためのコマンドラインツール
  3. エディタ
    1. エディタ（VSCodeなど）
  4. 作業ディレクトリ
    1. 作業をすすめるためのフォルダを用意

📍 VSCodeでHubspot CLIの拡張機能をいれると、２と３がまとめて用意できるのでおすすめ！また今回は特定の作業ディレクトリ内で進めるので、特定のディレクトリに対してインストールしておくのが良いです

 

🔐HubSpot CLIと接続しよう

HubSpot CLIが使えるようになったら、ターミナルで hs init (初回認証) もしくは hs auth (追加のアカウントを認証) でアカウントを接続します。

詳しくは👇を参照です：

📍この記事では、VSCodeの拡張機能を使用する前提にて解説します

🧪 サーバーレス関数を体験しよう

今回は hello-world という名前の関数を作って、/_hcms/api/hello-world にアクセスしたときに
「Hello from HubSpot Serverless Functions!」というメッセージが返る処理を作ってみます！

📁 まずはファイルを用意しよう

まず、ローカルに hello-world というフォルダを作成します。
その中に、HubSpotのサーバーレス関数用フォルダとして hello-world.functions を作成しましょう～

この .functions フォルダの中に、次の2つのファイルを作成します：

  • hello-world.js：関数の本体

  • serverless.json：この関数のルートや設定を記述するファイル

※VSCode の場合は👇のアイコンからフォルダやファイルが作れるよ

serverless-func06

📁 フォルダ構成は以下のようになります：

hello-world/
└── hello-world.functions/
    ├── hello-world.js
    └── serverless.json
 
 

📝hello-world.js に関数を書いてみよう

ひとまずはコピペでOK！👇のコードを先ほど作った hello-world.js に書きます。

// hello-world.js exports.main = async (context = {}, sendResponse) => { sendResponse({ statusCode: 200, body: JSON.stringify({ message: "Hello from HubSpot Serverless Functions!" }), }); };

 

🧠 補足）このコードって何してるの？

コード 説明
exports.main HubSpotが実行する関数のエントリーポイント
context リクエスト情報（今回は未使用）
sendResponse() ブラウザに返す内容を指定する関数
statusCode: 200 HTTPステータスコード「成功」
body JSONで返すデータ（ここではメッセージ）

 

🧾 serverless.json を書こう

同じフォルダ内の serverless.json には、この関数をどう呼び出すか を定義します👇

{
    "runtime": "nodejs18.x",
    "version": "1.0",
    "endpoints": {
   "hello-world": {
     "method": "GET",
     "file": "hello-world.js"
   }
 }
}

 🔍 補足）この設定の意味

項目 意味
"runtime" 使用するNode.jsのバージョン（現時点で推奨は nodejs18.x）
"version" 定義ファイルのバージョン（基本 1.0 でOK）
"endpoints" この関数で使うエンドポイントの一覧
"hello-world" 実際のパス（/_hcms/api/hello-world）になる
※ サーバーレス関数は、HubSpot CMSアカウントのドメインのパスを通して公開されます。
"method" HTTPメソッド（GET, POSTなど）
"file" 呼び出すJSファイル名（このフォルダ内にある hello-world.js）

それぞれのファイルがちゃんと保存されていることを確認！💾

＊hello-world.js ファイル

serverless-func07

＊serverless.json ファイル

serverless-func08

📤 アップロードしよう！

 hs upload コマンドを使って、Hubspot のデザインマネージャーに作成したファイルをアップロードします📤

今回は "hello world" フォルダを デザインマネージャー側にも作成したいので、
hs upload hello-world hello-world
の形で実行します。

［SUCCESS］が表示されたら、Hubspot のデザインマネージャーの画面をリロードして "hello-world" のフォルダができているかを確認します。

serverless-func09

🌐 動作確認！

アップロードが完了したら、ブラウザで以下のURLにアクセス👇
https://[あなたのドメイン (HubSpot CMS で使っているドメイン)]/_hcms/api/hello-world

👇のように{"message":"Hello from HubSpot Serverless Functions!"}
と表示されれば、大成功〜！🎉💻✨

serverless-func10

 

🐣 おわりに

今回は、HubSpotのサーバーレス関数を使って「Hello World」を返すシンプルな関数を作ってみました。
.functions フォルダの中に hello-world.js と serverless.json を用意するだけで、意外とあっさり動いた！と思った方もいるかもしれません🧪

HubSpot CMSはフロント寄りな印象がありますが、
サーバーレス関数を使えば「ちょっとしたバックエンド処理」も自分で組み込めるようになります。

🔄 外部APIを呼び出したり、
📝 フォーム送信データを加工したり、
 🗃️ HubDBやCRMと連携することも！

その第一歩として、今回の記事が参考になればうれしいです🌷

DALL·E 2025-03-24 21.44.55 - A soft and cute, chibi-style illustration of a young woman sitting with a closed laptop beside her, holding a warm drink like coffee or tea, and smili

次回の中編では、実際のAPIを呼び出す関数に挑戦します！
 
 
 
 
,
Reina

Written by Reina

HubSpot CMS (現 Content Hub) をメインに 気になったことをまとめます。猫が好きです

Read On