Twigで日付や数値を自由にフォーマット！初心者向けSymfonyテンプレート講座

Twigで日付や数値をフォーマットする方法

先生と生徒の会話形式で理解しよう

生徒

「Twigで日付や金額を表示するとき、もっと見やすく整える方法ってありますか？」

先生

「もちろんです！Twigではdateフィルターやnumber_formatフィルターを使って、日付や数値を自由にフォーマットできますよ。」

生徒

「フィルターって何ですか？どうやって使うんですか？」

先生

「フィルターは、表示したいデータを見やすく変換する魔法のようなものです。では、実際に日付と数値のフォーマット方法を見てみましょう！」

1. Twigで日付をフォーマットする基本：dateフィルターの使い方

SymfonyやTwigを利用したWebサイト制作において、システム内部で管理している「2026-02-01 09:00:00」といった無機質なデータを、ユーザーが読みやすい「2026年2月1日」という形に整えることは、UX（ユーザー体験）を高める上で非常に重要です。

この変換作業をフォーマット（書式整形）と呼び、Twigではdateフィルターを使うだけで、驚くほど簡単に実現できます。プログラミング未経験の方でも、書き方のルールさえ覚えればすぐに使いこなせます。

「フィルター」と「パイプ」の書き方

Twigには、データに加工を加えるための「フィルター」という仕組みがあります。変数のすぐ後ろにパイプ記号（|）を書き、その後に使いたいフィルター名を繋げるのが基本のルールです。

基本構文： {{ 変数 | フィルター名('表示形式') }}

それでは、具体的に日付を表示する際の最もシンプルな例を見てみましょう。


