Shopifyのプログラミング言語、Liquid（リキッド）とは？【基礎を解説】
こんにちは、Airiです。
こんなお悩みありませんか？
- Shopifyをコード編集したいけど、何の言語を使えばいい？
- Liquid（リキッド）って聞いたことあるけど、何だろう？
- Liquid（リキッド）の基礎が知りたい
そんなあなたへ、この記事を読むと、「Liquid（リキッド）とは何か」を理解し、Liquid（リキッド）の「基礎」を理解することができます。
Liquidとは
Liqud（リキッド）とは、Shopifyが独自に開発した、オープンソースのプログラミング言語です。「Ruby」をもとに作られています。
Shopifyテーマ開発の主軸の言語になっており、これを使うことによって、ストアフロントのダイナミック（動的）な動きを作ることができます。
Liquidの基礎
Liquid（リキッド）の構成要素
Liquidは、テンプレートファイルの中で、「Object（オブジェクト）」、「Tags（タグ）」、「Filters（フィルター）」の3要素で構成されています。
Object（オブジェクト）
オブジェクトは、複数の変数によって集まり、コンテンツの内容を入れることができます。オブジェクトと変数は、{{ }} で囲みます。
{{ page.title }}↓ 出力
このブログのタイトル
Tags（タグ）
タグは、テンプレートのロジック、制御コントロールフローを作成します。{% %} で囲みます。
{% if product.title == "ABC Bag" %}
これは「ABCバッグ」です
{% endif %}↓ 出力
これは「ABCバッグ」です
Filters（フィルター）
フィルターは、オブジェクトや変数の出力を変更することができます。{{ }} で囲み、| で区切ります。
{{ "/my/shop/url" | append: ".html" }}↓ 出力
/my/shopy/url.htmlOperators（演算子）
Liquid には多くの論理演算子や比較演算子があります。演算子を使って、ロジックを作成できます。
演算子の基礎
| == | 等しい |
| != | 等しくない |
| > | 〜より大きい |
| < | 〜より小さい |
| >= | 以上 |
| <= | 以下 |
| or | または |
| and | かつ |
{% if product.title == "ABC Bag " %}
これは「ABCバッグ」です
{% endif %}contains（〜を含む）
containsは、特定の要素を含んでいるかどうかを確認する論理演算子です。
{% if product.tags contains "ワンピース" %}
このタグは「ワンピース」を含んでいます。
{% endif %}
Truthy and falsy（真偽値）
Liquidでは、すべてのデータ型が条件分岐で「True（真）」または「False（偽）」として扱われます。
下記の表は、Liquidの真偽をまとめたものです。
| truthy（真） | falsy（偽） | |
| true | ◎ | |
| false | ◎ | |
| nil | ◎ | |
| string | ◎ | |
| empty string | ◎ | |
| 0 | ◎ | |
| integer | ◎ | |
| float | ◎ | |
| array | ◎ | |
| empty array | ◎ | |
| page | ◎ | |
| EmptyDrop | ◎ |
Types（タイプ）
Liquidのオブジェクトで使えるタイプは6つあります。「assign」または「capture」のタグを使い、変数を再定義することができます。
| String（文字列） | 「’ ‘」または「” “」で囲まれた単語や文などの文字列。 |
| Number（数値） | 小数点または整数が含まれる計算可能な数値。 |
| Boolean（真偽値） | 「真」または「偽」のいずれかを表示する値。「’ ‘」または「” “」は必要なし。 |
| Nil（空値） | Nilは空の値で、Liquidのコードに結果がないときに反映される。 |
| Array（配列） | 配列のフィルターで出力ができる。 |
| Empty（空） | 何も格納されていないオブジェクト。 |
Whitespace control（ホワイトスペースコントロール）
ホワイトスペースコントロールは、Liquid言語で空白をコントロールするものです。{{- -}}, {{%- -%}} のようにハイフンを加えることで、空白を取り除くことができます。
知っておくと便利！Liquid学習に役に立つサイト
GitHub
LiquidのGitHubです。サイトは、こちら。
Liquidの公式サイト
基礎から解説されているので、基礎から始めたい方はぜひ。サイトは、こちら。
Liquidチートシート
Liquidで使うものが一覧になっていて、検索機能もついているので、便利。サイトは、こちら。
Liquid reference（リファレンス）
Shopify developersサイト内のLiquidのページです。サイトは、こちら。
Shopifyで使われているプログラミング言語、Liquid（リキッド）の解説は以上です。
この記事がお役に立てましたら、幸いです。