Knowledge Diary

【Shopify】Liquidの snippets（スニペット） の使い方を解説！活用して開発効率やメンテナンス性を向上！

Published：　Updated：

【Shopify】Liquidの snippets（スニペット） の使い方を解説！活用して開発効率やメンテナンス性を向上！

こんにちは、Webデザイナーの 夢拓（MUHIRO）です。

Shopifyのテーマ開発におして、snippets（スニペット）は非常に欠かせない機能です。
スニペットを使用することでコードの再利用性を高め、開発効率やメンテナンス性をを大幅に向上させることができます！

この記事では、Liquidのsnippets（スニペット）の使い方を詳しく解説します。

この記事はこんな方におすすめ！

  • Shopifyのストアフロント開発をする方
  • Shopifyの開発初心者

この記事を読んで、このShopifyのLiquidのsnippets（スニペット）の実践的なテクニックを学んで最適なShopifyストアを制作いただけるようになります！

それでは、どうぞ！

Index

［ CloseOpen ］

スニペット（snippets）とは？

プログラムやスクリプトの中で再利用可能なコードの断片のことです。

開発者が同じ処理を繰り返し実装する必要がある場合、スニペットを使うことでコードの冗長性を減らし、効率的に開発を進めることができます。

スニペットは特定の機能や操作を簡潔にまとめたもので、どのプロジェクトでも呼び出して使用可能です。これにより、メンテナンスや更新作業が容易になり、開発速度も向上します。

Shopifyのテーマ開発において、スニペットは.liquidファイルとして保存され、テーマ内の複数の場所で使用できます。

snippets（スニペット）の追加方法

Liquidスニペットは通常、.liquidファイルとして保存します。
追加手順を以下で解説します。

管理画面TOPからコード編集画面へ移動

snippets（スニペット）の追加方法の説明手順1
  1. オンラインストア ＞ テーマを開きます。
  2. スニペットを作成したいテーマの「・・・」（3点リーダー）をクリックします。
  3. 「コードを編集」をクリック。

snippets（スニペット）ファイルを作成する

snippets（スニペット）の追加方法の説明手順2
  1. 「snippets」をフォルダを探します。開いている関係ないフォルダは閉じると見つけやすいです。
  2. 「新しいスニペットを追加する」をクリック。
  3. ファイルを指定します。
  4. 「完了」をクリックしてファイル作成完了。

ファイルの作成が確認できたら、HTMLやLiquidでコーディング

snippets（スニペット）の追加方法の説明手順3
  1. ファイルが追加されているか確認。
  2. コーディングをしていきます。
  3. 完了したら「保存」をクリック。保存するとフロントページにも反映がされます。

snippets（スニペット）の基本的な使い方

上記で登録した追加したスニペットを表示する方法を解説します。

snippets（スニペット）を使用するにはrenderタグを使用

スニペットを使用するには、Liquidのrenderタグを使用します。
renderの後に作成したスニペットのファイル名を指定します。“.liquid”は省略します。

記述方法は以下になります。

Liquid

    {% render 'snippet-name' %}

以前はincludeタグが使われていましたが、現在はrenderが推奨されている

includeタグについて

親テンプレートのすべての変数をスニペットに自動的に渡します。
これにより、スニペット内で親テンプレートのどの変数でも使用できるため、非常に柔軟性が高いです。
また、スニペット内で定義された変数を親テンプレートで使用することもできる双方向の変数共有が可能です。
しかし、この柔軟性は同時にパフォーマンスの低下や予期せぬ変数の上書きなどの問題を引き起こす可能性があります。

renderタグについて

現在Shopifyが推奨している方法です。

renderタグを使用する場合、スニペットで使用したい変数を明示的に渡す必要があります。
これにより、変数のスコープが限定され、コードの可読性とメンテナンス性が向上します。
また、必要な変数のみを渡すため、includeタグと比較してパフォーマンスが向上します。
ただし、renderタグではスニペットから親テンプレートへの変数の共有はできません。



renderタグの導入により、開発者はより制御されたスコープでスニペットを使用できるようになりました。
これは特に大規模なプロジェクトや複雑なテーマで有用で、変数の衝突や予期せぬ動作を減らし、コードの予測可能性を高めることができます。

ただし、renderタグの使用にはincludeタグと比較していくつかの制限があります。
すべての変数を自動的に利用できないため、スニペットの再利用性が低下する可能性があります。
また、既存のincludeタグを使用したコードをrenderタグに移行する際には、変数の渡し方を見直す必要があります。

snippets（スニペット）に値を渡す

スニペットをより柔軟に使用するために、値を渡すことができます。これにより、同じスニペットを異なるコンテキストで使用できます。

変数を渡す方法

Liquid

    {% render 'snippet-name', name: "SHOPIFY" %}

この例では、“name”という変数に“SHOPIFY”という値を渡しています。
スニペット内では、この値を出力することができます。

Liquid

    // snippet-name.liquidで変数を出力
    {{ name }}

オブジェクトを渡す方法

Liquid

    {% for product in collection.products %}
        {% render 'product-card' with product %}
    {% endfor %}

この例では、productオブジェクト全体をスニペットに渡しています。
スニペット内では、productオブジェクトのプロパティ（例：{{ product.title }}）にアクセスできます。

withキーワードについて

