Liquid基礎①オブジェクトとプロパティ

Shopify / Liquidの基本を学んでいきます。 今回はLiquidのコードを囲む{{ }}と{% %}の違い、“オブジェクト”とは何かを解説します。 前回までで書いたコードの復習にもなりますよ。

準備：練習用ファイル作成

練習用セクションファイルにコードを書いて、表示を見ながら進めていきましょう。 セクションディレクトリ内に、lesson2.liquidを作成してください。

{% schema %}内で、nameとpresetsを記述します。 以下のコードをそのまま貼り付けて頂いてもOKです。

lesson2.liquid

{% schema %}
  {
    "name": "lesson2",
    "settings":[] ,
    "presets": [
      {
        "name": "lesson2"
      }
    ]
  }
{% endschema %}

{% stylesheet %}
{% endstylesheet %}

{% javascript %}
{% endjavascript %}

表示を確認できるよう、テーマのカスタマイズ画面から配置しましょう。 ホームページと、デフォルトの商品にlesson2セクションを追加してください。 （※ページ内で配置する場所はどこでも構いません。）

1) ホームページ

2) 商品 > デフォルトの商品

現時点では、プレビュー部分でlesson2のセクションは表示されません。 上図のように挿入（配置）だけしておいてください。

Liquidの{{ }}と{% %}の違いを確認

情報を出力する{{ }}

Liquidでは{{と}}で変数を囲むことで、その変数の値を出力することが出来ます。 値を出力（表示）する = 二重括弧 {{ }} で囲うです。

lesson2.liquidの1行目に、以下のように書いてください。

lesson2.liquid

{{ shop.name }}

表示を確認してみましょう。 lesson2セクションを配置した位置で、ストアの名前が出力されているはずです。

処理（ロジック）を書く{% %}

Liquidでは{%と%}で囲むと、実行して欲しい処理の指示として認識されます。 {% %}で指示する処理としては、以下が代表的です。

• 繰り返し
• 条件
• 変数の定義
• 別のファイルを読み込む

{% %}内は、ページを表示する際に実行される処理です。 画面上には出力されません。

試しに、lesson2.liquidに書いた {{ shop.name }} を以下のように囲ってみましょう。 1行目のif~ 部分で「ストア名が空ではない場合」という条件をつけています。

lesson2.liquid

{% if shop.name != blank %}
  {{ shop.name }}
{% endif %}

コードの行数は増えましたが、ページの表示は変わりませんね。

Shopify公式ドキュメントでは、こうした{% %}での指示を「タグ（Tags）」と呼んでいます。 今使ったifなどのタグは次のレッスン以降で紹介します。

Liquidのオブジェクト(Objects)

オブジェクトとプロパティ

オブジェクトとは、プロパティ（KeyとValueのペア）の集合体のことを指します。 Shopifyでのオブジェクトは、Shopifyに登録されているデータをグループ化してまとめたものと考えると分かりやすいです。

例えば、shopというオブジェクトには、ストアの情報（ストア名、所在地、メールアドレスなど）が格納されています。商品情報はproductオブジェクト、ブログの記事情報はarticleオブジェクト…と、それぞれオブジェクトが用意されています。 そして、各オブジェクトの中には、いくつものプロパティがあります。

このプロパティのうち、“値”は表示するページや設定によって異なります。 下図は商品の情報、productオブジェクトのイメージです。

オブジェクトやプロパティという“枠組み”は共通ですが、値は商品ごとに違いますよね。 Shopifyテーマの作成・編集では、この異なっている“値"を呼び出したい（出力したい）ということが多いはずです。

Liquidオブジェクトを使ったデータの表示

オブジェクトの中の、プロパティの値を出力したい場合は、以下のようにドット（ピリオド）でプロパティ名を繋げて記述します。

最初に書いた{{shop.name}}は「shopオブジェクト内の、nameプロパティ」の情報を出力せよ、という指示なのです。

オブジェクトとテンプレートの関係

Liquidでは{{ }}内にオブジェクトとプロパティを書くことで、登録されている情報を呼び出すことが出来ます。

ですが、全てのオブジェクトを呼び出せるわけではありません。 lesson2.liquidで、{% endif %}の下の行に、以下記述を加えてください。

lesson2.liquid

{{ product.title }}

上書き保存し、ストアのホームページと商品ページのプレビューを見てみましょう。

ホームページでは、何も表示されていません。

商品 > デフォルトの商品ページでは、商品タイトルが表示されています。

これが、特定のテンプレートからのみアクセスできるオブジェクトです。 productオブジェクトの場合は、商品ページのtemplate内（ product template ）で使った場合のみ、該当する商品の情報にアクセスして出力することができます。

反対に、最初に書いたshopのように、どのテンプレートを使ったページからでもアクセスできるオブジェクトもあります。 どこでも使えるオブジェクトのことを“グローバルオブジェクト（Global Objects）”と呼びます。

オブジェクト、プロパティを調べるには？

Shopifyのシステムには、沢山のオブジェクトがあります。 オブジェクトごとに設定されているプロパティも異なりますし、どのテンプレートで使えるオブジェクトかという問題もありますね。

こうしたオブジェクトやプロパティについては、全て覚える必要はありません。 Shopify公式ドキュメント（shopify.dev）では、オブジェクト名ごとにプロパティの一覧が掲載されています。オブジェクトにアクセス可能なテンプレート等も載っていますので、必要に応じて調べられれば大丈夫です。

上記URLを開いて、左のオブジェクト一覧から「shop」を選んでみましょう。 右側に表示されているボックスのMapをクリック。

Directly accessible in（直接アクセス可能）の下が「Global」になっています。 この表示があれば、どのテンプレートからでもアクセスできるグローバルオブジェクトです。

次は、左のオブジェクト一覧から「product」を選んでみます。 Mapの表示が、shopとはかなり違っていますね。

まず、Directly accessible inの下にある、直接アクセス可能なテンプレートはproduct。 商品ページのテンプレートからのみ、アクセス・出力が可能と表示されています。

その下、Returned byはダイレクトに呼び出す以外で「値を出力できる」方法です。

例えば、collection.products。 collection.products＝ collectionオブジェクトのproductsプロパティを使うと、コレクションに登録されている商品のタイトルや画像を取得して出力可能、と読むことができます。

ちょっと難しいですが、最初はなんとなく把握できていれば問題ありません。 オブジェクトには特定のページからしか呼び出せないものがある、それはShopify公式ドキュメント（shopify.dev）で調べられる、この２つが分かれば大半は対応できます。