この記事は、Liquid公式ドキュメントのこちらのページ(https://shopify.dev/api/liquid)を翻訳したものです。
どの分野においても、やはり公式ドキュメントという一次情報に触れることは重要です。
この記事も一次情報ではないですが、できるだけ正確に翻訳しています。
また、補足も入れながら解説しているので、ぜひ参考にしていただければと思います。
Liquidテンプレート言語
Liquidは、Shopifyが作成したRubyで書かれたテンプレート言語です。
現在、GitHubでオープンソースプロジェクトとして公開されており、様々なソフトウェアプロジェクトや企業で使用されています。
Liquidは、Shopifyのすべてのテーマのバックボーンであり、オンラインストアのページにダイナミックコンテンツをロードするために使用されています。
伝統的なプログラミング言語と同様に、Liquidは構文を持ち、変数と相互作用し、出力やロジックなどの構成要素を含みます。
その読みやすい構文のため、Liquidの構造は認識しやすく、2つのデリミタでHTMLと区別することができます。
2重中括弧のデリミタ{{ }}は出力を表し、中括弧とパーセントのデリミタ{% %}はロジックと制御フローを表します。
Liquidの特徴は、Objects、Tags、Filtersの3つに集約されます。
これらの機能を使いこなすことで、非常に高度なLiquid開発が可能になります。
全てを覚える必要はないかもしれませんが、大体は頭に入れておく必要があります。
量が結構多いので、少し参入障壁が高いと感じる方もいるかもしれません。
オブジェクト|Objects
Liquidオブジェクトは、Shopify管理画面からデータを出力します。
テーマテンプレートでは、オブジェクトは二重中括弧{{ }}で囲まれており、以下のようになります。
{{ product.title }}
上記の例では、productがオブジェクトであり、titleはそのオブジェクトのプロパティです。各オブジェクトには、関連するプロパティのリストがあります。
productオブジェクトのプロパティの詳細については、Liquidのリファレンスを参照してください。
オブジェクトはそれぞれプロパティを持っており、`オブジェクト名.プロパティ名`とすることで利用することができます。
まさにJavaScriptのオブジェクトにアクセスする感じです。
{{ product.title }}というLiquidオブジェクトは、Shopifyテーマの商品テンプレート上にあります。
このファイルのコードがコンパイルされ、Shopifyストアの商品ページでレンダリングされると、Liquidオブジェクトの出力は商品のタイトルになります。
例えば、衣料品店の場合、結果は次のようになります。
Awesome T-Shirt
Shopifyストアのすべての商品に同じテンプレートが使われていても、テンプレート内のLiquidオブジェクトは、表示されている商品ページに応じて異なるデータを出力します。
つまり、同じ記述でもユーザーのアクセスしているページに合わせて、動的に表示が切り替わると言うことです。
この辺がShopifyの非常に優れている点です。
タグ|Tags
Liquidタグは、テンプレートのロジックと制御フローを作成するために使用されます。
中括弧とパーセンテージのデリミタ{% %}とそれを囲むテキストは、ウェブページのレンダリング時には目に見える形では出力されません。
これにより、変数の割り当て、条件やループの作成を、ページ上にLiquidのロジックを表示することなく行うことができます。
Liquidでは、条件分岐や繰り返し、変数の定義などのロジックは全て{% %}の中に記述します。
ここで重要なのは{% %}が出力されないということです。
例えば、Liquidタグを使って、商品の有無に応じて商品ページに異なるコンテンツを表示することができます。
{% if product.available %}
<h2>Price: $99.99</h2>
{% else %}
<h2 class=”sold-out”>Sorry, this product is sold out.</h2>
{% endif %}
もし、商品が入手可能であれば、出力は以下のようになります。
Price: $99.99
もし、商品が入手できなければ、出力は以下のようになります。
Sorry, this product is sold out.
上記の例では、制御フローのタグであるifとelseのLiquidタグを使用しています。
この例は簡単なif文で構成されています。
product.availableは、在庫の有無を真偽値で返すオブジェクトなので、返される値がtrueならifブロックの処理が実行され、falseならelseブロックの処理が実行されます。
liquidはこのようにロジックと見た目が混ざっています。
最初は少し読みにくく感じるかもしれませんが、だんだんと慣れてきます。
フィルター|Filters
リキッドフィルターは、数値、文字列、オブジェクト、変数などの出力を変更するためのものです。
出力タグ{{ }}の中に配置され、パイプ文字|で示されます。
フィルターを使用することで、出力を加工することができます。
簡単な例として、capitalizeという string filter(文字列フィルター)があります。
{{ ‘hello, world!’ | capitalize }}
このフィルタは、文頭の文字を大文字にします。出力は次のようになります。
Hello, world!
1つの出力に複数のフィルターを使用することができ、左から右に向かって適用されます。
{{ ‘hello, world!’ | capitalize | remove: “world” }}
まず文字列の文頭を大文字にし、次にworldという単語を削除します。出力は次のようになります。
Hello, !
JavaScriptでいうメソッドのようなものです。
出力を加工することができます。
テーマのコードを見てみるといたるところで使用されているので、{{ }}の中で|が出てきたらフィルターだということを知っていれば、ググる手間も省けます。
よく使うものは限られていますので、コードを見ながら覚えていく感じで良いと思います。
Liquidフィルターを使って、さまざまな便利なデータ操作を行うことができます。フィルターは8つのタイプに分類されます。
まとめ
Liquidを初めて見ると、拒否反応が出るかもしれませんが、作りは意外と簡単なものとなっています。
ある程度の構造が理解できると、後は検索すると多くの情報が載っているので、紐解いていけるかと思います。
英語版にはなってしまうのですが、Shopify公式のLiquidページも参考にして頂ければと思います。
■Liquid