Shopify開発の基本：Liquid テンプレート言語

2023/05/23by GO RIDE

Shopifyは、誰でも簡単にオンラインストアを開設できるプラットフォームです。このShopifyでオンラインストアをカスタマイズする際に使用される言語が、Liquidです。Liquidは、Shopifyが開発したオープンソースのテンプレートエンジンで、HTMLを動的に生成することができます。

Liquidの特徴

Liquidは非常に直感的で、シンプルな言語設計で構成されています。このため、HTMLやCSSなどの基本的な知識があるフロントエンドエンジニアであれば、比較的スムーズにコーディングを進めることができるでしょう。特に、Liquidは以下のような特徴があります：

このコードの例では、もしproduct.titleが"Awesome T-Shirt"で、product.priceが"2000"だとすると、出力結果は以下のようになります：

タグ - テンプレートのロジックを制御します。例えば、条件分岐（if文）やループ（for文）などを制御することができます。

このコードの例では、もしproduct.availableがtrue（商品が在庫あり）の場合、出力結果は以下のようになります：

一方、product.availableがfalse（商品が在庫なし）の場合、出力結果は以下のようになります：

このコードの例では、もしproduct.titleが"Awesome T-Shirt"で、product.created_atが"2023-05-22T14:30:00Z"だとすると、出力結果は以下のようになります

Liquidを使用する際に注意するべきポイントは以下の通りです：

リキッドの構文 - Liquidは特殊な構文を使用します。オブジェクトは {{ }}（二重中括弧）で、タグは {% %}（パーセンテージと中括弧）で囲まれます。構文を正しく理解することで、Liquidの特性を最大限に活用することができます。
テンプレートのカスタマイズ - Shopifyには多数のテンプレートが用意されていますが、その中でも自分のサイトに最適なデザインを選び、Liquidを用いてカスタマイズすることが大切です。
Shopifyオブジェクト*の理解 - Shopifyは多くのビルトインオブジェクトを提供しています。これらのオブジェクトを理解し、適切に使用することで効率的な開発が可能となります。

*Shopifyオブジェクトは、Shopifyに登録されているデータをまとめたものです。
例えば「product」というオブジェクトには、商品情報（商品名、在庫、価格など）が。「shop」というオブジェクトには、ストア情報（ストア名、所在地、メールアドレスなど）が登録されています。