CTAボタン付きHeroモジュールにチャレンジしてみた【HubSpot×React Day8】

はじめに 🌿

HubSpotのReactモジュールで、ヒーローセクションにCTAボタンを入れたい！
そう思って、試しにいろいろやってみた日の記録です🐾

この記事でわかること ✏️

• HubSpot CMS × ReactでCTAを使おうとしたときの実験記録

• CTAField を使おうとしたときに出てきたエラーとその背景

• 今のところの代替案と、次に試したいことメモ

結論 🎯

2025年5月6日時点で試したところ、Reactモジュール内で CTAField を使うことはできませんでした。
とはいえ、代わりに UrlField を使えば、リンクを指定できるボタンとしての表現は問題なく実現できました◎

やり方の概要 🛠️

Reactモジュールの fields に UrlField を追加して、fieldValues.ctaUrl として読み取る形に。
そのリンク先を使ってカスタムのCTAボタンを表示する方法で、今回は対応しています。

つまずきポイント ⚡

CTAField を使いたくて、この公式ドキュメント を参考にしてみましたが、
return で返す際の形式に関する記述が見受けられず、React内でどう扱えばよいかが不明でした。

また、試行錯誤の中で以下のようなエラーも発生：

SyntaxError: The requested module '@hubspot/cms-components/fields' does not provide an export named 'CTAField'

どうやら CTAField は現在の @hubspot/cms-components には含まれていないようです？😖

まとめ ✨

今回は UrlField を使うことで実装自体はうまくいきました。
情報がいろいろ揃ってきたら、また CTAField を使った方法にもリトライしてみたいと思っています✏️

もし、Reactモジュールで CTAField をうまく使えている方がいれば、ぜひ教えていただけるとうれしいです ><！