withキーワードは renderタグで使用されており、スニペットに変数を渡す際の重要な役割を果たしています。
“with”の主な機能と使用方法は以下の通りです。

  1. 変数の受け渡し
    親テンプレートの変数をスニペットに渡すことができます。
    上記の場合、product 変数が "product-card" スニペットに渡されています。
  2. スコープの制限
    スニペット内でアクセスできる変数を明示的に指定できます。
    これにより、スニペット内で使用可能な変数が明確になり、予期せぬ変数の干渉を防ぐことができます。
  3. 簡潔な構文
    複数のパラメータを個別に指定する必要がなく、オブジェクト全体を一度に渡すことができます。
  4. 可読性の向上
    どの変数がスニペットに渡されているかが明確になり、コードの可読性が向上します。

このアプローチにより、商品カードの表示ロジックを再利用可能なスニペットにカプセル化しつつ、必要なデータを柔軟に渡すことができます。

複数の変数を渡す

スニペットに複数の変数を“,”カンマ区切りで渡すこともできます。

Liquid

    {% render 'snippet-name' with product ,
        name: 'SHOPIFY' ,
        limit_count: 2 , 
        heading_text: 'すべての商品'
    %}

パフォーマンス最適化

大規模なテーマでは、スニペットを使用してコードを分割することで、ページの読み込み速度を改善できる場合があります。
特に、条件付きで読み込むコンテンツをスニペットに分離することで、必要なときのみコードを実行できます。

この記事に関連するよくあるご質問

Q
Liquid（Liquidテンプレート言語）とは？
A

Shopifyが開発したオープンソースのテンプレート言語です。

この言語は、Rubyベースで設計されており、動的なコンテンツを生成するために使用されます。Liquidは、静的なHTMLと動的なデータを結びつけることで、ECサイトに特化した機能を提供します。

最大の特徴は、そのシンプルさと柔軟性です。
プログラミング経験が少ない人でも比較的容易に習得できるため、多くのユーザーが利用しています。また、LiquidはShopifyプラットフォームと密接に統合されており、商品情報や顧客データなどに直接アクセスできるため、ECサイトの構築やカスタマイズが容易になります。

セキュリティ面でも配慮されており、悪意のあるコードが実行されるリスクを低減するために、直接的なファイルシステムへのアクセスや任意のRubyコードの実行は制限されています。
さらに、高いパフォーマンスを実現するために最適化されており、テンプレートはコンパイルされてキャッシュされることで、繰り返し使用される場合の処理速度が向上します。

Q
コンテキストとは？
A

ITやプログラミングにおけるコンテキストとは、プログラムの実行環境や状態を指します。

変数の値、メモリ状況、ユーザー情報などを含み、プログラムの動作に影響を与えます。
言語や環境によって具体的な意味は異なりますが、適切に扱うことで効率的で安全なプログラム開発が可能になります。

Q
カプセル化とは？
A

オブジェクト指向プログラミングの基本原則の一つです。

データとそのデータを操作するメソッドを1つのクラスにまとめて、外部からのアクセスを制限する技術を指します。
この手法は、データの隠蔽（エンキャプスレーション）とも呼ばれ、データの整合性を保護する役割を果たします。

カプセル化により、クラス内でのデータの管理が容易になり、変更が必要な場合でもクラス内部でのみ影響を抑えられ、外部コードへの影響を最小限に留めることができます。

また、適切なカプセル化により、コードの再利用性や保守性も向上し、将来の変更や拡張にも柔軟に対応できるようになります。

まとめ

いかでしたでしょうか？
今回の記事では、Shopifyテーマのsnippets（スニペット）について解説をしてきました！

今回のポイントをまとめますと、次のとおりです。

今回の記事のまとめ

  • snippets（スニペット）はコードの再利用性とメンテナンス性の向上
  • renderタグを使用してパフォーマンスを最適化

snippets（スニペット）を活用することで、再利用性とメンテナンス性の向上したテーマ開発が可能になります。
初めは小さな部分から始めて、徐々にスニペットの使用範囲を広げていくことをおすすめします。
スニペットの力を最大限に活用することで、Shopifyストアの可能性を大きく広げることができるでしょう！

最後までお読みいただきありがとうございました！

この記事を書いた人

夢拓（MUHIRO）/ Webデザイナー（フロントエンド）

大学中退して飲食業界に就職。飲食業界のブラックな部分を知り退職、その後無職。職業訓練校と独学で今勤めている制作会社に入社。 主にデザイン・構築をメインにUI/UXやアクセシビリティに考慮したWebサイト制作。スクラッチ案件多数、Shopifyテーマカスタマイズは60件以上の実績あり。

View Profile

免責事項

  • 当ブログでは、執筆者の経験に基づいた技術情報や知識を提供していますが、その正確性や普遍性を保証するものではありません。情報は執筆時点のものであり、技術の進展により古くなる可能性があります。これらの情報を利用する際は、自己責任で行ってください。必要に応じて専門家の助言を求めることをお勧めします。
  • 当ブログで提供するプログラムコードは、執筆者の最善の知識に基づいていますが、その正確性や完全性を保証するものではありません。コードの利用や実行により生じた損害や問題については、一切の責任を負いかねます。コードの使用は、自己責任で行ってください。
  • 当サイトで使用しているスクリーンショット画像について、著作権はサイトの権利者に帰属します。掲載に不都合がある場合、お手数ですがお問い合わせフォームよりご連絡ください。
  • 当サイトからリンクよって他のサイトに移動された場合、移動先サイトで提供される情報、サービス等について一切の責任を負いかねますのでご了承ください。
  • 当サイトに掲載された内容によって生じた損害等の一切の責任を負いかねますのでご了承ください。