Zenn
💧

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

2021/03/18に公開
初心者
Shopify
Liquid
公式ドキュメント
和訳
tech

概要

当記事は、これから Shopify に関わっていきたいな、という人にぜひ読んで欲しい記事になっています。

Shopify に関わっていく上で Liquid との関わりは断ち切れるものではありません。
最近は、日本語での Liquid 解説記事も増えてはきましたが、まだまだ情報量は多くないです。

この記事は、Liquid 公式ドキュメントのこちらのページを翻訳したものです。
どの分野においても、やはり公式ドキュメントという一次情報に触れることは重要です。
この記事も一次情報ではないですが、できるだけ正確に翻訳しています。また、補足も入れながら解説しているので、ぜひ参考にしていただければと思います。

Liquid テンプレート言語リファレンス（Liquid template language reference）

Liquid は、Shopify が作成した Ruby で書かれたテンプレート言語です。現在、GitHub でオープンソースプロジェクトとして公開されており、様々なソフトウェアプロジェクトや企業で使用されています。Liquid は、Shopify のすべてのテーマのバックボーンであり、オンラインストアのページにダイナミックコンテンツをロードするために使用されています。

Liquid は、Shopify のテーマで使われています。Ruby を用いて開発されているので、Ruby をやったことをある方には少し馴染みのある書き方もあります。

Liquid シンタックス（Liquid syntax）

伝統的なプログラミング言語と同様に、Liquid は構文を持ち、変数と相互作用し、出力やロジックなどの構成要素を含みます。その読みやすい構文のため、Liquid の構造は認識しやすく、2 つのデリミタで HTML と区別することができます。2 重中括弧のデリミタ{{ }}は出力を表し、中括弧とパーセントのデリミタ{% %}はロジックと制御フローを表します。

デリミタとは、区切り文字のことです。{{ }}や{% %}の区切り文字が出てきたら Liquid の世界になると理解しておくだけでも、コードがだいぶ読めるようになります。

Liquid の特徴は大きく分けて 3 つあります:

Liquid の特徴はこの 3 つに集約されます。これらの機能を使いこなすことで、非常に高度な Liquid 開発が可能になります。
これらは全て予約語です。全てを覚える必要はないかもしれませんが、大体は頭に入れておく必要があります。量が結構多いので、少し参入障壁が高いと感じる方もいるかもしれません。

オブジェクト｜ Objects

Liquid オブジェクトは、Shopify 管理画面からデータを出力します。テーマテンプレートでは、オブジェクトは二重中括弧{{ }}で囲まれており、以下のようになります。

{{ product.title }}

上記の例では、productがオブジェクトであり、titleはそのオブジェクトのプロパティです。各オブジェクトには、関連するプロパティのリストがあります。productオブジェクトのプロパティの詳細については、Liquid のリファレンスを参照してください。

オブジェクトはそれぞれプロパティを持っており、オブジェクト名.プロパティ名とすることで利用することができます。まさに JavaScript のオブジェクトにアクセスする感じです。

{{ product.title }}という Liquid オブジェクトは、Shopify テーマの商品テンプレート上にあります。このファイルのコードがコンパイルされ、Shopify ストアの商品ページでレンダリングされると、Liquid オブジェクトの出力は商品のタイトルになります。例えば、衣料品店の場合、結果は次のようになります。

Awesome T-Shirt

Shopify ストアのすべての商品に同じテンプレートが使われていても、テンプレート内の Liquid オブジェクトは、表示されている商品ページに応じて異なるデータを出力します。

つまり、同じ記述でもユーザーのアクセスしているページに合わせて、動的に表示が切り替わると言うことです。この辺が Shopify の非常に優れている点です。

Liquid オブジェクトは大量にあるので、時間があるときに目を通しておくことをおすすめします。弊社で和訳して、こちらの記事にリンクをまとめていますので、ぜひご利用ください。

タグ｜ 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 はこのようにロジックと見た目が混ざっています。最初は少し読みにくく感じるかもしれませんが、だんだんと慣れてきます。Ruby に似ていますよね。

Liquid のタグは様々な種類に分類されます：

  • Control flow tags
  • Iteration tags
  • Theme tags
  • Variable tags
  • Deprecated tags

