【Shopify.dev和訳】Liquid/Overview
この記事について
この記事は、Liquid/Overviewの記事を和訳したものです。
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Liquid reference
Liquid は、Shopify によって作成され、Ruby で記述されたテンプレート言語です。現在、GitHub でオープンソースプロジェクトとして利用可能であり、さまざまなソフトウェアプロジェクトや企業で使用されています。 Liquid はすべての Shopify テーマのバックボーンであり、オンラインストアのページに動的コンテンツをロードするために使用されます。
テンプレート言語とは？｜ What is a template language?
Web サイトの設計者と開発者は、テンプレート言語を使用して、複数のページで同じである静的コンテンツと、あるページから次のページに変化する動的コンテンツを組み合わせた Web ページを構築できます。テンプレート言語を使用すると、Shopify ストアからのデータをページに動的に入力しながら、Web ページのレイアウトを定義する静的要素を再利用できます。静的要素は HTML で記述され、動的要素は Liquid で記述されます。ファイル内の Liquid 要素はプレースホルダーとして機能します。ファイル内のコードがコンパイルされてブラウザーに送信されると、Liquid はテーマがインストールされている Shopify ストアからのデータに置き換えられます。
ユースケース｜ Use cases
- Shopify のテーマ上で動作します
- 完全な Shopify テーマを構築します
- 既存のテーマを編集します。Shopify のマーチャントは、特定のニーズに合わせてテーマを調整するために開発者に依頼することが多いです。
Liquid の構文｜ Liquid syntax
従来のプログラミング言語と同様に、Liquid には構文があり、変数と相互作用し、出力やロジックなどの構造が含まれています。構文が読みやすいため、Liquid 構造は認識しやすく、次のデリみた（区切り文字）のセットによって HTML と区別できます。
-
{{ }}のデリミタは出力を示します -
{% %}のデリミタはロジックと制御フローを示します
Liquid コードには 3 つの主な機能があります。
オブジェクト｜ Objects
Liquid Objectsは、Shopify admin からデータを出力します。テーマテンプレートでは、オブジェクトは二重中括弧区切り文字{{ }}で囲まれ、次のようになります。
{{ product.title }}
上記の例では、productがオブジェクトであり、titleがそのオブジェクトのプロパティです。各オブジェクトには、関連するプロパティのリストがあります。製品オブジェクトのプロパティの詳細については、Liquid リファレンスを参照してください。
{{ product.title }}Liquid オブジェクトは、Shopify テーマの製品テンプレートにあります。ファイル内のコードがコンパイルされ、Shopify ストアの製品ページにレンダリングされると、Liquid オブジェクトの出力は製品のタイトルになります。たとえば、衣料品店では、結果は次のようになります。
Awesome T-Shirt
Shopify ストアのすべての商品に同じテンプレートが使用されている場合でも、テンプレートの Liquid オブジェクトは、表示している商品ページに応じて異なるデータを出力します。
テーマテンプレートで使用できるさまざまな Liquid オブジェクトの詳細については、Liquid オブジェクトのページを参照してください。
タグ｜ Tags
Liquid Tagsは、テンプレートのロジックと制御フローを作成するために使用されます。中括弧のパーセンテージデリミタ{% %}とそれらが囲むテキストは、Web ページがレンダリングされたときに表示される出力を生成しません。これにより、ページに 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タグとelseLiquid タグを使用しています。
Liquid タグは次のタイプに分類されます。
フィルター｜ Filters
Liquid filtersは、数値、文字列、オブジェクト、および変数の出力を変更するために使用されます。これらは出力タグ{{ }}内に配置され、パイプ文字|で示されます。
簡単な例は、文字列のcapitalizeフィルターです。
{{ 'hello, world!' | capitalize }}
フィルタは、文字列を大文字にして変更します。出力は次のようになります。
Hello, world!
1 つの出力で複数のフィルターを使用でき、それらは左から右に適用されます。
{{ 'hello, world!' | capitalize | remove: "world" }}
文字列は最初に大文字になり、次にworldという単語が削除されます。出力は次のようになります。
Hello, !
Liquid フィルターを使用して、さまざまな便利なデータ操作を行うことができます。液体フィルターは、次のタイプに分類されます。
- Array filters
- Color filters
- HTML filters
- Math filters
- Money filters
- String filters
- URL filters
- Additional filters
Resources
Tools
Shopify アプリのご紹介
Shopify アプリである、「商品ページ発売予告アプリ | リテリア Coming Soon」は、商品ページを買えない状態のまま、発売日時の予告をすることができるアプリです。Shopify で Coming Soon 機能を実現することができます。
Shopify アプリである、「らくらく日本語フォント設定｜リテリア Font Picker」は、ノーコードで日本語フォントを使用できるアプリです。日本語フォントを導入することでブランドを演出することができます。
Discussion