【Shopify】date（日付）フィルターの使い方を解説

悩む人

・日付がうまく表示されない！
・date（日付）フィルターの使い方がわからない！

こんな疑問やお悩みを解決します。

Shopifyのテーマ開発・カスタマイズで避けて通れないものの一つが、日付の表示です。

Shopifyストアではブログやお知らせの投稿が可能になっているため、それらの日付表示は必須です。

でも、日付フィルターって正直どうやって使えばいいのかわからないという人も多いはず。

ということで今回は、date（日付）フィルターの使い方から、意外と知らない超ラクな日付フォーマットのやり方も解説していきます。

本記事を読めば、どうやって書けば思い通りに日付が表示されるのか悩まなくて済むようになるはずです。

今回の記事は、Shopify公式リファレンスを参考に解説していきます。

date（日付）フィルターの使い方

dateフィルターは以下のように記述し、使用できます。

{{ 日付の入った変数 | date }}

dateフィルターの記述例と出力結果は以下の通りです。

{{ product.published_at | date }}

//出力：
Monday, May 3, 2021 at 12:24 pm +0900

トマトソース

上記のようにdateフィルターを付与すると、日付の表示ができます。

ちなみに、dateフィルターなしだとこんな出力結果となります。

{{ product.published_at }}

//出力：
2021-05-03 12:24:20 +0900

これでも問題ないと言えばそうですが、「+0900」とかが邪魔ですよね。

なので、以下で日付を簡単にフォーマットできる方法を解説していきます。

Rubyのstrftimeを使った日付フォーマット

dateフィルターは、Rubyのstrftimeメソッドを使うことで簡単にフォーマットができます。

例えば、以下のように記述すると記載した出力結果が得られます。

{{ product.published_at | date: '%Y年 %-m月 %d日' }}

//出力：
2021年 5月 03日

悩む人

え、Rubyはあんまり知らない！

という方もいるかと思います。

でも、以下で紹介する対応表を覚えておけば簡単に使えるので安心してください。

Rubyの公式リファレンスはこちらです。

年のフォーマット

年のフォーマットは以下のものが使用できます。

それぞれのフォーマットで記事執筆日を出力すると以下のようになります。

<!-- 執筆日：2021年5月3日 -->
{{ article.published_at | date: '%Y' }} //①
{{ article.published_at | date: '%C' }} //②
{{ article.published_at | date: '%y' }} //③

//出力：
2021 //①
20 //②
21 //③

月のフォーマット

続いては、月のフォーマットです。

それぞれのフォーマットで記事執筆日を出力すると以下のようになります。

<!-- 執筆日：2021年5月3日 -->
{{ article.published_at | date: '%m' }} //①
{{ article.published_at | date: '%_m' }} //②
{{ article.published_at | date: '%-m' }} //③
{{ article.published_at | date: '%B' }} //④
{{ article.published_at | date: '%b' }} //⑤

//出力：
05 //①
 5 //②
5 //③
May //④
May //⑤

日のフォーマット

お次は日にちのフォーマットです。

それぞれのフォーマットで記事執筆日を出力すると以下のようになります。

<!-- 執筆日：2021年5月3日 -->
{{ article.published_at | date: '%d' }} //①
{{ article.published_at | date: '%e' }} //②
{{ article.published_at | date: '%j' }} //③

//出力：
03 //①
 3 //②
3 //③

曜日のフォーマット

次は曜日のフォーマットです。

曜日のフォーマットは他にも%uや％wなどありますが、あまり使うことはないので気にしなくてOKです。

それぞれのフォーマットで記事執筆日を出力すると以下のようになります。

<!-- 執筆日：2021年5月3日 -->
{{ article.published_at | date: '%A' }} //①
{{ article.published_at | date: '%a' }} //②

//出力：
Saturday //①
Sat //②

時間のフォーマット

最後は時間のフォーマットです。

時間フォーマットは種類が多いので、代表的なものだけ紹介しておきます。

トマトソース

念のため指摘しておきますが、表の一番上の「時のフォーマット」は『I（アイ）』ではなく、小文字のLです。

それぞれのフォーマットで記事執筆日を出力すると以下のようになります。

