Symfony Twig入門|フィルターと関数で値を整形する方法をやさしく解説
生徒
「SymfonyのTwigって聞いたことはあるんですが、数字や文字をきれいに表示する方法がよく分かりません」
先生
「Twigにはフィルターや関数が用意されていて、表示したい形に簡単に整えられます」
生徒
「パソコンをほとんど触ったことがなくても使えますか?」
先生
「大丈夫です。画面に文字を書く感覚で使えるので、順番に見ていきましょう」
1. Twigとは何かを超かんたんに理解しよう
Twig(トゥイッグ)は、Symfonyで使われるテンプレートエンジンです。 テンプレートエンジンとは、画面に表示する文章や数字を組み立てるための仕組みのことです。 例えるなら、チラシのひな形に数字や名前を当てはめて印刷するようなイメージです。 Twigを使うことで、PHPの難しい処理を書かなくても、見た目を整えた表示ができます。 Symfony、Twig、テンプレート、初心者向けというキーワードでよく検索される重要な部分です。
2. フィルターとは?値を後ろから整える仕組み
Twigのフィルターは、表示したい値の後ろにパイプ記号を付けて使います。 パイプ記号は「このあと加工します」という合図です。 例えば、文字を大文字にしたり、余計な空白を消したりできます。 フィルターは「表示直前の仕上げ」と考えると分かりやすいです。
{{ name|upper }}
上の例では、nameという値をすべて大文字にして表示します。
upperは「大文字にする」という意味です。
3. よく使う文字のフィルターを覚えよう
初心者の方が最初によく使うのは、文字を整えるフィルターです。 文章の前後にある空白を消したり、文字数を数えたりできます。 これは、見た目をきれいにするためにとても役立ちます。
{{ message|length }}
lengthは文字の数を数えるフィルターです。 フォーム入力の確認や、文字数表示によく使われます。
4. 数字を見やすくするフィルター
数字はそのまま表示すると読みにくいことがあります。 Twigでは、カンマを付けて金額のように表示することも簡単です。 これはネットショップや管理画面でとても重要です。
{{ price|number_format }}
number_formatを使うと、10000が10,000のように表示されます。 初心者でも安心して使える便利なフィルターです。
5. 関数とは?表示前に呼び出す便利な道具
Twigの関数は、あらかじめ用意された便利な命令です。 フィルターと違い、値の前で使うのが特徴です。 「何かを取得する」「条件を調べる」といった役割があります。
{{ path('home') }}
path関数は、指定したページのURLを作ってくれます。 SymfonyとTwigを組み合わせる代表的な使い方です。
6. 日付を整形して表示する方法
日付は表示形式がとても重要です。 Twigではdateフィルターを使うことで、日本人に分かりやすい形にできます。 年月日をそろえて表示できるので、画面が一気に見やすくなります。
{{ createdAt|date('Y年m月d日') }}
このように書くと、「2026年01月23日」のように表示されます。
7. フィルターと関数を組み合わせる考え方
Twigでは、関数で取得した値にフィルターをかけることもできます。 料理で例えると、材料を取り出してから味付けする流れです。 この考え方を覚えると、表示の自由度が一気に広がります。
{{ app.user.name|upper }}
ユーザー名を取得して、大文字で表示する例です。 Symfony、Twig、フィルター、関数の基本がここに詰まっています。
8. 初心者がつまずきやすいポイント
初心者の方がよく間違えるのは、フィルターと関数の位置です。 フィルターは後ろ、関数は前と覚えるだけで混乱が減ります。 また、エラーが出ても慌てず、表示を整える道具だと思って試すことが大切です。 Twigの値の整形は、慣れるほど楽しくなります。
まとめ
Symfonyの開発において、Twigテンプレートエンジンを使いこなすことは、ユーザーに「見やすい」と感じてもらうための第一歩です。今回の記事では、初心者の方でもすぐに実践できる「フィルター」と「関数」の基本、そして具体的な活用方法について詳しく解説してきました。
まず、Twigのフィルターは、変数や値のすぐ後ろに「 パイプ記号(|)」を添えて記述するスタイルが特徴です。これは、プログラミング未経験の方でも直感的に「このデータに対して、この加工を施す」という流れが理解しやすい仕組みになっています。 例えば、データベースから取り出した生(なま)のデータを、ユーザーが読みやすい形式に変換する際に非常に重宝します。
フィルター活用の振り返り
記事の中で紹介した主要なフィルターをもう一度整理しておきましょう。これらを組み合わせるだけで、Webサイトのクオリティは格段に向上します。
- upper / lower: 英字の「大文字・小文字」を統一します。デザインのトーンを合わせるのに最適です。
- number_format: 金額表示などに欠かせない「3桁区切りのカンマ」を自動で付与します。
- date: サーバーに保存された日付データを「2026年3月26日」といった日本人に馴染みのある形式に整えます。
- length: 文字数や配列の要素数をカウントします。条件分岐と組み合わせて「記事が0件の時の表示」などに応用できます。
一方で、関数は値を取得したり、システム側の情報を呼び出したりする際に、括弧 () を使って記述します。
特に path() 関数は、Symfonyのルーティング設定と連動して正しいURLを生成してくれるため、リンク切れを防ぐために必須の知識となります。
応用的な記述例
まとめとして、学んだ内容を盛り込んだ少し実践的なコードを書いてみましょう。 例えば、商品情報を表示するカード型のレイアウトを想定した記述です。ここでは、商品の名前を大文字にし、価格にカンマを入れ、さらに現在のシステム時刻を表示する処理を組み合わせています。
<div class="card p-3 shadow-sm">
<h3>{{ product.name|upper }}</h3>
<p class="text-danger fw-bold">
価格:{{ product.price|number_format }}円
</p>
<p class="small text-muted">
データ更新日:{{ "now"|date("Y/m/d H:i") }}
</p>
<a href="{{ path('product_detail', {'id': product.id}) }}" class="btn btn-primary">
詳細を見る <i class="bi bi-arrow-right-circle"></i>
</a>
</div>
このように、Twigを使うことでHTMLの中にロジックをシンプルに組み込むことができます。 PHP側で細かな文字列操作を行う必要がなくなるため、コントローラー(プログラムの心臓部)のコードがスッキリとし、保守性(あとで修正しやすい度合い)が高まるという大きなメリットがあります。
ステップアップのためのアドバイス
Twigに慣れてきたら、次は「独自のフィルター」を自作することにも挑戦してみてください。
例えば、特定のキーワードを強調するフィルターや、長すぎる文章を省略して「...」を付けるカスタムフィルターなど、プロジェクト固有のニーズに合わせた拡張が可能です。
また、dump() 関数を使って、今どのようなデータがTwigに渡ってきているのかを画面上で確認するデバッグ手法を覚えると、開発スピードが劇的に上がります。
プログラミング学習において大切なのは、一度にすべてを暗記しようとしないことです。 「あれ?金額にカンマを入れるのはどうやるんだっけ?」と思ったときに、この記事を辞書のように見返して、実際にコードを書いて動かしてみる。その繰り返しのプロセスが、あなたのエンジニアとしてのスキルを確実に積み上げてくれます。 Symfonyの世界は広く奥深いですが、Twigはその中でも特に「結果が目に見えやすい」楽しい部分です。ぜひ、楽しみながら色々な表示パターンを試してみてくださいね。
生徒
「先生、ありがとうございました。フィルターと関数の違いがスッキリ整理できました。フィルターは『後ろから加工する道具』、関数は『前から呼び出す命令』というイメージで合っていますか?」
先生
「その通りです。素晴らしい理解ですね。まずはその基本イメージを持って、実際に書いてみることが大切です。特に |number_format や |date は、実務でも毎日使うくらい頻度が高いので、自然と手が動くようになりますよ」
生徒
「コードの中に {{ "now"|date("Y/m/d") }} と書くだけで今日の日付が出るのは魔法みたいで面白いです。PHPで echo date(...) と書くよりも、ずっと見た目がきれいで分かりやすいですね」
先生
「そう感じてもらえるのが、テンプレートエンジンの良いところです。デザイナーさんと協力して作業する現場でも、Twigのような読みやすい言語は重宝されるんですよ。次は、複数のフィルターを同時につなげて使う『チェイン』というテクニックも試してみましょうか」
生徒
「チェイン、ですか。複数の加工を一度にやるんですね。例えば、文字を切り取ってから大文字にするとか。どんどんWebサイト作りが楽しくなってきました。これからも頑張ります!」
先生
「その意気です。エラーが出ても、それは成長のチャンス。焦らずに一つずつコードを整えていきましょう。また分からないことがあれば、いつでも聞いてくださいね」