ShopifyのLiquidタグ「render」は、スニペットと呼ばれる再利用可能なコード部品を読み込むための基本機能です。この記事では、renderの基本構文やスコープの概念、引数と渡り値の役割を初心者向けにやさしく解説しました。仕組みを理解することで、効率的なテーマ開発が可能になります。
Shopifyのテーマ開発において欠かせないLiquidタグのひとつが「render」です。
これは「スニペット(snippets)」と呼ばれるコードの部品を呼び出すためのタグで、同じコードを繰り返し使いたいときや、テンプレートをすっきり整理したいときに活躍します。
たとえば、商品カードやバナー、ナビゲーションメニューなど、複数のページで共通して使われる要素はスニペットとして切り出し、必要な場所で「render」を使って読み込むのが基本です。
今回は、この「render」タグの基本的な使い方に絞って、初心者の方にもわかりやすく解説していきます。
「render」の基本
「render（レンダー）」は、英語で「提供する」「提示する」といった意味がありますが、プログラミングの世界では「レンダリング」として使われ、データやコードを処理して、画面上に表示させることを指します。
Shopifyにおいても、この「render」タグは「表示のための部品」を読み込むために使われます。具体的には、テンプレート内でスニペット（部分テンプレート）を呼び出す際に使用し、構文はとてもシンプルです。
{% render 'ファイル名' %}このときの「ファイル名」は、管理画面の「コード > snippets」フォルダ内にあるLiquidファイル（例：product-card.liquidなど）を指します。
「render」タグを使うことで、1つのスニペットを複数のテンプレートから再利用することができ、コードの保守性や読みやすさが大きく向上します。
「render」の引数と渡り値
スニペットファイルには、単なるHTML構造だけでなく、Liquidによるテンプレートロジックが記述されるのが一般的です。
その中で、何らかの「処理」を行いたい場合には、renderタグでスニペットを呼び出す際に、処理の“引数”と、その引数に渡す“値（渡り値）”を指定する必要があります。
・引数：スニペット内で使う「変数の名前」（例：product）
・渡り値：その引数に実際に渡すデータ（例：現在ループ中の商品）
ここで覚えておきたいポイントがあります。
「render」はスコープ(変数が使える範囲)が分離されるため、スニペット内はローカル変数の世界になります。
呼び出し元で使っている変数は、そのままではスニペット内で見えません。だからこそ、引数と渡り値を使って「このデータを使ってね」と明示的に渡す必要があるのです。
たとえば、商品カードを表示するスニペットを呼び出すときはこうなります。
{% for product in collection.products %}
{% render 'product-card', product: product %}
{% endfor %}この場合、ループで回している「product」は呼び出し元の変数です。
「render」を使うとスコープが変わるため、そのままではスニペットに届きません。
だから、「product: product」と書いて「この商品データをスニペットに渡すよ」と指定しているわけです。
実際のスニペット呼び出し、引数と渡り値(サンプルコード)
では実際に、どのようにスニペットを呼び出し、引数と渡り値によってデータが表示されるのか、サンプルコードを見ながら確認してみましょう。
{% for product in collections['protein'].products %}
{% render 'product-card', product: product %}
{% endfor %}このコードは、ハンドルが「protein (プロテイン)」という名前のコレクションに属する商品を1つずつ処理して、「product-card.liquid」というスニペットを呼び出している例です。
ループ内で1件ずつの商品オブジェクトを「product: product」という形でスニペットに渡しています。
続いて、スニペット「product-card.liquid」の中身は以下のようになっているとします。
<div class="product-card">
<img src="{{ product.featured_image | image_url: width: 400 }}" alt="{{ product.title }}">
<p>{{ product.title }}</p>
<p>{{ product.price | money }}</p>
</div>このスニペット内では、「product」という変数を使って商品の画像・タイトル・価格を表示しています。
ここで重要なのが、スニペット内のproductはローカル変数であるという点です。
「render」タグを使うとスコープが分かれるため、スニペット内では、外側のテンプレートで使っている「product」の情報は自動的には引き継がれません。
そのため、「{% render ‘product-card’, product: product %}」と明示的に引数と渡り値を指定し、「この商品データを、スニペットの「product」という変数に渡して使ってください」と伝える必要があるのです。
この仕組みによって、スニペットは渡されたデータに基づき、表示ロジックに沿って商品画像や商品名、価格などを表示できるようになります。
以上、ShopifyのLiquidテンプレートタグ「render」の基本的な使い方について、ざっくりと解説してきました。
今回ご紹介したのはシンプルな例でしたが、実際のスニペットファイルの中身には、条件分岐やループ、複数の引数と渡り値のペアが含まれることも多く、より複雑なロジックを扱う場面も出てきます。
その分「render」をしっかり理解しておくことは、Shopifyテーマ開発においてとても重要なステップになります。
この記事が、「render」の仕組みやスコープの考え方を理解するきっかけになれば嬉しいです。
引き続き、Liquidの世界を一緒に深掘りしていきましょう！
