【Shopify】Liquidの変数「assign」「caption」について解説!
Published: Updated:
こんにちは、Webデザイナーの 夢拓(MUHIRO)です。
Shopifyのテーマ開発において、Liquidの理解は非常に重要になります。
特に、変数の扱いは効率的なコーディングの鍵となります。
この記事では、Liquidの変数操作に欠かせない「assign」と「capture」タグについて、初心者の方にもわかりやすく解説していきます。
この記事はこんな方におすすめ!
- Shopifyのストアフロント開発をする方
- Shopifyの開発初心者
この記事を読んで、このShopifyのLiquidの変数の実践的なテクニックを学んで最適なShopifyストアを制作いただけるようになります!
それでは、どうぞ!
Index
[ CloseOpen ]
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 -%}
No.{{ i }}
{%- endif -%} {%- endfor -%} {%- endcapture -%} {{ num }} // <p>No.1</p> // <p>No.3</p> // <p>No.5</p>
captureタグは、複雑な文字列の作成や、条件に応じて異なる内容を持つ文字列の生成に非常に便利です。特に、HTMLの一部を動的に生成する場合に役に立ちます。
まとめ
いかでしたでしょうか?
今回の記事では、Shopify開発において重要な変数、「assign」タグと「capture」タグについて解説をしてきました。
今回のポイントをまとめますと、次のとおりです。
今回の記事のまとめ
- Liquidテンプレート言語とは、Shopifyが開発したオープンソースのテンプレート言語です。
- Liquidの変数宣言には主にassignタグとcaptureタグの2つの方法がある。
- assignタグとcaptureタグは場面によって使い分けることでコードを簡潔に保守性ある記述をすることができる。
これらの変数を使いこなすことで、動的で柔軟なShopifyテーマを開発することができます。
理解し、適切に使用することでより効率的で保守性の高いコードを書くことができるようになります!
最後までお読みいただきありがとうございました!
免責事項
- 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。
- 当ブログで提供するプログラムコードは、執筆者の最善の知識に基づいていますが、その正確性や完全性を保証するものではありません。コードの利用や実行により生じた損害や問題については、一切の責任を負いかねます。コードの使用は、自己責任で行ってください。
- 当サイトで使用しているスクリーンショット画像について、著作権はサイトの権利者に帰属します。掲載に不都合がある場合、お手数ですがお問い合わせフォームよりご連絡ください。
- 当サイトからリンクよって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いかねますのでご了承ください。
- 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。