<!-- 執筆日：2021年5月3日20:16 -->
{{ article.published_at | date: '%k' }} //①
{{ article.published_at | date: '%l' }} //②
{{ article.published_at | date: '%p' }} //③
{{ article.published_at | date: '%M' }} //④
{{ article.published_at | date: '%S' }} //⑤

//出力：
20 //①
 8 //②
pm //③
17 //④
23 //⑤

以上が、Shopifyで使えるRubyの日時フォーマットです。

ここまで見てきて、

「Rubyのフォーマット覚えるのがめんどくさい！」

とお考えの方もいるかもしれませんが、そんな方に朗報です。

ShopifyのLiquidにもフォーマットがあるので、次に解説していきます。

format（日付フォーマット）の使い方

便利なことにShopifyのLiquidにも日付のフォーマットが用意されています。

Liquidの日付フォーマットは文字列なので、Rubyの「%l」や「%k」みたいにどれがどれに対応しているのかわかりづらいこともなく、非常に使いやすいのでぜひ活用してみてください。

Liquidの日付フォーマットの記述方法は以下のようにします。

{{ article.published_at | date: format: ‘フォーマット名‘}}

トマトソース

これまで通り「｜date」と記述した後にformatを指定してあげるだけですね！

Liquidに用意されている日付フォーマットは以下の6つです。

それぞれ解説していきます。

abbreviated_date

abbreviated_dateフォーマットは、省略形の年月日が表示されます。

{{ product.created_at | date: format: 'abbreviated_date' }}

//出力：
Dec 31, 2018 //英語の場合
2018年12月31日　//日本語の場合

日本語の場合は、上記の例でもわかるように省略形が無いため通常通りの年月日表示となります。

basic

basicフォーマットは、「/」を使って年月日を表示します。

{{ product.created_at | date: format: 'basic' }}

//出力：
12/31/2018 //英語の場合
2018/12/31　//日本語の場合

ここでは、日本語の場合と英語の場合で年月日の順番が変わることに注意しておきましょう。

date

dateフォーマットは、通常の年月日を表示します。

{{ product.created_at | date: format: 'date' }}

//出力：
December 31, 2020 //英語の場合
2020年12月31日　//日本語の場合

トマトソース

日本語のストアでは、これを一番使用しそうですね！

date_at_time

date_at_timeフォーマットは通常の年月日表示に加え、時間も表示されます

{{ product.created_at | date: format: 'date_at_time' }}

//出力：
December 31, 2020 at 1:00 pm //英語の場合
2018年12月31日 13:00　//日本語の場合

トマトソース

これもブログの投稿日時などで使えるため、使用頻度がかなりありそうですね。

ここでの注意は英語の場合は時間が1~12とam/pmで表示されますが、日本語だと1~23で表示される点です。

default

defaultフォーマットでは、通常の年月日に曜日と時間、標準時との差の表示となります。

{{ product.created_at | date: format: 'default' }}

//出力：
Monday, December 31, 2018 at 1:00 pm +0900 //英語の場合
2018年12月31日(月曜日) 13:00 +0900　//日本語の場合

ちなみに、上記の出力に出ている「+0900」というのは、標準時との時間差を示していて、+0900は日本での場合となります。

他の地域だと「-0500」や「+1200」などとなります。

on_date

on_dateフォーマットは、省略形の年月日に接続詞がついて表示されます。

{{ product.created_at | date: format: 'on_date' }}

//出力：
on Dec 31, 2020 //英語の場合
2020年12月31日で　//日本語の場合

上記を見てわかるように、日本語の場合だと「で」という言葉が入ります。

トマトソース

なので少し不自然になるため、正直あまり使うことはないでしょう。笑

Liquidのフォーマットまとめ

最後に上記で紹介した6つのLiquidに用意されているフォーマットを表にまとめておきます。

date（日付）フィルターの使い方を解説：まとめ

今回は、日付のフォーマット方法について解説してきました。

date（日付）フォーマットはShopifyストア内のブログ記事やお知らせ、商品の公開日などで頻繁に使うものです。

でも、どのようにフォーマットすれば良いかわからないこともあります。

そんな時は、今回紹介したものを活用し、思い通りの日付のフォーマットを実現してください。

ぜひ、本記事をブックマークして辞書的に使っていただけますと幸いです。

関連記事 URL filtersの種類と使い方を解説①

関連記事 ストア通貨の設定とMoney filtersの使い方を解説