Liquid初心者が読むべき公式ドキュメントの和訳

この記事は、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

https://shopify.dev/api/liquid