はじめに
Liquidフィルターは多数存在しますが、実際によく使うものは限られています。
本記事では、Shopifyテーマ開発で頻繁に使用する主要フィルターを、カテゴリ別に整理して解説します。
実例と一緒に覚えることで、必要な時にすぐ使えるようになりますので、ぜひ参考にしてみてください。
文字列操作フィルター
大文字・小文字変換
{{ 'hello world' | capitalize }} <!-- Hello world -->
{{ 'hello world' | upcase }} <!-- HELLO WORLD -->
{{ 'HELLO WORLD' | downcase }} <!-- hello world -->文字列の追加・削除
{{ 'hello' | append: ' world' }} <!-- hello world -->
{{ 'hello' | prepend: 'Say ' }} <!-- Say hello -->
{{ 'hello world' | remove: 'world' }} <!-- hello -->
{{ 'hello world' | remove_first: 'l' }} <!-- helo world -->
{{ 'hello world' | remove_last: 'l' }} <!-- hello word -->文字列の置換
{{ 'hello world' | replace: 'world', 'Shopify' }} <!-- hello Shopify -->
{{ 'hello world' | replace_first: 'l', 'L' }} <!-- heLlo world -->
{{ 'hello world' | replace_last: 'l', 'L' }} <!-- hello worLd -->文字列の切り詰め
{{ 'hello world' | truncate: 8 }} <!-- hello... -->
{{ 'hello world' | truncate: 8, '!!' }} <!-- hello!! -->
{{ 'hello world' | truncatewords: 1 }} <!-- hello... -->
{{ 'hello world' | truncatewords: 1, '--' }} <!-- hello-- -->空白の処理
{{ ' hello ' | strip }} <!-- hello -->
{{ ' hello' | lstrip }} <!-- hello -->
{{ 'hello ' | rstrip }} <!-- hello -->文字列の分割・サイズ
{{ 'a,b,c' | split: ',' }} <!-- ["a", "b", "c"] -->
{{ 'hello' | size }} <!-- 5 -->数値・計算フィルター
基本的な四則演算
{{ 10 | plus: 5 }} <!-- 15 -->
{{ 10 | minus: 3 }} <!-- 7 -->
{{ 10 | times: 2 }} <!-- 20 -->
{{ 10 | divided_by: 3 }} <!-- 3 -->
{{ 10 | modulo: 3 }} <!-- 1 -->数値の丸め処理
{{ 1234.567 | round }} <!-- 1235 -->
{{ 1234.567 | round: 2 }} <!-- 1234.57 -->
{{ 1234.567 | ceil }} <!-- 1235 -->
{{ 1234.567 | floor }} <!-- 1234 -->
{{ -5 | abs }} <!-- 5 -->数値の制限
{{ 5 | at_least: 10 }} <!-- 10 -->
{{ 100 | at_most: 50 }} <!-- 50 -->配列・コレクションフィルター
要素の取得
{{ array | first }} <!-- 最初の要素 -->
{{ array | last }} <!-- 最後の要素 -->
{{ array | size }} <!-- 配列のサイズ -->配列の操作
{{ array | reverse }} <!-- 逆順 -->
{{ array | sort }} <!-- ソート -->
{{ array | sort: 'price' }} <!-- プロパティでソート -->
{{ array | sort_natural }} <!-- 自然順ソート -->配列の結合・フィルタリング
{{ array | join }} <!-- 要素を結合 -->
{{ array | join: ', ' }} <!-- カンマ区切りで結合 -->
{{ array | uniq }} <!-- 重複を削除 -->
{{ array | compact }} <!-- nil値を削除 -->
{{ array1 | concat: array2 }} <!-- 配列を結合 -->日付・時刻フィルター
{{ 'now' | date: '%Y年%m月%d日' }} <!-- 2025年09月08日 -->
{{ 'now' | date: '%Y-%m-%d %H:%M:%S' }} <!-- 2025-09-08 15:30:45 -->
{{ 'now' | date: '%A, %B %d, %Y' }} <!-- Sunday, September 08, 2025 -->
{{ article.published_at | date: '%b %d, %Y' }} <!-- Sep 08, 2025 -->日付フォーマットの記号
%Y– 4桁の年（2025）%y– 2桁の年（25）%m– 月（01-12）%d– 日（01-31）%H– 時（00-23）%M– 分（00-59）%S– 秒（00-59）%A– 曜日の名前%B– 月の名前
Shopify専用フィルター
金額フォーマット
{{ 123400 | money }} <!-- ¥1,234 -->
{{ 123400 | money_with_currency }} <!-- ¥1,234 JPY -->
{{ 123400 | money_without_currency }} <!-- 1,234 -->
{{ 123400 | money_without_trailing_zeros }} <!-- ¥1,234 -->画像関連
{{ product.featured_image | img_url: '300x300' }} <!-- 画像URL生成 -->
{{ image | img_url: 'master' }} <!-- オリジナルサイズ -->
{{ image | img_url: '300x', crop: 'center' }} <!-- クロップ指定 -->
{{ image | img_tag }} <!-- <img>タグ生成 -->
{{ image | img_tag: 'Product Image', 'product-img' }} <!-- alt/class付き -->アセット関連
{{ 'style.css' | asset_url }} <!-- アセットURL -->
{{ 'style.css' | asset_url | stylesheet_tag }} <!-- <link>タグ -->
{{ 'script.js' | asset_url | script_tag }} <!-- <script>タグ -->
{{ 'logo.png' | file_url }} <!-- ファイルURL -->翻訳
{{ 'general.404.title' | t }} <!-- 翻訳テキスト -->
{{ 'products.product.add_to_cart' | t }} <!-- カートに追加 -->便利なユーティリティフィルター
デフォルト値
{{ value | default: 'デフォルト値' }} <!-- 値がnilの場合デフォルト値 -->
{{ product.price | default: 0 }} <!-- 価格またはデフォルト値 -->JSON変換
{{ object | json }} <!-- JSON形式に変換 -->HTMLタグ生成
{{ 'cart' | link_to: 'View Cart' }} <!-- カートへのリンク -->
{{ product | link_to }} <!-- 商品へのリンク -->
{{ collection | link_to: collection.title }} <!-- コレクションリンク -->カラー変換
{{ color | color_to_rgb }} <!-- RGB変換 -->
{{ color | color_to_hex }} <!-- HEX変換 -->
{{ color | color_to_hsl }} <!-- HSL変換 -->フィルターの連結
フィルターは|でつなげて連続使用できます：
{{ product.title | downcase | truncate: 20 }}
<!-- タイトルを小文字化→20文字で切る -->
{{ product.price | divided_by: 100 | round: 2 | money }}
<!-- 価格を100で割る→小数点2桁→通貨フォーマット -->
{{ collection.products | where: 'available', true | sort: 'price' | first }}
<!-- 在庫あり商品→価格順ソート→最初の1件 -->まとめ
Liquidフィルターは、Shopifyテーマ開発を効率的かつ柔軟にしてくれる非常に強力なツールです。
今回紹介した主要フィルターを押さえておけば、実装スピードも上がり、表現の幅もぐっと広がります。
ぜひ日々の開発に取り入れて活用してみてください！