{# 変数 today に今日の日付が入っている場合 #}
{{ today|date('Y/m/d') }}

このコードの実行結果は、以下のようになります。


2026/02/01

このように、パイプ（|）を通すことで、中身のデータを「指定した形式（この場合はスラッシュ区切り）」へ魔法のように変換してくれるのです。次のセクションからは、さらに具体的な日本語形式へのカスタマイズ方法を詳しく解説します。

2. 日付を「年月日」形式で表示する例

たとえば、post.publishedAtという日付を「2025年09月12日」と表示したい場合は、次のように書きます。


{{ post.publishedAt|date('Y年m月d日') }}

ここでのYは「西暦4桁」、mは「月（2桁）」、dは「日（2桁）」を意味します。

実行結果は以下のようになります。


2025年09月12日

3. 時刻も一緒に表示するには？

日付だけでなく、時間も一緒に表示したい場合は、次のようにします。


{{ post.publishedAt|date('Y年m月d日 H:i') }}

Hは「時（24時間表記）」、iは「分（2桁）」です。


2025年09月12日 14:30

これで投稿された日時を正確に、かつ日本語らしく表示できます。

4. Twigで数値をカンマ区切りに整える方法

続いて、数値のフォーマットです。Twigではnumber_formatというフィルターを使うと、3桁ごとのカンマや小数点以下の桁数を指定できます。

たとえば、商品の金額がprice = 1000000だったとします。このままだと見づらいですが、次のように表示すると読みやすくなります。


{{ price|number_format }}


1,000,000

5. 小数点以下を含めて整える場合

小数を扱うときは、number_formatに引数を追加できます。

書き方は次のようになります。


{{ value|number_format(2, '.', ',') }}

これは、「小数点2桁」「小数点は.」「千の区切りは,」という指定です。


12,345.68

日本語表記で円マークを付けるなら、次のように書くと自然です。


{{ price|number_format(0, '.', ',') }} 円


100,000 円

6. 数値をパーセントで表示する方法

割合などを表示したいとき、Twigでパーセント表記を加える方法もあります。たとえば、rate = 0.256 であれば、次のように表示できます。


{{ (rate * 100)|number_format(1) }}%


25.6%

変数を100倍して、1桁の小数でフォーマットしたあと、%を付けています。

7. Twigで表示を美しく整えるコツ

表示される日付や数値が見やすいと、Webアプリ全体の印象も大きく変わります。たとえば以下のような工夫ができます。

日付には日本語の「年・月・日」を付ける
金額は必ずカンマで区切り、円マークをつける
割合は小数点を丸めて、%記号を表示

SymfonyのTwigテンプレートは、こうした調整が非常に簡単にできるのが魅力です。

まとめ

今回の記事では、SymfonyのテンプレートエンジンであるTwigを使った、日付や数値のフォーマット（書式整形）について詳しく解説してきました。Webアプリケーションを開発する際、データベースから取得した生のデータをそのまま画面に表示してしまうと、ユーザーにとっては非常に読みづらいものになってしまいます。例えば、システム上の日付データ「2026-01-31 10:30:00」をそのまま出すのではなく、日本の慣習に合わせて「2026年01月31日」と表示したり、大きな金額を扱う際に3桁ごとのカンマを入れたりすることは、UI/UX（ユーザーインターフェース/ユーザー体験）の向上において欠かせないプロセスです。

Twigが提供する「フィルター」という仕組みを使えば、PHP側で複雑な処理を書くことなく、テンプレート側で直感的にデータの見た目をコントロールできます。パイプ記号（|）を使って、dateフィルターやnumber_formatフィルターをつなげるだけというシンプルさは、開発効率を劇的に高めてくれます。

Twigテンプレートでよく使われるテクニックの振り返り

ここで、今回学んだ主要なフォーマット方法をもう一度整理しておきましょう。これらをマスターするだけで、Symfonyでのフロントエンド開発がぐっと楽になります。

1. 日付操作の決定版：dateフィルター

日付の表示には、PHPのdate()関数と同じフォーマット文字列が使用可能です。特に日本語のサイトでは、以下の形式が頻繁に利用されます。


{# 曜日まで含めた詳細な表示例 #}
{{ "now"|date("Y/m/d (D) H:i") }}

上記のコードのように、現在の時刻を表示したい場合は"now"というキーワードを直接使うことも可能です。実行結果は以下のようになります。


2026/01/31 (Sat) 10:30

2. 金額や統計データの整形：number_formatフィルター

ECサイトや管理画面で必須となるのが数値の整形です。デフォルトの設定では、3桁ごとにカンマが入り、小数点以下は切り捨てられますが、引数を指定することで細かな制御が可能です。


{# 消費税計算などの端数処理を含めた表示 #}
{% set price = 1280.5 %}
{{ price|number_format(0) }} 円（税込）

実行結果：


1,281 円（税込）

※デフォルトの挙動では四捨五入が行われる点に注意しましょう。

さらに応用！Twigで条件分岐と組み合わせる

実際の開発現場では、データが空（null）の場合の考慮も必要です。例えば、有効期限が設定されていない場合に「無期限」と表示したいときは、defaultフィルターと組み合わせると非常にスマートです。


{# 有効期限があればフォーマットし、なければメッセージを表示 #}
{{ expireDate ? expireDate|date('Y-m-d') : '無期限' }}

このように、Twigの柔軟な構文を活用することで、プログラムの可読性を保ちつつ、ユーザーに親切な画面設計を行うことができます。

PHP側での事前準備（参考知識）

テンプレートに渡す前のデータがどのような型であるかも重要です。DateTimeオブジェクトとして渡すと、Twigのdateフィルターは最も正確に動作します。コントローラー側での記述イメージも確認しておきましょう。


// Symfonyのコントローラー内での例
public function index(): Response
{
    return $this->render('example.html.twig', [
        'current_time' => new \DateTime(),
        'total_score' => 98500,
    ]);
}

このように、サーバーサイドのロジックとテンプレートの表示処理を明確に分離することが、メンテナンス性の高いコードを書くための第一歩です。

先生と生徒の振り返り会話

生徒

「先生、ありがとうございました！dateフィルターやnumber_formatフィルターを使うだけで、こんなに簡単に見た目が変わるなんて驚きました。これまではPHP側で文字列をこねくり回して作っていたので、Twigの便利さが身に染みます。」

先生

「そう言ってもらえると嬉しいです。テンプレートエンジンの役割は、まさに『データをどう見せるか』に集中することですからね。実は、もっと複雑なフォーマットが必要な場合は、自分で『カスタムフィルター』を作ることもできるんですよ。」

生徒

「自分専用のフィルターですか？それは凄そうです！例えば、特定の条件の時だけ色を変えたり、独自の単位を付けたりすることもできるんでしょうか？」

先生

「ええ、可能です。でもまずは、標準で用意されているフィルターを使いこなすことが大切です。特に、日付フォーマットの'Y/m/d'や、数値のnumber_formatは、どんなプロジェクトでも必ずと言っていいほど登場します。」

生徒

「確かにそうですね。あ、そういえば、数値のフォーマットで小数点を『カンマ』にして、区切りを『ドット』にする、ヨーロッパ形式の表示もできるんですか？」

先生

「いいところに気づきましたね！その通りです。number_format(2, ',', '.')のように引数を渡せば、ドイツやフランスなどの形式にも一瞬で対応できます。多言語対応（i18n）のサイトを作る時にも、このフィルターは強力な武器になりますよ。」

生徒

「なるほど、グローバルなサイト作りにも役立つんですね。さっそく、今作っているポートフォリオのサイトに導入して、金額表示をカッコよく整えてみます！」

先生

「その意気です！細かい部分ですが、ユーザーはそういう丁寧な表示を見て安心感を抱くものです。ぜひ楽しみながらコードを書いてみてくださいね。」

公的機関での指導実績【Symfony大規模設計実践セミナー】

エンタープライズSymfony実践講座：大規模DX基盤を支える疎結合設計とドメイン駆動開発

#商用設計 #APIアーキテクチャ #市場価値最大化

ハローワーク職業訓練講師の実績を持つプロが監修。商用PHP開発の「現場の作法」を完全伝授。

「大規模システムの秩序」を設計する。SymfonyでエンタープライズLOD（設計の質）を極める。

本講座では、単なるWeb機能の構築ではなく、「再利用性とテスト容易性を追求した疎結合設計」という高度な技術を学びます。世界標準の堅牢性を誇るSymfonyを通じて、大規模開発やマイクロサービス化で必須となるDI（依存性の注入）やイベント駆動設計を最短距離で身につけます。

具体的なワークショップ内容と環境

【つくるもの】
エンタープライズ環境の標準となる「疎結合なバックエンド基盤」を構築します。Service Containerの高度な設定、Doctrine ORMによる複雑なデータマッピング、Bundle構造の理解など、「数年先もメンテナンス可能な商用コード」をゼロから体験してください。

【開発環境】
高度なリファクタリングを可能にするPHPStormの機能をフル活用。Docker環境での開発はもちろん、静的解析ツール（PHPStan）やCI/CDを意識した自動テスト環境まで、大規模プロジェクトの標準フローを再現します。