Shopify

Shopify テーマ作成で必須！Liquid 記法を使いこなせるようになろう

Liquid基礎

Liquid記法の基礎: 型・演算子・真偽値・変数・空白制御

Liquidは、ShopifyテーマやECサイト構築に広く使われるテンプレート言語です。HTMLと組み合わせて、動的なコンテンツ生成を可能にします。

このブログ記事では、Liquid記法の基礎について、初心者にも分かりやすく解説します。

Liquid記法の基礎

データ型

Liquidオブジェクトには、6つのデータ型が存在します。

  • String: 文字列。’sample’または”sample”のように、引用符で囲みます。
  • Number: 数値。数式フィルターで四則演算が可能です。
  • Boolean: 真偽値。trueまたはfalse。
  • Array: 配列。配列フィルターで出力を変更できます。
  • Nil: コード出力結果が存在しない場合に返される空の値。Liquid上の出力は空白となります。
  • EmptyDrop: アクセスしたオブジェクトに何も格納されていない場合に返されるオブジェクト。

これらのデータ型は、JavaScriptなどの他のプログラミング言語と似ているため、馴染みやすいでしょう。変数宣言時にデータ型を明示する必要はありません。

型変換

Liquidでは、フィルターと呼ばれる機能を使って、データ型を変換できます。

Liquid記法はシンプルな構文でデータ型を操作できます。

文字列操作

  • 大文字/小文字変換:
    • {{ “hello” | upcase }} -> “HELLO”
    • {{ “WORLD” | downcase }} -> “world”
  • 文字列の長さ:
    • {{ “This is a sentence.” | length }} -> 23
  • 部分文字列の抽出:
    • {{ “This is a sentence.” | slice: 7 }} -> “is a sentence.”
    • {{ “This is a sentence.” | slice: 7, 10 }} -> “is a”
  • 文字列の置換:
    • {{ “This is a sentence.” | replace: “sentence”, “paragraph” }} -> “This is a paragraph.”

数値操作

  • 絶対値:
    • {{ -10 | abs }} -> 10
  • 四捨五入:
    • {{ 3.14159 | round }} -> 3
    • {{ 3.14159 | round: 2 }} -> 3.14
  • 小数点以下の桁数制限:
    • {{ 3.14159 | truncate: 2 }} -> 3.14
  • 数値の加算・減算・乗算・除算:
    • {{ 1 + 2 }} -> 3
    • {{ 4 – 1 }} -> 3
    • {{ 5 * 2 }} -> 10
    • {{ 10 / 2 }} -> 5

日付操作

  • 日付の書式設定:
    • {{ “2023-11-14” | date: “%Y/%m/%d” }} -> “2023/11/14”
    • {{ “2023-11-14” | date: “%a %b %d” }} -> “火 11月 14”
  • 日付の加算・減算:
    • {{ “2023-11-14” | date: “+1 day” }} -> “2023-11-15”
    • {{ “2023-11-14” | date: “-1 week” }} -> “2023-11-07”

その他

  • 配列の結合:
    • {{ [“a”, “b”] | join: “, ” }} -> “a, b”
  • 空の値のチェック:
    • {{ “” | empty }} -> true
    • {{ “hello” | empty }} -> false

上記はほんの一例です。Liquidは他にも多くのフィルターが用意されていますので、詳しくはドキュメントを参照してください。

演算子

Liquidでは、以下の演算子が使用できます。

  • 算術演算子: +, -, *, /, %
  • 比較演算子: ==, !=, <, >, <=, >=
  • 論理演算子: and, or, not

これらの演算子は、他のプログラミング言語と同様の使い方です。

真偽値

Liquidでは、trueとfalseの2つの真偽値があります。

  • true: 条件が満たされる場合
  • false: 条件が満たされない場合

真偽値は、条件分岐やループ処理などに使用されます。

変数

変数は、値を格納するための名前付きのコンテナです。

変数の宣言は、{% assign %}タグを使って行います。

{% assign product_name = "Tシャツ" %}

上記の場合、product_nameという変数に「Tシャツ」という文字列が格納されます。

変数の参照は、{{ }}を使って行います。

<h1>{{ product_name }}</h1>

上記の場合、「Tシャツ」という文字列がH1タグ内に表示されます。

空白制御

Liquidでは、空白の出力を制御する機能があります。

  • strip: 変数の前後にある空白を除去します。
  • newline: 変数の後に改行を出力します。
  • raw: 変数の内容をそのまま出力します。

これらの機能は、テンプレートの見栄えを整えるために役立ちます。

Liquid記法の使用例：詳細解説

Liquid記法の使用例をさらに詳細に解説します。

変数

変数は、テンプレート内で値を格納するための名前付きのコンテナです。

変数の宣言

変数の宣言は、{% assign %} タグを使って行います。

{% assign product_name = "Tシャツ" %}
{% assign product_price = 1000 %}

上記の場合、product_name と product_price という2つの変数が宣言され、それぞれに値が格納されます。

