✅ はじめに

前編では、HubSpotのサーバーレス関数を使って「Hello World」を返す関数をつくってみました。
関数をフォルダで管理したり、serverless.json でエンドポイントを指定したり、
HubSpotでちょっとしたサーバー処理ができることを体験できたと思います🧪

中編ではいよいよ、外部の公開API（The Cat API）を fetch してデータを取得することにチャレンジします！

サーバーレス関数の本領発揮は、やっぱり「どこかのAPIと連携してデータを使う」とき✨

今回は
🐱 かわいい猫の画像を外部APIから取得して
🎨 その画像をHubSpotのページに表示する
というところまでをゴールに進めていきます！

「サーバーとやり取りできるってこういうことか〜！」と実感できる、やさしくて実用的なステップなので、
ぜひ一緒に楽しみながらやってみましょう🐾💻🌸

🐱 Cat API を使うよ

今回使うのは、The Cat APIという公開APIです。
アクセスするたびに、いろんな猫ちゃんの画像を返してくれるという、癒しのAPI🐾
公式でも “Cats as a service” というキャッチコピーを使っていて、遊び心も満点です！

🌐 こんなAPIもあるよ（気軽に使える公開APIの例）

• JSONPlaceholder：ダミーの投稿・ユーザー情報など（テスト用途にぴったり）

• Dog API：犬画像が返ってくるAPI 🐶

• Bored API：退屈な時にやることを提案してくれるAPI🎲

• OpenWeatherMap：天気API（APIキー必須だけど無料プランあり）

🧪 今回使うエンドポイント

https://api.thecatapi.com/v1/images/search

このURLに GET リクエストを送ると、ランダムな猫画像が1件返ってきます。

🔍 返ってくるデータの例

📝 関数を作ってみよう！

ではさっそく、Cat API を呼び出すサーバーレス関数を作ってみましょう！

📁 フォルダ構成を用意する

まずは、以下のようなフォルダを用意します👇（基本的な流れは前編と同じ！）

fetch-cat/
└── fetch-cat.functions/
    ├── fetch-cat.js
    └── serverless.json

それぞれのファイルを、以下のように作っていきます。

🐾 fetch-cat.js（関数の本体）

💡 解説

• fetch() でCat APIにアクセス

• await response.json() でレスポンスの中身を取り出す

• そのまま sendResponse() で返すことで、ページからアクセスできるようにします

🐌 さらに解説！

✅ await ってなに？

const response = await fetch('https://api.thecatapi.com/v1/images/search');

await は「この処理が終わるまで待つ」という意味！
👉 APIにリクエストして、返事が返ってくるまで待つ って意味

✅ response.json() ってなに？

const data = await response.json();

APIの返してきたレスポンス本文を、JSONとして取り出すという意味
👉 The Cat API は JSON 形式でデータを返してくれるから、それをちゃんと使える形にするために .json() を使ってる🐱

✅ sendResponse({ statusCode: 200, body: ... }) は？

• statusCode: 200 は「成功したよ！」っていうHTTPの合図
• body に返すデータ（この場合は猫画像の情報）を文字列で渡してる

👉 JSON データを返すには、JSON.stringify(...) で文字列に変換する

✅ catch (error) { ... } の中身は？

} catch (error) {
  sendResponse({
    statusCode: 500,
    body: JSON.stringify({ error: 'Cat API fetch failed' }),
  });
}

1. try { ... } で fetch の処理をして
2. もしエラー（通信失敗、APIの返答が不正など）が起きたら
3. catch に入り、500（サーバーエラー）とエラーメッセージを返す

👉 問題があった時にユーザー側で「うまくいかなかった」ってわかるようになってる 🐾

📄 serverless.json（関数の設定ファイル）

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

これで /fetch-cat.functions/ の中にある fetch-cat.js を
/_hcms/api/fetch-cat というURLで呼び出せるようになります！

🌎 関数を呼び出して確認しよう！

関数と設定ファイルの準備ができたら、さっそくHubSpotにアップロードして、実際に動かしてみましょう🧪✨

🚀 アップロードしよう

hs upload コマンドを使って、デザインマネージャー上にアップロードしましょう

🌐 URLでアクセスしてみよう！

アップロードが完了したら、以下のURLにアクセスします👇

https://[あなたのドメイン(HubSpot に接続しているドメイン)]/_hcms/api/fetch-cat

成功していれば、こんな👇JSONが表示されるはずです🎉

✅ 実際の画像URLをブラウザで開くと…かわいい猫ちゃんに会えます🐱💕

❓うまくいかない時は…

• 関数名や serverless.json の "file" が間違ってないか確認

• 関数がアップロードされた先のパスと、URLのパス（fetch-cat）が一致してるか確認

• 開発者ツールのconsole にエラーが出ていれば、catch の部分で返されたメッセージを参考にする

🎨 取得した画像をページに表示してみよう！

せっかく猫ちゃんの画像URLが取れたので、それをページに表示してみましょう！
ここでは、HubSpotのページ内に JavaScript を使って猫画像を埋め込む方法を紹介します💡

✅ どんな仕組み？

• HTMLに表示エリア（div）を用意しておいて

• JavaScriptの fetch() で /fetch-cat 関数を呼び出して

• 取得した画像URLを <img> タグに反映する
  という流れです🐾

✨ 表示の方法

今回はテスト用のページテンプレートを作ってそこに表示させるコードを入れてこうと思います🐾（もちろん既存のページテンプレートやカスタムモジュールで応用してもOK！）

1. デザインマネージャーを開く
2. 新しいテンプレートを作成
   📄 名前：fetch-cat.html とか！
3. テンプレートに以下を貼り付けて保存＆プレビュー✨

🧪 テンプレート例 

👇はボイラープレート テンプレートを使用した場合

🔍 解説

※ 新しいテンプレートファイルを作成した場合は、<dody> 内にある {% dnd_area "dnd_area" ... を削除した上で（ドラッグアンドドロップエリアは不要なので）、<div ...> </div> の間のコードを使ってね

テンプレートが書けたら変更を公開して、プレビュー！

👇のように かわいい猫画像がロードされたら大成功です！🎉👏

🐱 おわりに

今回は、前編で作ったサーバーレス関数をベースに、
外部の公開API（The Cat API）をfetchしてデータを取得するという体験をしてみました🐾

ただデータを取得するだけでなく、取得した画像をページに表示するところまでやってみると、
「HubSpot CMSでも、動的な表示ができるんだ！」という実感が持てたのではないでしょうか？🖼️✨

💡 今回のポイントをふりかえると…

• fetchの使い方（await / response.json()）を体験できた

• サーバーレス関数の返り値を、JavaScriptでページに反映する方法を知れた

• エラーハンドリングや初期表示（Loading）など、実用のヒントもちょこっと登場◎

次回の後編では、いよいよHubSpot APIと連携して、
より実践的な使い方にステップアップしようと思います～

すこしずつ、「できる」が増えていく感覚を大事にしながら、
ぜひ引き続きチャレンジしてみてくださいね🧪🐱🌸