---
title: ワークフローのカスタムコードで複雑なことをするのはつらい｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ
description: Operations Hub Profesionalプラン以上で使えるワークフローのカスタムコードアクションはコードを書くことで何でもできるので便利ですが、複雑なことをしようと思うと次の理由から結構大変です。1. 標準で提供されているライブラリが限られている。 2. モジュールバンドラとワークフロー上の仕組みの相性が悪い。 3. コード分割ができない
image: https://demo.100inc.co.jp/hubfs/Imported_Blog_Media/workflow-auth-user-right-Dec-30-2022-06-41-06-3486-AM.png
---

[![株式会社100ロゴ](https://demo.100inc.co.jp/hs-fs/hubfs/Imported%20images/logo.png?width=60&height=45&name=logo.png)](https://demo.100inc.co.jp)

Dec 19, 2022, 12:00:00 AM[Operations Hub](https://demo.100inc.co.jp/blog/tag/operations-hub)

# ワークフローのカスタムコードで複雑なことをするのはつらい

![altテキスト](https://demo.100inc.co.jp/hs-fs/hubfs/Imported_Blog_Media/workflow-auth-user-right-Dec-30-2022-06-41-06-3486-AM.png?width=746&name=workflow-auth-user-right-Dec-30-2022-06-41-06-3486-AM.png)

## 目次

Operations Hub Profesionalプラン以上で使えるワークフローのカスタムコードアクションはコードを書くことで何でもできるので便利ですが、複雑なことをしようと思うと結構大変です。

## つらいポイント1. 標準で提供されているライブラリが限られている

まず標準で利用できるNode.jsライブラリが下記に限定されています（2022年12月現在）。

- @hubspot/api-client ^3.4.1
- async ^3.2.0
- aws-sdk ^2.858.0
- axios ^0.20.0
- lodash ^4.17.20
- mongoose ^5.11.19
- mysql ^2.18.1
- redis" ^3.0.2
- request" ^2.88.2
- bluebird 3.7.2
- random-number-csprng 1.0.2
- googleapis 67.1.1

これだけたくさんあれば多くの場合は何とかなりますが、地味にday.jsが無いのはキツかったりします。そうなると自前で使いたいライブラリを `import` しようと思い付く訳ですが、ワークフロー上ではファイルシステムがなく当然 `import` などは使えませんので自前で用意したライブラリを含めてバンドルする必要があります。

## つらいポイント2. モジュールバンドラとワークフロー上の仕組みの相性が悪い

ワークフロー上では既にHubSpotのAPIクライアントが用意されているため、`const hubspot = require('@hubspot/api-client');` でAPIクライアントが使えます。これ自体は非常にありがたいです。

しかし一方でローカルで開発し、デバッグもするので当然ローカルのファイルでも上記コードを含みます。そして自前のライブラリをワークフロー上で利用するためにwebpackなどでバンドルすると、HubSpotのAPIクライアントもバンドルされたファイルが出来上がります。 これがまたファイルサイズがかなり重いのでワークフロー上にバンドル後のコードをそのまま載せる訳にはいきません。

そのためなるべくファイルサイズを減らすべく Tree Shaking や Split Chunks など試行錯誤するのですが、それでもAPIクライアント自体が元々かなり重いためなかなか500KB以下にはなってくれないのが実情です。また Split Chunks してしまうとAPIクライアントに対する依存を手動で書き換えなければならないため、これまた面倒です。

## つらいポイント3. コード分割ができない

上記の理由からモジュールバンドラとの相性がかなり悪いので、複数のカスタムコードアクションで共通の処理を抜き出そうとしても、コード分割& `import` ということができません（できますが、上記バンドラとの相性の悪さを頑張って克服する必要があります）。

## 結論

ちょろっとAPI叩いて何かする…程度のものであればカスタムコードアクションでもよいかもしれませんが、要件が結構複雑であったり、複数のカスタムコードアクションに別れる場合は、カスタムアクションを作成するか、Webhookとしてデータを飛ばしてWebhookのデータを受ける側で処理をさせた方が良いように思います。  
HubSpotのプロジェクトを利用すればサーバーレス関数を生やせるので、処理をそこに投げられればホスティングの面倒も見ずに済むのでラクそうですね（プロジェクトにはプロジェクトのつらいポイントがあるかもしれませんが…）。  
検証した結果、プロジェクトのサーバーレス関数でも自分で書いたコードの import は出来ませんでした。CMS Hubのサーバーレス関数は検証していませんが、恐らく同様に不可能な気がします。結局 webpack などを使わざるを得ないため、HubSpotのAPIクライアントの利用をやめ、APIを axios などで直接叩くようにすればバンドルサイズが減らせるように思います。

- [シェア](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Ftsurai-workflow-custom-code-action)
- [ツイート](https://twitter.com/share?text=%E3%83%AF%E3%83%BC%E3%82%AF%E3%83%95%E3%83%AD%E3%83%BC%E3%81%AE%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%A0%E3%82%B3%E3%83%BC%E3%83%89%E3%81%A7%E8%A4%87%E9%9B%91%E3%81%AA%E3%81%93%E3%81%A8%E3%82%92%E3%81%99%E3%82%8B%E3%81%AE%E3%81%AF%E3%81%A4%E3%82%89%E3%81%84%EF%BD%9CTips%EF%BD%9C%E6%97%A5%E6%9C%AC%E3%83%88%E3%83%83%E3%83%97%E3%82%AF%E3%83%A9%E3%82%B9%E3%81%AEHubSpot%E3%83%86%E3%83%83%E3%82%AF%E4%BC%81%E6%A5%AD+%E6%A0%AA%E5%BC%8F%E4%BC%9A%E7%A4%BE%E3%83%91%E3%83%B3%E3%82%BB&url=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Ftsurai-workflow-custom-code-action)

執筆者：[Admin](https://demo.100inc.co.jp/blog/author/admin)

## 関連記事

## 人気の記事

- Nov 22, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [カスタムモジュールのリピートコンテンツの入力が面倒な場合の対処法](https://demo.100inc.co.jp/blog/tips/resolve-hassle-of-repeater)
- Dec 30, 2022, 3:22:31 PM
    - [#sample](https://demo.100inc.co.jp/blog/tag/sample)
  
  
  [テストpost（複製）](https://demo.100inc.co.jp/blog/アカデミー練習-1-0)
- Jun 20, 2019, 12:00:00 AM
    - [CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)
  
  
  [CSSやJSの修正をすぐに確認したければ、プレビューURLで](https://demo.100inc.co.jp/blog/tips/check-update-on-preview-url)
- Dec 11, 2017, 12:00:00 AM
    - [ブログ](https://demo.100inc.co.jp/blog/tag/ブログ)
  
  
  [INBOUND 2017参加レポート サブセッション編](https://demo.100inc.co.jp/blog/tips/inbound-2017-subsessions)
- May 9, 2024, 1:20:53 PM
    - [#通常のタグ](https://demo.100inc.co.jp/blog/tag/通常のタグ)
  
  
  [test](https://demo.100inc.co.jp/blog/test-shida)

© Pensees

```json
{
  "@context" : "https://schema.org",
  "@type" : "BlogPosting",
  "author" : {
    "@type" : "Person",
    "name" : "Admin"
  },
  "dateModified" : 1672469461892,
  "datePublished" : 1671375600000,
  "headline" : "ワークフローのカスタムコードで複雑なことをするのはつらい｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ",
  "image" : [ "https://5692228.fs1.hubspotusercontent-na1.net/hubfs/5692228/Imported_Blog_Media/workflow-auth-user-right-Dec-30-2022-06-41-06-3486-AM.png" ],
  "mainEntityOfPage" : {
    "@id" : "https://demo.100inc.co.jp/blog",
    "@type" : "WebPage"
  },
  "publisher" : {
    "@type" : "Organization",
    "logo" : {
      "@type" : "ImageObject",
      "url" : "https://5692228.fs1.hubspotusercontent-na1.net/hubfs/5692228/Imported%20images/logo.png"
    },
    "name" : "株式会社100"
  }
}
```