変数の参照

変数の参照は、{{ }} を使って行います。

<h1>{{ product_name }}</h1>
<p>価格: {{ product_price }}円</p>

上記の場合、product_name と product_price の変数が参照され、H1タグとpタグ内にそれぞれの内容が表示されます。

変数の型変換

変数の型変換は、フィルターを使って行います。

{{ product_price | abs }}  # 数値の絶対値を取得
{{ product_price | currency }}  # 通貨形式に変換

上記の場合、product_price 変数の値を、絶対値と通貨形式に変換して出力します。

配列

配列は、複数の値をまとめて格納するためのデータ型です。

配列の宣言

配列の宣言は、{% assign %} タグを使って行います。

{% assign products = ["Tシャツ", "パンツ", "靴"] %}

上記の場合、products という配列が宣言され、3つの文字列が格納されます。

配列の参照

配列の参照は、{{ }} を使って行います。

<ul>
{% for product in products %}
  <li>{{ product }}</li>
{% endfor %}
</ul>

上記の場合、products 配列の各要素がループ処理され、ulタグ内にリストとして出力されます。

配列の操作

配列には、size フィルターや sort フィルターなど、さまざまな操作機能があります。

{{ products | size }}  # 配列の要素数を取得
{{ products | sort }}  # 配列の要素をソート

上記の場合、products 配列の要素数と、ソートされた要素を出力します。

条件分岐

条件分岐は、条件によって異なる処理を実行する機能です。

if 文

if 文を使って、条件によって処理を分岐できます。

{% if product_price > 1000 %}
  <p>高価な商品です</p>
{% else %}
  <p>お手頃な商品です</p>
{% endif %}

上記の場合、product_price 変数の値が1000円より大きい場合は「高価な商品です」、それ以外は「お手頃な商品です」というメッセージが表示されます。

elsif 文

elsif 文を使って、複数の条件を分岐できます。

{% if product_price > 10000 %}
  <p>非常に高価な商品です</p>
{% elsif product_price > 1000 %}
  <p>高価な商品です</p>
{% else %}
  <p>お手頃な商品です</p>
{% endif %}

上記の場合、product_price 変数の値が10000円より大きい場合は「非常に高価な商品です」、1000円より大きい場合は「高価な商品です」、それ以外は「お手頃な商品です」というメッセージが表示されます。

ループ処理

while ループ

while ループを使って、条件が真偽値 true になるまで処理を繰り返します。

{% assign counter = 0 %}
{% while counter < 5 %}
  <p>カウント: {{ counter }}</p>
  {% assign counter = counter + 1 %}
{% endwhile %}

上記の場合、counter 変数が5未満になるまで、カウントアップ処理を繰り返します。

break 文

break 文を使って、ループ処理を途中で中止できます。

{% for product in products %}
  {% if product == "靴" %}
    {% break %}
  {% endif %}
  <li>{{ product }}</li>
{% endfor %}

上記の場合、products 配列の要素が「靴」の場合、ループ処理を中止して、それ以降の要素は出力しません。

オブジェクト

オブジェクトは、複数のプロパティを持つデータ型です。

オブジェクトの参照

オブジェクトのプロパティは、ドット記法を使って参照できます。

コード スニペット

{% assign product = { name: "Tシャツ", price: 1000 } %}

<h1>{{ product.name }}</h1>
<p>価格: {{ product.price }}円</p>

上記の場合、product オブジェクトの name プロパティと price プロパティが参照され、H1タグとpタグ内にそれぞれの内容が表示されます。

オブジェクトの操作

オブジェクトには、size フィルターや sort フィルターなど、さまざまな操作機能があります。

{{ product | size }}  # オブジェクトのプロパティ数を取得
{{ product | sort_by "price" }}  # オブジェクトを価格でソート

上記の場合、product オブジェクトのプロパティ数と、価格でソートされたオブジェクトを出力します。

テンプレートの読み込み

render タグを使って、別のテンプレートを読み込むことができます。

{% render "header" %}

<h1>商品一覧</h1>

{% for product in products %}
  <li>{{ product.name }}</li>
{% endfor %}

{% render "footer" %}

上記の場合、header.liquid と footer.liquid というテンプレートを読み込み、products 配列の要素をリストとして出力します。

その他の機能

Liquid記法には、上記以外にもさまざまな機能があります。

  • フィルター: データの書式を変換したり、操作したりする機能
  • タグ: 処理を制御したり、他のテンプレートを読み込んだりする機能
  • 変数: 値を格納するための名前付きのコンテナ

これらの機能を組み合わせることで、複雑な処理も記述できます。

まとめ

Liquid記法は、シンプルな構文で動的なコンテンツ生成を可能にするテンプレート言語です。

今回紹介した詳細な使用例を参考に、Liquid記法を使いこなして、魅力的なWebサイトを作成しましょう。

参考資料

アーカイブ

カテゴリー