スニペットとrender・LiquidDoc
スニペットをrenderで呼び出し、引数のスコープとLiquidDocの書き方を説明できる
最終確認: 2026-09
解説
受託の現場でなぜ必要か： この回では、スニペット（再利用する小さな部品）をrenderで呼び出し、引数の渡し方とLiquidDocの書き方が分かります。
受託では、renderの隔離を知らずに書くと、呼び出し元の変数が見えず「動かない」でつまずきます。
スニペットとは、引数で値を受け取る再利用部品
スニペットは、snippets/に置く再利用部品です。
商品カード・価格表示・アイコンのように、同じ表示を複数の場所で使うものを切り出します。
セクションとの違いは、エディタの設定（schema）を持たず、引数で値を受け取ることです。
renderは、渡した変数しか見えない
スニペットは、{% render 'name', key: value %}で呼びます。
呼び出し側の変数は、自動では見えません。
必要な値は、明示的に渡します。
この隔離があるから、どこから呼んでも同じ結果になります。{% render 'card' for products as product %}の繰り返し形や、withの別名渡しもあります。
LiquidDocを書くと、渡し忘れを機械が見つける
スニペットやブロックの冒頭に{% doc %}を置き、@param {型} 名前 - 説明と@exampleを書きます。
VS Code拡張が引数を補完し、Theme Checkが渡し忘れや型違いを検出します。
@param {string} [url]のように角括弧で囲むと、省略できる引数になります。
省略時の既定値は、defaultフィルタで与えます。
受託では、チーム内の仕様書の代わりになります。
発展：旧タグincludeは使わない
旧タグの{% include %}は、呼び出し元の変数をすべて共有し、性能も劣ります。
Theme Checkが警告します。
既存テーマで見かけたら、暗黙で使っていた変数を洗い出してから、renderに置き換えます。
※ ShopifyはShopify Inc.の商標です。本サイトは個人が制作した非公式の学習教材であり、同社の承認・提携・後援を受けていません。記載内容は2026-09時点のものです。料金・上限値・管理画面のラベルは変わるため、作業の前に公式ドキュメントで確認してください。