---
title: HubLの変数と文字列の結合を楽に行う｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ
description: HubLで変数と文字列の結合をするとき、通常はクォーテーションと変数を切り替えて文字列を結合すると思います。JavaScriptでいえば、いわゆるES5的な方法ですね。しかしいかんせんこの結合方法はめんどくさいと思います。本記事では、楽に結合できる方法を2つご紹介します。
image: https://demo.100inc.co.jp/hubfs/Imported%20images/logo.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)

Jun 25, 2019, 12:00:00 AM[CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub)

# HubLの変数と文字列の結合を楽に行う

## 目次

HubLで変数と文字列の結合をするとき、通常は次のコードのように行うと思います。JavaScriptでいえば、いわゆるES5的な方法ですね。例えば今回は複数の変数を使用して、1つのclass属性値を作りたいとしましょう。コードの可読性のために、class属性内でhogeやfugaを展開するのはではなく、予めclass属性値を1つの変数にまとめる形とします。

```
     

   

   

   
 
   
<p
 
class
=
"hoge fuga piyo"
>
テキストが入ります
</p>
   
↓出力結果
   
<p
 
class
=
"hoge fuga piyo"
>
テキストが入ります
</p>
  
```

いかんせん、いちいちクォーテーションを切り替えて文字列を結合するのがめんどくさいですね。これを楽にする方法として、次の2つがあります。

## JavaScriptのテンプレートリテラルっぽく記述する方法（ハック）

JavaScriptではES2015からテンプレートリテラルが導入され、こういうったケースの変数と文字列の結合がだいぶ楽になりました。実はHubLでも、書き方を工夫すると似たようことを実現できるようになります。class\_valの定義を次のように記述します。

```
     

  
```

ただしこれはハックレベルのものなので、今回のようなシンプルなコードでは動作しますが、この変数をまた別の変数に渡したりすると、期待通りに動作しません。

## リストを作ってその場でjoinする方法

こちらは公式ドキュメントに記載されている方法の組み合わせですので、胸を張ってオススメできます。一時的にリストを作成し、その場で[joinフィルタ](https://designers.hubspot.com/docs/hubl/hubl-supported-filters#join)を使って文字列として結合します。次のようなコードです。

```
     

   

   

   
 
   
<p
 
class
=
"hoge fuga piyo"
>
テキストが入ります
</p>
   
↓出力結果
   
<p
 
class
=
"hoge fuga piyo"
>
テキストが入ります
</p>
  
```

これだけのシンプルな方法ですが、これをするだけでそれなりに開発が楽になり、またコードの可読性が向上することによりミスも減ると思います。ぜひご活用ください。

- [シェア](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fjoin-vars-strings-easily)
- [ツイート](https://twitter.com/share?text=HubL%E3%81%AE%E5%A4%89%E6%95%B0%E3%81%A8%E6%96%87%E5%AD%97%E5%88%97%E3%81%AE%E7%B5%90%E5%90%88%E3%82%92%E6%A5%BD%E3%81%AB%E8%A1%8C%E3%81%86%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%2Fjoin-vars-strings-easily)

執筆者：[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