💧 Shopify Liquidマスター講座：動的テンプレートで実現するストアデザインの極意 ✨

こんにちは😊
[株式会社プロドウガ](https://qiita.com/organizations/prodouga-com)の@YushiYamamotoです！
[らくらくサイト](https://rakuraku-site.prodouga.com/)の開発・運営を担当しながら、React.js・Next.js専門のフリーランスエンジニアとしても活動しています❗️

「Shopifyのテーマエディタだけじゃ物足りない！もっと自由にストアデザインを操りたい！」「他のストアと差をつける、ユニークな機能を追加したい！」そんな向上心あふれるShopifyオーナーさんや、これからShopify開発に挑戦したいエンジニアの皆さんへ。

その願いを叶える鍵こそが、Shopify独自のテンプレート言語「**Liquid（リキッド）**」です。Liquidを理解し使いこなせるようになれば、まるで魔法のようにストアの見た目や動作を**動的（ダイナミック）**に変化させ、思い通りの高度なカスタマイズを実現できます。

この記事では、プログラミング初心者やエンジニア初学者の方でもLiquidの世界にスムーズに足を踏み入れられるよう、**Liquidの基本概念から具体的な書き方、そして実践的な活用例**まで、図解やサンプルコードを交えながら徹底的に解説します！

この記事を読み終える頃には、あなたもLiquidの魅力に気づき、「自分でもできそう！」という自信とワクワク感でいっぱいになっているはず。さあ、Liquidをマスターして、あなたのShopifyストアを唯一無二の存在へと進化させましょう！

## Liquidとは？Shopifyテーマの心臓部を動かす言語 🪄

**Liquid (リキッド)** とは、Shopifyが開発したオープンソースの**テンプレート言語**です。Rubyというプログラミング言語をベースに作られていますが、Rubyの深い知識がなくても扱えるように設計されています。

**Liquidの主な役割:**

Shopifyストアの**サーバーサイドでHTMLコンテンツを動的に生成する**ことです。これにより、以下のようなことが可能になります。

*   データベースに保存されている**商品情報**（名前、価格、画像、在庫など）をウェブページに表示する。
*   **顧客情報**（名前、注文履歴など）に応じて表示内容を変える。
*   **コレクション**（商品カテゴリ）内の商品を一覧表示する。
*   「もし在庫が0個なら『売り切れ』と表示する」といった**条件に応じて表示を分岐**させる。
*   同じデザインの部品（例：商品カード）を**繰り返し表示**する。

```mermaid
graph TD
    A[Shopifyストアのデータ
    （商品情報, 顧客情報など）] --> B(Liquidテンプレートエンジン);
    C[HTML/CSS/JavaScript
    （静的な骨組みとデザイン）] --> B;
    B --> D[ユーザーに表示される<br>動的なウェブページ✨];
```

簡単に言うと、Liquidは**「静的なHTMLの骨組み」に「Shopifyの動的なデータ」を流し込み、ユーザーごとに最適化されたウェブページを作り出すための接着剤**のようなものです。

:::note info
「テンプレート言語」と聞くと難しそうに感じるかもしれませんが、基本的なルールはシンプルです。HTMLの知識があれば、比較的スムーズに学習を始められますよ！
:::

## Liquidの基本構造：3つの要素を覚えよう！🧱

Liquidのコードは、主に以下の3つの要素（デリミタと呼ばれる特別な記号で囲まれた部分）で構成されます。これさえ覚えれば、Liquidコードを読む・書く第一歩はクリアです！

1.  **オブジェクト (Objects): `{{ ... }}` (ダブルカーリーブレース)**
    *   **役割**: Shopifyのデータ（文字列、数値、配列など）をHTML内に出力（表示）します。
    *   **書き方**: `{{ object.property }}` のように、オブジェクト名の後にピリオド `.` を挟んでプロパティ（属性）名を記述します。
    *   **例**:
        *   `{{ product.title }}` → 商品のタイトルが表示されます。
        *   `{{ cart.total_price }}` → カートの合計金額が表示されます。
        *   `{{ shop.name }}` → ストア名が表示されます。

2.  **タグ (Tags): `{% ... %}` (カーリーブレースとパーセント)**
    *   **役割**: プログラムのロジック（処理の流れ）や制御構造（条件分岐、繰り返しなど）を記述します。これらは直接HTMLに出力されるのではなく、HTMLの生成方法を制御します。
    *   **書き方**: `{% tag_name parameters %}` のように、タグ名の後に必要に応じてパラメータを記述します。多くのタグは `{% endtag_name %}` で閉じます。
    *   **代表的なタグ**:
        *   **条件分岐**: `if`, `unless`, `elsif`, `else`, `case/when`
        *   **繰り返し**: `for`, `cycle`, `tablerow`
        *   **変数割り当て**: `assign`, `capture`
        *   **コメント**: `comment`
        *   **その他**: `include`, `render`, `form`, `paginate` など多数。
    *   **例**:
        *   `{% if product.available %}` ... `{% endif %}` → もし商品が購入可能なら...
        *   `{% for product_variant in product.variants %}` ... `{% endfor %}` → 商品の各バリエーションに対して繰り返し...

3.  **フィルター (Filters): `|` (パイプ)**
    *   **役割**: オブジェクトの出力を変更・加工します。文字列操作、数値計算、日付フォーマット変更など、様々な便利なフィルターが用意されています。
    *   **書き方**: `{{ object | filter_name: parameter }}` のように、オブジェクトの後にパイプ `|` を挟み、フィルター名と必要に応じてパラメータを記述します。複数のフィルターを連結することも可能です。
    *   **例**:
        *   `{{ product.price | money }}` → 価格を適切な通貨形式（例: ¥1,234）で表示。
        *   `{{ "hello world" | capitalize }}` → "Hello world" と先頭を大文字に。
        *   `{{ product.description | truncate: 100, "..." }}` → 商品説明を最初の100文字に省略し、末尾に "..." を追加。
        *   `{{ article.published_at | date: "%Y年%m月%d日" }}` → ブログ記事の公開日を「2023年04月01日」のような形式で表示。

```mermaid
graph LR
    subgraph Liquidの3大要素
        A["オブジェクト
        {{ output }}
        データを表示"]
        B["タグ
        {% logic %}
        処理を制御"] 
        C["フィルター
        | modify
        データを加工"]
    end
    A --> D[ウェブページ]
    B --> D
    C --> D

```

:::note info
これらの要素を組み合わせて、HTMLファイル (拡張子が `.liquid` のファイル) の中に記述していくのがLiquidコーディングの基本です。
:::

## Liquidで何ができる？具体的なカスタマイズ例を見てみよう！🚀

Liquidを使いこなすと、テーマエディタだけでは実現できない、より細やかで動的なストアカスタマイズが可能になります。

### 例1：商品ページに「残り在庫わずか！」メッセージを表示する

```liquid
{% comment %} 商品ページ (product.liquid) の一部を想定 {% endcomment %}

<h1>{{ product.title }}</h1>
<p>価格: {{ product.price | money }}</p>

{% if product.available %}
  {% assign first_variant = product.variants.first %}
  {% if first_variant.inventory_management == "shopify" and first_variant.inventory_quantity > 0 and first_variant.inventory_quantity <= 5 %}
    <p style="color: red; font-weight: bold;">残り在庫わずかです！お早めに！</p>
  {% endif %}
  <form action="/cart/add" method="post">
    <input type="hidden" name="id" value="{{ first_variant.id }}">
    <button type="submit">カートに追加</button>
  </form>
{% else %}
  <p style="color: gray;">現在売り切れ中です。</p>
{% endif %}
```

*   **解説**:
    *   `{% if product.available %}`: まず商品が購入可能かチェック。
    *   `{% assign first_variant = product.variants.first %}`: 商品の最初のバリエーション情報を `first_variant` という変数に格納。
    *   `{% if first_variant.inventory_management == "shopify" and first_variant.inventory_quantity > 0 and first_variant.inventory_quantity <= 5 %}`: 在庫管理がShopifyで行われていて、在庫数が1以上5以下の場合に条件が真になります。
    *   この条件を満たせば、「残り在庫わずかです！お早めに！」という赤い太字のメッセージが表示されます。

### 例2：ホームページに特定のコレクションの商品を3つだけ表示する

<details><summary>ホームページ用Liquidコード例 (特定コレクション商品表示)</summary>

```liquid
{% comment %} ホームページ (index.liquid または sections/featured-collection.liquid など) の一部を想定 {% endcomment %}

{% assign featured_collection_handle = 'summer-specials' %}
{% assign product_limit = 3 %}

{% if collections[featured_collection_handle].products.size > 0 %}
  <h2>{{ collections[featured_collection_handle].title }}</h2>
  <div class="product-grid">
    {% for product in collections[featured_collection_handle].products limit: product_limit %}
      <div class="product-card">
        <a href="{{ product.url | within: collections[featured_collection_handle] }}">
          {% if product.featured_image %}
            <img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.featured_image.alt | escape }}">
          {% else %}
            {{ 'product-1' | placeholder_svg_tag: 'placeholder-svg' }}
          {% endif %}
          <h3>{{ product.title }}</h3>
          <p>{{ product.price | money }}</p>
        </a>
      </div>
    {% endfor %}
  </div>
{% else %}
  <p>現在、おすすめ商品はありません。</p>
{% endif %}
```

</details>

*   **解説**:
    *   `{% assign featured_collection_handle = 'summer-specials' %}`: 表示したいコレクションのハンドル（URLに使われる識別子）を変数に設定。
    *   `{% assign product_limit = 3 %}`: 表示する商品数を3つに設定。
    *   `{% if collections[featured_collection_handle].products.size > 0 %}`: 指定したコレクションに商品が存在するかチェック。
    *   `{% for product in collections[featured_collection_handle].products limit: product_limit %}`: コレクション内の商品を、指定した数だけ繰り返し処理。
    *   `within: collections[featured_collection_handle]` フィルターは、商品URLが現在のコレクションのコンテキスト内であることを保証します。
    *   `image_url: width: 400` フィルターは、画像の幅を400pxにリサイズして表示します。
    *   `placeholder_svg_tag` フィルターは、商品画像がない場合に代替のSVG画像を表示します。

### 例3：ログインしている顧客にだけ特別なメッセージを表示する

```liquid
{% comment %} ヘッダー (layout/theme.liquid や sections/header.liquid など) の一部を想定 {% endcomment %}

{% if customer %}
  <div class="welcome-message">
    こんにちは、{{ customer.first_name | default: "会員" }} 様！いつもご利用ありがとうございます。
    <a href="/account">マイページへ</a> | <a href="/account/logout">ログアウト</a>
  </div>
{% else %}
  <div class="guest-message">
    初めての方ですか？ <a href="/account/register">新規会員登録</a> | <a href="/account/login">ログイン</a>
  </div>
{% endif %}
```

*   **解説**:
    *   `{% if customer %}`: 顧客がログインしているかどうかをチェック。`customer` オブジェクトはログインしている場合にのみ存在します。
    *   ログインしていれば、顧客のファーストネーム（なければ「会員」）と共にウェルカムメッセージとマイページ/ログアウトリンクを表示。
    *   ログインしていなければ、新規登録/ログインリンクを表示。
    *   `default: "会員"` フィルターは、`customer.first_name` が空の場合に「会員」という文字列を使用します。

:::note alert
**コード編集は慎重に！必ずバックアップを！**
Liquidコードを編集する際は、必ず事前に**テーマを複製してバックアップを取ってから**作業しましょう。Shopify管理画面の「オンラインストア」>「テーマ」で、現在使用しているテーマの「アクション」から「複製する」を選べば簡単にバックアップできます。万が一エラーが出ても、すぐに元の状態に戻せるようにしておくことが非常に重要です。
:::

## Liquid学習のステップと役立つリソース 📚

Liquidをマスターするための学習ステップと、参考になるリソースをご紹介します。

1.  **HTMLとCSSの基本を理解する**:
    *   LiquidはHTMLと密接に関連しています。まずはHTMLでウェブページの構造を、CSSで見た目をどう作るのか、基本的な知識を身につけましょう。
    *   学習サイト例: [Progate](https://prog-8.com/), [ドットインストール](https://dotinstall.com/)
2.  **Shopifyテーマの構造を把握する**:
    *   どのLiquidファイルがどのページや部分に対応しているのか、テーマ全体のファイル構成を理解することが重要です。
    *   主なディレクトリ: `layout/`, `templates/`, `sections/`, `snippets/`, `assets/`
3.  **Liquidの基本構文（オブジェクト、タグ、フィルター）を覚える**:
    *   この記事で紹介した3つの要素の役割と基本的な使い方をマスターしましょう。
4.  **Shopify公式ドキュメント (Shopify.dev) を参照する**:
    *   [Shopify.dev](https://shopify.dev/docs/themes/liquid) には、Liquidの全てのオブジェクト、タグ、フィルターの詳細なリファレンスやチュートリアルが掲載されています。**これが最も信頼できる情報源**です。
    *   最初は英語ですが、ブラウザの翻訳機能などを使えば理解の助けになります。
5.  **既存のテーマコードを読んでみる**:
    *   実際にShopifyテーマ（特にDawnのような無料公式テーマ）の `.liquid` ファイルを開き、どのようにLiquidが使われているか読んでみましょう。最初は分からなくても、徐々にパターンが見えてきます。
6.  **簡単なカスタマイズから試してみる**:
    *   テキストの色を変える、小さなメッセージを追加するなど、簡単な変更から始めて、Liquidがどのように動作するかを体感しましょう。
7.  **Shopifyコミュニティやブログ記事を活用する**:
    *   Shopifyコミュニティフォーラムや、多くの開発者が書いているブログ記事には、具体的なカスタマイズ例やトラブルシューティングの情報がたくさんあります。

```mermaid
graph TD
    A[1.HTML/CSSの基礎習得] --> B[2.Shopifyテーマ構造の理解];
    B --> C[3.Liquid基本構文の習得];
    C --> D[4.公式ドキュメント参照（Shopify.dev）];
    D --> E[5.既存テーマコードの読解];
    E --> F[6.簡単なカスタマイズ実践];
    F --> G[7.コミュニティ/ブログ活用];
    G --> H[Liquidマスターへの道 ✨];
```

## まとめ：Liquidで、あなたのストアの可能性を無限大に！ 🌌

Liquidは、Shopifyストアを単なる「商品を並べる場所」から、**ブランドの世界観を表現し、顧客とインタラクティブに関わるダイナミックな空間**へと進化させるための強力なツールです。

最初は難しく感じるかもしれませんが、

*   **オブジェクト `{{ ... }}`** でデータを表示し、
*   **タグ `{% ... %}`** で処理をコントロールし、
*   **フィルター `|`** でデータを加工する

という基本さえ押さえれば、あとは実践あるのみ！

テーマエディタの限界を超え、あなたの創造性を存分に発揮して、お客様を魅了するユニークなストア体験を作り上げてください。Liquidをマスターすれば、Shopifyでのストア運営がもっと楽しく、もっと奥深くなること間違いなしです！

さあ、Liquidの力を借りて、あなたのShopifyストアの可能性を無限に広げましょう！応援しています！😊

---

# 最後に：業務委託のご相談を承ります
私は業務委託エンジニアとしてWEB制作やシステム開発を請け負っています。最新技術を活用したレスポンシブなWebサイト制作、インタラクティブなアプリケーション開発、API連携など幅広いご要望に対応可能です。

「課題解決に向けた即戦力が欲しい」「高品質なWeb制作を依頼したい」という方は、お気軽にご相談ください。一緒にビジネスの成長を目指しましょう！

<a href="https://github.com/YushiYamamoto">
<img src="https://img.shields.io/badge/　GitHub-181717?style=for-the-badge&logo=github&logoColor=white" alt="GitHub">
</a>

<a href="https://yushi.prodouga.com/" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　ポートフォリオ-FF5500?style=for-the-badge&logo=react&logoColor=white" alt="ポートフォリオ">
</a>
  
<a href="https://qiita.com/YushiYamamoto" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　Qiita-55C500?style=for-the-badge&logo=qiita&logoColor=white" alt="Qiita">
</a>

<a href="https://codepen.io/yamamotoyushi" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　Codepen-000000?style=for-the-badge&logo=codepen&logoColor=white" alt="Codepen">
</a>
<br>
<a href="https://prodouga.com/" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　株式会社プロドウガ-FF0000?style=for-the-badge&logo=firefox&logoColor=white" alt="株式会社プロドウガ">
</a>
<a href="https://rakuraku-site.prodouga.com/" target="_blank" rel="noopener">
<img src="https://img.shields.io/badge/　らくらくサイト-4285F4?style=for-the-badge&logo=rocket&logoColor=white" alt="らくらくサイト">
</a>