テンプレートで「〜前」の形式で表示する方法 — Django の timesince を日本語化する

投稿日:2025年10月20日

はじめに

Django には、日付や時刻の差を簡単に表現できる便利なフィルタ timesince があります。たとえば「2025年10月19日 10:00」の投稿を現在時刻から見て「5時間前」と表示したいときなどに役立ちます。
ただし、デフォルトでは英語表記(例: “1 week, 2 days”)のため、日本語の「〜前」にしたい場合は少し工夫が必要です。この記事では、timesince の基本から日本語化フィルタの作成まで、実際に実装した方法を紹介します。


1. Django の timesince フィルタとは

timesince は Django 標準のテンプレートフィルタで、指定した日時から現在までの経過時間を返してくれます。
使い方はとても簡単です。↓

 投稿日: {{ blog.created_at|timesince }} 

例えば「3時間前」であれば "3 hours" のように英語で表示されます。
このままでは日本語サイトには馴染まないため、timesince の仕組みを参考にして自作フィルタを作成します。

2. 日本語化したい場合の実装手順

2-1. templatetags の準備
利用したいアプリケーションフォルダ内、あるいはプロジェクトフォルダ直下にテンプレートタグフォルダを作成します。
今回はすでに共通関数やモデルをまとめている core アプリがあるのでそこにテンプレートタグフォルダを作りました。

 core/ 
├─ templatetags/ 
   ├─ __init__.py │
   └─ jtime.py 

__init__.py は空ファイルで構いません。これで Django がテンプレートタグを認識できるようになります。
今後、新たにカスタムテンプレートを作成する場合はこのtemplatetagsフォルダに追加するとよいでしょう。

2-2. カスタムフィルタ timesince_jp の実装
jtime.py に日本語対応のフィルタを定義します。
シンプルに「秒・分・時間・日・月・年」単位で経過時間を返すようにしています。

from django import template
from django.utils import timezone
from datetime import timedelta

