こんにちは、たかぼー(@taka_forward)です。
この記事では、Shopifyのテンプレート言語：Liquidを紹介します。
Shopifyのテーマ開発に必要な知識をこれから紹介していきます〜！
<この記事を読むことのメリット>
① Liquidについて知れる
② Liquidの３大要素：Object, Filter, Tagについて知れる
② Shopifyのテーマ開発のイメージがわく
目次
Liquidとは？
Shopifyのテンプレート言語で、サイトを動的に出力するために使用する言語になります。
あるページ（写真ではトップページ）を表示しようとした場合、デバイスからのアクセスをサーバーが感知し、theme.liquidをはじめとしたファイルを読み込み、それらをhtml/CSS/javascriptとして出力してサイトに表示させているという仕組みになります。
theme.liquidに各ファイルを読み込むよう指示が書いてあり、それに基づいてファイルが読み込まれ、表示されます。
それぞれのファイル内には、商品名であれば、 {{ product.title }}・ページタイトルであれば {{ page.title }}などと決まっているルールに基づいて記載すれば、1つのテンプレートで、違う文字が出力されます。
（例）{{ product.title }}を記載すれば、同じ商品ページでも、表示する商品によって「青のTシャツ」・「赤のスニーカー」・「黄色の時計」などと別の商品名が出力されます。
コード例
article.template.liquid（ブログ一覧ページ）をみてみましょう。
<div class="section-header text-center">
<h1 class="article__title">{{ article.title }}</h1>
{% if section.settings.blog_show_author %}
<span class="article__author">
{{ 'blogs.article.by_author' | t: author: article.author }}</span>
{% endif %}
{% if section.settings.blog_show_date %}
<span class="article__date">
{{ article.published_at | time_tag: format: 'date' }}
</span>
{% endif %}
</div>
<div class="rte">
{{ article.content }}
</div>
{% if section.settings.show_share_buttons %}
{% include 'social-sharing', share_title: article.title, share_permalink: article.url, share_image: article.image %}
{% endif %}
Liquidファイルでできているのですが、コードを見ると、
・基本的にhtmlファイル
・{{ }} , {% %}がある。
・ifで条件分岐ができる
・動的にする部分をLiquidコードで置き換えている
（上の例だとブログのタイトル名→{{ article.title }}にしている）
などがわかります。
Liquidで使われる {{ … }}, {% … %}はそれぞれこのような意味があります。
{{ … }} ：データを出力する際
{% … %}：ファイルを呼び出す、true/falseなどのロジックを作る際
ここで、どのように置き換えていくのか？どんな特徴があるのかという疑問があると思いますので、ここからLiquidコードで書き換える時に必要な３大要素について紹介していきます。
Liquidの３大要素：Object, Filter, Tag
Object, Filter, Tagを使ってhtmlファイルに記載のコードをliquidに変更していきます
Object
オブジェクトは、
- Global Object
- Content Object
- Other Object
の3つに分類されます。
Global Objects
全てのテーマファイルで使用ができるオブジェクトです。ほぼ全てのオブジェクトがこれに分類されます。
オブジェクトは「Shopifyで決められた変数.(ドット)プロパティ」で記載するのですが、誰でもコードをみればなんとなくわかるのがliquidだと思っているので難しく考えなくてOKです。
例えば、製品価格は
{{ product.price }}と記載し、ストアのURLは
{{ shop.url }}となります。
Content Objects
テンプレートやセクションファイル、Shopifyアプリを表示させるのに必要なものです。
content_for_header, content_for_layout, content_for_indexの3つです。
Other Objects
Apple PayやGoogle Payで決済する場合、外部ページに飛ぶ必要があるので、その際に記述するものです。
additional_checkout_buttons, content_for_additional_checkout_buttons 2つしかありません。
Filter
フィルターは出力されようするオブジェクトに対し、色のフィルターを当てたり、htmlファイルに追記したり、表示方法を変えたりするものです。
代表例を見てみましょう。写真サイズの出力を調整する場合です。
{{ product | img_url: '500x500' }}フィルターは「|」を用いて記載します。この場合だと500×500を出力します。500xと書けば横が500pxの画像が出力、x500と書けば縦500pxの画像が出力されます。
Tag
条件分岐や繰り返しなどのロジックを使う際、また、別のファイルデータを読み込む際に使用するものです。
Liquidでは{% %}で囲い記載をし、{% if %}{% for %}{% include %}{% section %}{% form %}などをよく使用します。ここでは代表的なifとforを紹介しようと思います。
{% if %} ー {% endif %}：条件分岐
条件分岐の文章になります。
（例）Shopifyで会員限定サイトを作る場合
{% comment %}会員にコンテンツ表示{% endcomment %}
{% if customer %}
<section class="section-header">
<h2>ようこそ！{{ customer.first_name }}さん</h2>
</section>
{% comment %}非会員の場合{% endcomment %}
{%else%}
<section class="section-header">
<h2>このコンテンツは会員限定ページです。</h2>
</section>
{%endif%}のようにできます。
{% for %} ー {% endfor %}：繰り返しの動作
{% for product in collection.products %}
{{ product.title }}
{% endfor %}これをかくと、商品名が羅列されるようになります。（最大50件までの制限があります。）
{% include ‘ファイル名’ %}, {% section ‘ファイル名’ %}：別ファイルの呼び出し
これらを記載すると、別のフォルダのファイルを呼び出すことができます。
includeはスニペット（セクションより小さな共通素材）を呼び出すことに使い、sectionはスニペットよりも大きい部材に使用します。
例えば、
{% include 'breadcrumb' %}とかくと、breadcrumbというファイル名のスニペットを読み込んでくれます。
※ただ読み込んでくれるだけなので、breadcrumb=パンくずリスト（ページ位置の把握のためにページのヘッダーしたに使われる、「ホーム > カテゴリー > 商品」のようなもの）を表示させたい場合は、コーディングしましょう。
まとめ
ここまでLiquidの３大要素をLiquidコードの例にあげて紹介してきました。
プログラミング言語というと、「とっつきにくい」「コードを読むのも勉強しないと難しい」と思いがちですが、liquidは日本人が開発したことで知られるRubyベースに作られているので、直感的にわかるものが多く、楽しくコーディングすることができます。
「もう少し詳しいことを知りたい！」という方はこちらも合わせてご覧ください。
