【Shopify】Liquidの変数「assign」「caption」について解説！

Liquidテンプレート言語とは？

Shopifyが開発したオープンソースのテンプレート言語です。

この言語は、Rubyベースで設計されており、動的なコンテンツを生成するために使用されます。Liquidは、静的なHTMLと動的なデータを結びつけることで、ECサイトに特化した機能を提供します。

最大の特徴は、そのシンプルさと柔軟性です。
プログラミング経験が少ない人でも比較的容易に習得できるため、多くのユーザーが利用しています。また、LiquidはShopifyプラットフォームと密接に統合されており、商品情報や顧客データなどに直接アクセスできるため、ECサイトの構築やカスタマイズが容易になります。

セキュリティ面でも配慮されており、悪意のあるコードが実行されるリスクを低減するために、直接的なファイルシステムへのアクセスや任意のRubyコードの実行は制限されています。
さらに、高いパフォーマンスを実現するために最適化されており、テンプレートはコンパイルされてキャッシュされることで、繰り返し使用される場合の処理速度が向上します。

Liquidの変数宣言は「assign」と「capture」の2種類

Liquidの変数宣言には主にassignタグとcaptureタグの2つの方法があります。それぞれの特徴と使い分けは以下の通りです。

assignタグの特徴

• 単純な値(文字列、数値、真偽値など)を変数に代入するのに適しています。
• 1行で簡潔に記述できます。
• 数値計算や条件分岐の結果を変数に格納するのに便利です。

captureタグの特徴

• 複数行にわたる内容や、HTMLタグを含む複雑な文字列を変数に格納できます。
• Liquidのタグや制御構文を含めることができます。
• 開始タグと終了タグで囲む形式で記述します。

assignとcaptureの使い分け

• 単純な値を代入する場合はassignを使用します。
• HTMLやLiquidのコードを含む複雑な文字列を格納する場合はcaptureを使用します。
• 条件分岐や繰り返し処理の結果を変数に格納したい場合はcaptureが適しています。

例えば、商品名を変数に格納する場合はassignを使い、商品の詳細情報をHTMLタグ付きで格納する場合はcaptureを使うといった分け方です。

格納したい内容の複雑さや長さによって使い分けることで、より効率的で読みやすいコードを書くことができます。

assignタグの解説

assignタグは文字列だけでなく、数値、真偽値（true/false）、配列、オブジェクトなど、様々なデータ型を扱うことができます。

数値を代入

Liquid

{%- assign 変数名 = '値' -%}

// 例
{%- assign str = '文字列が入ります。' -%}
{{ str }} // 文字列が入ります。

数値を代入

Liquid

{%- assign 変数名 = 数値 -%}

// 例
{%- assign num = 15 -%}
{{ num }} 15

計算結果を代入

Liquid

{%- assign num = 50 -%}
{%- assign num2 = num | plus: 30 -%}
{{ num2 }} // 80

配列を代入

Liquid

{%- assign 変数名 = '値1,値2,値3,値4' -%}

// 例
{%- assign array = '値1,値2,値3,値4' | split: ',' -%}
{{ array }} 値1値2値3値4

// for文で出力
{%- for item in array -%}
    <p>{{ item }}</p>
{%- endfor -%}
// <p>値1</p>
// <p>値2</p>
// <p>値3</p>
// <p>値4</p>

変数を変数に代入

Liquid

{%- assign 変数名 = 変数 -%}

// 例
{%- assign str = '文字列が入ります。' -%}
{%- assign str2 = str -%}
{{ str2 }} // 文字列が入ります。

文字列を結合して代入

Liquid

{%- assign str = '日曜日' -%}
{%- assign str2 = '今日は' | append: str | append: 'です。' -%}
{{ str2 }} // 今日は、日曜日です。

captionタグを解説

captureタグは、複数の値や変数を組み合わせて新しい文字列を作成するのに使用します。
captureタグの間に記述された内容が、指定した変数名に文字列として格納されます。

文字列を代入する

Liquid

{%- capture  変数名 -%}
    値が入ります。
{%- endcapture -%}

// 例
{%- capture  str -%}
    <p>今日は、日曜日です。</p>
{%- endcapture -%}
{{ str }} //  <p>今日は、日曜日です。</p>

複数の変数を代入する

captureタグを使うと、複数の値や変数を簡単に結合して新しい文字列を作成できます。

Liquid

{%- assign 変数名1 = '値1' -%}
{%- assign 変数名2 = 30 -%}
{%- capture  変数名 -%}
    {{ 変数名1 }}
    {{ 変数名2 }}
{%- endcapture -%}

// 例
{%- assign str1 = '今日は、' -%}
{%- assign str2 = '日曜日です。' -%}
{%- capture  str -%}
<p>{{ str1 }}{{ str1 }}</p>
{%- endcapture -%}
{{ str }} //  <p>今日は、日曜日です。</p>

変数内で条件分岐や反復処理をすることができる

1〜5の数字の中で奇数だけをpタグで表示する。

Liquid

{%- capture  num -%}
    {%- for i in (1..5) -%}
        {%- assign remainder = i | modulo: 2 -%}
        {%- if remainder != 0 -%}
            <p>No.{{ i }}</p>
        {%- endif -%}
    {%- endfor -%}
{%- endcapture -%}
{{ num }} 
//  <p>No.1</p>
//  <p>No.3</p>
//  <p>No.5</p>

captureタグは、複雑な文字列の作成や、条件に応じて異なる内容を持つ文字列の生成に非常に便利です。特に、HTMLの一部を動的に生成する場合に役に立ちます。

まとめ

いかでしたでしょうか？
今回の記事では、Shopify開発において重要な変数、「assign」タグと「capture」タグについて解説をしてきました。

今回のポイントをまとめますと、次のとおりです。

これらの変数を使いこなすことで、動的で柔軟なShopifyテーマを開発することができます。
理解し、適切に使用することでより効率的で保守性の高いコードを書くことができるようになります！

最後までお読みいただきありがとうございました！