register = template.Library()
@register.filter def timesince_jp(value):
"""日本語で「〜前」を返すカスタムフィルタ"""
    if not value:
        return ""
    now = timezone.now()
    if value > now:
        return "たった今"
    diff = now - value
    if diff < timedelta(minutes=1):
        seconds = int(diff.total_seconds())
        return f"{seconds}秒前"
    elif diff < timedelta(hours=1):
        minutes = int(diff.total_seconds() // 60)
        return f"{minutes}分前"
    elif diff < timedelta(days=1):
        hours = int(diff.total_seconds() // 3600)
        return f"{hours}時間前"
    elif diff < timedelta(days=30):
        days = diff.days
        return f"{days}日前"
    elif diff < timedelta(days=365):
        months = diff.days // 30
        return f"{months}ヶ月前"
    else:
        years = diff.days // 365
        return f"{years}年前" 

2-3. テンプレートでの使い方
次にテンプレート側でこのフィルタを呼び出します。
使いたいテンプレートの先頭でタグをロードします。

{% load jtime %} 
投稿日: {{ blog.created_at|timesince_jp }} 

これで「3分前」「5時間前」「2日前」といった自然な日本語で経過時間を表示できるようになります。
また、core はプロジェクト全体に登録されているため、どのアプリからでもこのフィルタを共通して利用できます。

3. まとめ

timesince フィルタをそのまま使うと英語表記になってしまいますが、カスタムフィルタを作ることで、日本語の「〜前」表記にできました。

今後は「昨日」「一昨日」「先週」のような表現にも対応させたり、サイトのロケール設定に合わせて動的に切り替える拡張も検討しています。

おわりに

Django のテンプレートタグは一見地味ですが、こうしたちょっとした日本語対応を自前で行えるとアプリ全体の完成度がぐっと上がります。
特に templatetags の仕組みを理解しておくと、「共通のフォーマットを全テンプレートに反映したい」といった場面でとても役立ちます。
もし同じように英語の 1 week, 2 days に悩んでいる方がいれば、今回の方法をぜひ試してみてください。


記事一覧に戻る

関連記事

Bootstrapでトーストを使う方法 ― ポップアップ通知の実装 プログラミング
Bootstrapでトーストを使う方法 ― ポップアップ通知の実装
複数ページの重複モデルを整理して保守性・拡張性を上げる プログラミング
複数ページの重複モデルを整理して保守性・拡張性を上げる
文章の行数をCSS(-webkit-line-clamp / line-clamp)で制限して見た目を整えた プログラミング
文章の行数をCSS(-webkit-line-clamp / line-clamp)で制限して見た目を整えた
X(旧Twitter)カードを正しく表示するためのHTMLの書き方 プログラミング
X(旧Twitter)カードを正しく表示するためのHTMLの書き方
VScodeでPython、HTML/CSSコードを自動で整形する方法 プログラミング
VScodeでPython、HTML/CSSコードを自動で整形する方法

人気記事

はじめまして None
はじめまして
閲覧数: 872
プログラミング初心者が独学で1からPythonを学習し、資格取得・webアプリ作成まで。(資格取得編) プログラミング
プログラミング初心者が独学で1からPythonを学習し、資格取得・webアプリ作成まで。(資格取得編)
閲覧数: 848
VScodeでPython、HTML/CSSコードを自動で整形する方法 プログラミング
VScodeでPython、HTML/CSSコードを自動で整形する方法
閲覧数: 253
X(旧Twitter)カードを正しく表示するためのHTMLの書き方 プログラミング
X(旧Twitter)カードを正しく表示するためのHTMLの書き方
閲覧数: 67
複数ページの重複モデルを整理して保守性・拡張性を上げる プログラミング
複数ページの重複モデルを整理して保守性・拡張性を上げる
閲覧数: 51

おすすめ記事

プログラミング初心者が独学で1からPythonを学習し、資格取得・webアプリ作成まで。(資格取得編) プログラミング
プログラミング初心者が独学で1からPythonを学習し、資格取得・webアプリ作成まで。(資格取得編)
VScodeでPython、HTML/CSSコードを自動で整形する方法 プログラミング
VScodeでPython、HTML/CSSコードを自動で整形する方法
複数ページの重複モデルを整理して保守性・拡張性を上げる プログラミング
複数ページの重複モデルを整理して保守性・拡張性を上げる

記事へコメントする

コメント一覧(0件)

関連記事

Bootstrapでトーストを使う方法 ― ポップアップ通知の実装 プログラミング
Bootstrapでトーストを使う方法 ― ポップアップ通知の実装
複数ページの重複モデルを整理して保守性・拡張性を上げる プログラミング
複数ページの重複モデルを整理して保守性・拡張性を上げる
文章の行数をCSS(-webkit-line-clamp / line-clamp)で制限して見た目を整えた プログラミング
文章の行数をCSS(-webkit-line-clamp / line-clamp)で制限して見た目を整えた
X(旧Twitter)カードを正しく表示するためのHTMLの書き方 プログラミング
X(旧Twitter)カードを正しく表示するためのHTMLの書き方
VScodeでPython、HTML/CSSコードを自動で整形する方法 プログラミング
VScodeでPython、HTML/CSSコードを自動で整形する方法

人気記事

はじめまして None
はじめまして
閲覧数: 872
プログラミング初心者が独学で1からPythonを学習し、資格取得・webアプリ作成まで。(資格取得編) プログラミング
プログラミング初心者が独学で1からPythonを学習し、資格取得・webアプリ作成まで。(資格取得編)
閲覧数: 848
VScodeでPython、HTML/CSSコードを自動で整形する方法 プログラミング
VScodeでPython、HTML/CSSコードを自動で整形する方法
閲覧数: 253
X(旧Twitter)カードを正しく表示するためのHTMLの書き方 プログラミング
X(旧Twitter)カードを正しく表示するためのHTMLの書き方
閲覧数: 67
複数ページの重複モデルを整理して保守性・拡張性を上げる プログラミング
複数ページの重複モデルを整理して保守性・拡張性を上げる
閲覧数: 51

おすすめ記事

プログラミング初心者が独学で1からPythonを学習し、資格取得・webアプリ作成まで。(資格取得編) プログラミング
プログラミング初心者が独学で1からPythonを学習し、資格取得・webアプリ作成まで。(資格取得編)
VScodeでPython、HTML/CSSコードを自動で整形する方法 プログラミング
VScodeでPython、HTML/CSSコードを自動で整形する方法
複数ページの重複モデルを整理して保守性・拡張性を上げる プログラミング
複数ページの重複モデルを整理して保守性・拡張性を上げる

記事へコメントする

コメント一覧(0件)

Share

Top