こちらも弊社で和訳して、こちらの記事にリンクをまとめていますので、ぜひご利用ください。

フィルター｜ Filters

リキッドフィルターは、数値、文字列、オブジェクト、変数などの出力を変更するためのものです。出力タグ{{ }}の中に配置され、パイプ文字|で示されます。

フィルターを使用することで、出力を加工することができます。|を用います。

簡単な例として、capitalizeという string filter（文字列フィルター）があります。

Input
{{ 'hello, world!' | capitalize }}

このフィルタは、文頭の文字を大文字にします。出力は次のようになります。

Output
Hello, world!

1 つの出力に複数のフィルターを使用することができ、左から右に向かって適用されます。

Input
{{ 'hello, world!' | capitalize | remove: "world" }}

まず文字列の文頭を大文字にし、次にworldという単語を削除します。出力は次のようになります。

Output
Hello, !

JavaScript でいうメソッドのようなものです。出力を加工することができます。
テーマのコードを見てみるといたるところで使用されているので、{{ }}の中で|が出てきたらフィルターだということを知っていれば、ググる手間も省けますね。
よく使うものは限られていますので、コードを見ながら覚えていく感じで良いと思います。

Liquid フィルターを使って、さまざまな便利なデータ操作を行うことができます。フィルターは 8 つのタイプに分類されます。

  • Array filters
  • Color filters
  • HTML filters
  • Math filters
  • Money filters
  • String filters
  • URL filters
  • Additional filters

フィルターも大量にあるので、よければ弊社のLiquid 和訳まとめから検索してみてください。

実際大事なのはここまでです。
これらを理解しておくだけでも、だいぶ Liquid のコードを読めるようになっていると思います。

テーマテンプレートへのアクセス（Accessing theme templates）

テーマの Liquid ファイルは、Shopify 管理画面のテーマセクションからアクセスできます。

デスクトップ
  1. Shopify の管理画面から「オンラインストア > テーマ」へと進みます。
  2. 編集したいテーマの「アクション > コードを編集する」をクリックします。
  3. 編集したい Liquid ファイルをクリックし、必要に応じてファイルを編集します。
  4. 「保存」をクリックします。
  5. Liquid の出力を確認するには、オンラインストアの関連ページを確認してください。
iPhone
  1. Shopfiy app から「Store」をタップします。
  2. 販売チャネルのセクションで、「オンラインストア」をタップします。
  3. 「テーマの管理」をタップします。
  4. 編集したいテーマの「アクション > コードを編集する」をクリックします。
  5. 編集したい Liquid ファイルをクリックし、必要に応じてファイルを編集します。
  6. 「保存」をクリックします。
  7. Liquid の出力を確認するには、オンラインストアの関連ページを確認してください。
Android
  1. Shopfiy app から「Store」をタップします。
  2. 販売チャネルのセクションで、「オンラインストア」をタップします。
  3. 「テーマの管理」をタップします。
  4. 編集したいテーマの「アクション > コードを編集する」をクリックします。
  5. 編集したい Liquid ファイルをクリックし、必要に応じてファイルを編集します。
  6. 「保存」をクリックします。
  7. Liquid の出力を確認するには、オンラインストアの関連ページを確認してください。

Liquid コードサンプル（Liquid code example）

Shopify Liquid Code Examples は、テーマコンポーネントをベースにしたコード例を集めた検索可能なライブラリで、テーマをより速く、より確実に、そしてアクセシビリティを考慮して構築するのに役立ちます。

追加リソース（Additional resources）

もっと Liquid について知りたいよといった方は、以下のリンクも参考にしてみてください。

まとめ

今回は、Liquid とはどんな言語でどんな特徴があるのかについて、公式ドキュメントを和訳し、補足を加えながら解説してみました。
Liquid は、非常に予約語数が多いので目を通すのも大変です。ですが、現時点で Liquid を完全に理解しているエンジニアは少ないのでチャンスです。
Shopify を勉強してみようかな、という方はぜひ Liquid の勉強にもリソースを割いてみてください。

最後まで読んでいただきありがとうございました。

GitHubで編集を提案

Discussion