--- title: HubSpot CMS（HubL）でリスト（配列）を極める｜Tips｜日本トップクラスのHubSpotテック企業 株式会社パンセ description: HubSpot CMSに限らず、CMSを扱ううえでよく出くわすのがリストです。ブログ記事一覧やタグ一覧など、いろいろなデータがリストで返ってきますね。このリストですが、個人的に少しクセがあると思っています。リストを取り扱う、整形するにおいてどういう方法がとれるか、コードとともに紹介・解説します。 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 21, 2019, 12:00:00 AM[CMS Hub](https://demo.100inc.co.jp/blog/tag/cms-hub) # HubSpot CMS（HubL）でリスト（配列）を極める ## 目次 1. [目次](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#目次%20解決方法%20loop.last内で希望の処理を行う%20HubSpotモジュールを使用してグローバル変数を作成する%20appendメソッドを使用する%20リストの活用例%20リストをChoiceモジュールに適用する%20「関連記事一覧」から現在閲覧中の記事を除外する%20まとめ) 1. [リストの活用例](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#ex) 1. [リストをChoiceモジュールに適用する](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#ex-1) 2. [「関連記事一覧」から現在閲覧中の記事を除外する](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#ex-2) 2. [目次 解決方法 loop.last内で希望の処理を行う HubSpotモジュールを使用してグローバル変数を作成する appendメソッドを使用する リストの活用例 リストをChoiceモジュールに適用する 「関連記事一覧」から現在閲覧中の記事を除外する まとめ](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#matome) 3. [解決方法 loop.last内で希望の処理を行う まず1番最初は、最も泥臭い方法です。forループ後だと変数から期待する値を取得できないので、forループ内で事を済ませてしまう、という発想です。コードは次のようになります。](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#sol-1) **HubLのアップデートによりできることが増えたため、この記事の内容は非推奨となりました。リスト（配列）やディクショナリ（連想配列）の制御については、[HubL - 配列（リスト）、連想配列（ディクショナリ）に関わる処理まとめ](https://www.pensees.co.jp/hubspot/cms/hubl/array-dict)を参照してください。** HubSpot CMSに限らず、CMSを扱ううえでよく出くわすのがリスト（または配列）です。ブログ記事一覧やタグ一覧など、いろいろなデータがリストで返ってきますね。HubSpot CMSに使われているHubLはPythonのテンプレートエンジンである [Jinja2](http://jinja.pocoo.org/docs/2.10/) の拡張ですので、厳密には配列ではなくリストとなります。 ## HubLのリストに関するハマりやすいポイント このリストですが、個人的に少しクセがあると思っています。実務で直面する課題は - forループ内の変数の状態が、ブロックスコープ外に持ち出せない - JavaScriptでいうpush/pop/shiftなどのメソッドが豊富でなく、データの整形が難しい（上記にも関連しますが） あたりです。 特にforループ内の変数の状態をブロックスコープ外に持ち出せない問題は深刻で、JavaScriptに慣れているフロントエンドエンジニアにはなかなかつらい制約です。例えば次のコードは、forループ後の変数で期待通りの値を取得できません。 ```   ``` そもそもpushメソッドがないので文字列結合するしかないわけですが、それすら期待する値が取得できない訳です。 forループ内で直接HTMLを書いていたりする場合は、あまりこれで困ることはないかもしれません。しかし出力が複雑な場合や、繰り返し出てくるロジックをmacroとして外部化している場合は、どうしてもリストを整形しておきたいケースがあります。その場合に使用できる解決方法を幾つかご紹介します。 なお前提として、データは単純なリストではなく、以下のようにリストの中にディクショナリが格納されている例で示します。blog\_recent\_posts関数や、hubdb\_table\_row関数で取得した返り値の形ですね。このリストから、各ポスト名だけを抽出したリストを作成し、そのリストを「post\_list」macroに渡し、出力することをゴールとします。 **元データ** ``` [ { name : 'ポスト名1' , abusolute_url : 'https://example.com/post1' , featured_image : 'https://example.com/assets/img/post1.png' }, { name : 'ポスト名2' , abusolute_url : 'https://example.com/post2' , featured_image : 'https://example.com/assets/img/post2.png' }, { name : 'ポスト名3' , abusolute_url : 'https://example.com/post3' , featured_image : 'https://example.com/assets/img/post3.png' } ] ``` **データを受け取るmacro** ``` ``` ## 目次 1. [解決方法](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#sol) 1. [loop.last内で希望の処理を行う](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#sol-1) 2. [HubSpotモジュールを使用してグローバル変数を作成する](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#sol-2) 3. [appendメソッドを使用する](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#sol-3) 2. [リストの活用例](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#ex) 1. [リストをChoiceモジュールに適用する](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#ex-1) 2. [「関連記事一覧」から現在閲覧中の記事を除外する](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#ex-2) 3. [まとめ](https://demo.100inc.co.jp/blog/tips/hubspot-cms-list-array#matome) ## 解決方法 ### loop.last内で希望の処理を行う まず1番最初は、最も泥臭い方法です。forループ後だと変数から期待する値を取得できないので、forループ内で事を済ませてしまう、という発想です。コードは次のようになります。 ``` ``` まず1つ目のループ（loop.first）で変数の初期化を行います。リストに対する追加メソッドがないので、結局文字列型としています。ループ毎にポスト名（post.name）をpost\_names変数に追加していき、最後のループ（loop.last）でmacroに変数を渡します。loop.firstとloop.lastはforループ内に予め用意されている予約変数です（参考：[For loops | HubL Reference](https://designers.hubspot.com/docs/hubl/for-loops)）。 このとき変数に格納されている値は文字列型ですので、macroに渡すときに[splitフィルタ](https://designers.hubspot.com/docs/hubl/hubl-supported-filters#split)を使用してリストに変換しています。これで見事、期待する形でデータが表示されます。 ![macroが出力したデータ](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/hs-cms-list01.png) macroが出力したデータ しかしまぁ、いかんせん泥臭いのと、ループがネストされると可読性がどんどん悪くなります。 ### HubSpotモジュールを使用してグローバル変数を作成する 次に紹介するのは、HubSpotのTextモジュールを使用してforループ内から擬似的にグローバル変数を作成する方法です。とはいってもグローバルに定義しますので、乱用は禁物です。ほぼ裏技みたいなものですね……。コードは次のようになります。 ```   ``` まず本筋ではありませんが、変数名が紛らわしいためforループ内でのみ使用するpost\_namesは「post\_names\_in\_loop」という名前に変更しました。 loop.lastでmacroを呼び出すのではなく、Textモジュールを設置します。valueのダブルクォーテーションの中で変数展開することによってpost\_names\_in\_loopの文字列（「ポスト名1,ポスト名2,ポスト名3,」）をTextモジュールに設定できます。Textモジュールは値のみを使用するため、export\_to\_template\_contextをTrueに設定します。またこのままだとページ編集画面などでTextモジュールの編集が可能な状態ですので、overrideableをFalseに設定します。 これでグローバル変数のように、どこからでも値にアクセスできるようになりました。後はforループの外でmacroを呼び出すと、1つ目の方法と同じように期待通りに各ポスト名が出力されます。 ### appendメソッドを使用する 最後に紹介するのは、appendメソッドを使用するです。「pushのようなメソッドは無いのでは？」と思われるかもしれませんが、それはそれでその通りです。HubLやJinja2に配列の末尾に要素を追加するメソッドはありません。このappendメソッドはPythonのメソッドです。そのため、これもまた裏技というか、かなり非公式な方法になります……。が、この方法が1番シンプルで綺麗です。 コードは次のようになります。 ```   ``` かなりスッキリしましたね。変数も、最初から文字列型ではなくリストで初期化しています。そのためmacroに渡すときも、いちいちsplitフィルタを使う必要がありません。注意点として、まずappendメソッドを使用するには式デリミタ（波括弧2つ）内でなければなりません。 次の注意点として、このスタイルでappendメソッドを使用すると、返り値としてBooleanのtrueを返します。そのため、何もしないと「true」という文字が出力されていまいます。 ![appendメソッドの返り値のtrueが表示されている](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/hs-cms-list02.png) appendメソッドの返り値のtrueが表示されている この「true」を出力しないために[cutフィルタ](https://designers.hubspot.com/docs/hubl/hubl-supported-filters#cut)を使用してtrueを削除しています。文字列のためのcutフィルタをBooleanに使っていいのかって感じですが……。とにかく、これで無駄なものは表示されず、かつコードもかなりスッキリしました。HubLドキュメントにもJinja2ドキュメントにも書いていない非公式な方法ではありますが、Pythonのメソッドであればいきなり使えなくなることもないだろうと踏んで、現在私は主にこの方法を使用しています。 ## リストの活用例 データの整形は今まで紹介した形で概ねできるようになりましたので、ここからは実際の活用例を紹介します。 ### リストをChoiceモジュールに適用する Choiceモジュールとは、ページ編集画面でこのUIを提供するモジュールですね。 ![Choiceモジュール](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/hs-cms-list03.png) Choiceモジュール 通常通り使用するには、次のように「choices」属性にカンマ区切りで値を設定することにより、それぞれが選択肢として認識されます。 ``` ``` 先ほど整形したデータをChoiceモジュールに渡すには、次のようにchoices属性の中で式デリミタを使用します。 ``` ``` ![変数が展開され、Choiceモジュールに適用された](https://cdn2.hubspot.net/hubfs/3111128/how-to-hubspot/tips/img/hs-cms-list04.png) 変数が展開され、Choiceモジュールに適用された なおChoiceモジュールがchoicesの値として受け付けるのは、カンマ区切りの文字列型です。appnedメソッド以外でデータを整形する方法は最初から文字列型なのでよいですが、appendメソッドを使用してデータを用意した場合は、Choiceモジュールに渡す前に[joinフィルタ](https://designers.hubspot.com/docs/hubl/hubl-supported-filters#join)を使用して文字列型に変換しておく必要があります（choicesのクォーテーション内でjoinフィルタを使用しても、上手くいきません）。 **リストをChoiceモジュールに設定する場合** ``` ``` ### 「関連記事一覧」から現在閲覧中の記事を除外する よくブログポスト画面で、同じタグが付いているポストを「関連記事」として表示したいことがあると思います。1番手っ取り早いベストプラクティスは[Blog related postsタグ](https://designers.hubspot.com/docs/hubl/hubl-supported-tags#blog-related-posts)を使用することですが、macroを多段に使用していたりなど、ときに使用しづらいこともあると思います。 そんなときは[blog\_recent\_tag\_posts関数](https://designers.hubspot.com/en/docs/hubl/hubl-supported-functions#blog-recent-tag-posts)を使用して同一のタグを含むポストを取得する訳ですが、普通にやると現在閲覧中の記事まで関連記事に出てしまいます。そんなときに、appendメソッドを使用して現在閲覧中の記事を除外するリストを作成することが可能です。コードは次の通りです。 ```     ``` ちょっと複雑になってしまいましたね。1つずつ解説します。 - blog\_recent\_tag\_posts……タグは簡易に、現在閲覧中の記事の1つ目を指定しています。今回出力したい関連記事は3件ですが、件数は4件取得します。これは現在閲覧中の記事を除外する可能性も考慮しなければならないためです。 - posts\_count……取得した関連記事に万が一現在閲覧中の記事が含まれていない場合、4件出力されてしまいます。そのため、件数を制御するためにカウンターも用意します。 これでposts変数には、現在閲覧中の記事を除外した3件の記事のディクショナリがリストとして格納されています。 ## まとめ 以上、HubLでリストを扱う際の方法と、活用例をご紹介しました。解決方法については、結局どれも若干モヤっとするところはありますが、テンプレートエンジンなので表現力に乏しいのは仕方ないですね。HubSpot CMSのテンプレートを開発するにおいてリストは避けて通れませんので、何かの際に、ご参考になれば幸いです。 - [シェア](https://www.facebook.com/sharer.php?u=https%3A%2F%2Fdemo.100inc.co.jp%2Fblog%2Ftips%2Fhubspot-cms-list-array) - [ツイート](https://twitter.com/share?text=HubSpot+CMS%EF%BC%88HubL%EF%BC%89%E3%81%A7%E3%83%AA%E3%82%B9%E3%83%88%EF%BC%88%E9%85%8D%E5%88%97%EF%BC%89%E3%82%92%E6%A5%B5%E3%82%81%E3%82%8B%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%2Fhubspot-cms-list-array) 執筆者：[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