【Twig】if文の書き方、総まとめ

0. はじめに

こんにちは！新卒エンジニアのカンゾーです。
皆さん、PHPライフ楽しんでますか〜！！

今回の記事では、PHPフレームワーク(Symfonyなど)を扱う上で切っても切れない「Twig」について解説します。
基本バックエンドで普段はフロント側を触らない方も、デザイナー入門の方もぜひご参考にしてみてください！

1. Twigとは？

PHP向けの柔軟で高速かつ安全な「テンプレートエンジン」のこと。
これはPHPで処理したデータを美しく画面に表示するために推奨される機構で、
「ロジック」と「デザイン」を分離することによりデザイナー、プログラマー間での作業分担を効率よく実施することが可能である。

またSymfonyなどの「MVCモデル¹」を元にしたフレームワークでは、Viewに当たる部分を担当しており、Controllerからロジックを受け取ってページの生成を行う。

「Twig」とは、プログラムのロジックと画面のデザインを分離して開発を効率化するためのツールなんですね！

2.Twigでできること

ではここから、実際の記法を見ていきましょう。
Twigの基本的な構文は、大きく分けて3つです。

{{ ... }}: 変数の内容を表示する

{% ... %}: if文やfor文など、何らかの処理をする

{# ... #}: 開発者用のコメント

変数の表示

Controller側（PHP）から渡された変数を表示するには、{{ }}（二重波括弧）で変数を囲みます。
PHPのechoと同じ役割ですね！

mypage.twig

{# Controllerから渡された name 変数を表示 #}
<h1>{{ name }} さんのマイページ</h1>

また、ただの変数だけでなく配列の表示も可能です。
キーと値がセットになった連想配列の場合は配列名.キー名、
単なるインデックス配列の場合は配列名.要素番号と表記します。

mypage2.twig

{# user 配列を表示 #}
<h1>{{ user.name }} さんのマイページ</h1>

<p>現在の保有ポイント: {{ user.points }} pt</p>

{# promotions 配列を表示 #}
<p>利用した広告1: {{ promotions.0 }} </p>
<p>利用した広告2: {{ promotions.1 }} </p>
<p>利用した広告3: {{ promotions.2 }} </p>

条件分岐

if文を使うことで、条件に応じて表示する内容を切り替えることができます。
構文は{% if ... %}で始まり、{% endif %}で終わります。

PHPだとelseifやelseなどと同じようなイメージですね！

①基本構文

mypage3.twig

{% if user.points >= 10000 %}
    <p>あなたはプラチナ会員です。</p>
{% elseif user.points >= 5000 %}
    <p>あなたはゴールド会員です。</p>
{% else %}
    <p>あなたはレギュラー会員です。</p>
{% endif %}

②厳密比較

if文の中で値を比較する際には==とis same as()という2つの方法があり、PHPの==と===の関係によく似ています。

strict.twig

{% set price_string = '100' %}
{% set price_number = 100 %}

{# 型は違うが、値が同じなので true となる #}
{% if price_string == price_number %}
    <p>== の場合: 価格は同じです。</p> {# ← こちらが表示される #}
{% endif %}

{# 値は同じだが、型が違うので false となる #}
{% if price_string is same as(price_number) %}
    <p>is same as の場合: 完全に同じです。</p>
{% else %}
    <p>is same as の場合: 値は同じですが、型が違います。</p> {# ← こちらが表示される #}
{% endif %}

基本は==の考え方で問題ないのですが、数値のformatや除算を行いたい場合など、値を厳密に区別する際に便利です。ぜひ覚えておきましょう！

for文

配列やオブジェクトの要素を一つずつ取り出して繰り返し処理するには、for文を使います。
{% for ... in ... %}と始まり、{% endfor %}で終わります。

users.php

// PHP側から渡す配列構成
$users = [
    ['name' => '山田太郎', 'email' => '[e-mail]'],
    ['name' => '鈴木花子', 'email' => '[e-mail]'],
    ['name' => '佐藤次郎', 'email' => '[e-mail]']
];

mypage4.twig

{# users という配列をループ処理 #}
<ul>
    {% for user in users %}
        <li>{{ user.name }} ({{ user.email }})</li>
    {% endfor %}
</ul>

もし配列が空だった場合に特別なメッセージを表示したい場合、elseを組み合わせることもできます。

mypage5.twig

<ul>
    {% for user in users %}
        <li>{{ user.name }}</li>
    {% else %}
        <li>ユーザーが見つかりませんでした。</li>
    {% endfor %}
</ul>

お役立ち関数

最後に、知っておくと便利な関数を紹介します。

dump関数

開発中、表示側にどんな変数が渡ってきているかを確認したい場面に最適です。

{# user 変数の中身をすべて出力する #}
{{ dump(user) }}

{# テンプレートに渡されている全ての変数を展開する #}
{{ dump() }}

dump関数は、Twigのデバッグモードが有効になっていないと利用できません。
（通常、本番環境ではデバッグモードはOFFにするため、dump()は表示されなくなります。）

テスト演算子

if文と組み合わせて使用でき、変数の定義や中身のチェックに有効です。

• 変数が定義されているかチェック (is defined)

{# user変数がPHP側から渡されていれば true #}
{% if user is defined %}
    <p>ようこそ、{{ user.name }}さん</p>
{% endif %}

• 変数がnullかチェック (is null)

{# user変数が null の場合に true #}
{% if user.profile_image is null %}
    <img src="/images/default_avatar.png">
{% endif %}

• 配列が空でないかチェック (is not empty)

{# users配列に1つでも要素があれば true #}
{% if users is not empty %}
    <p>全{{ users | length }}件のユーザーが見つかりました。</p>
{% endif %}

• 偶数か奇数かチェック (is even / is odd)

{# 変数{i} が偶数か奇数かを判定#}
{% if i is odd %}
  <p>{{ i }}は奇数です。</p>
{% elseif i is even %}
  <p>{{ i }}は偶数です。</p>
{% endif %}

短く書くテクニック

コードをより簡潔にするため、PHPでの三項演算子やnull合体演算子も利用可能です。

• 三項演算子²

{# --- 三項演算子 --- #}
{# 条件式 ? trueの場合の値 : falseの場合の値 #}
<p>会員ランク: {{ points >= 1000 ? 'ゴールド' : 'レギュラー' }}</p>
{# 出力: 会員ランク: ゴールド #}

• null合体演算子³

{# --- null合体演算子 --- #}
{# 変数 ?? nullの場合の値 #}
<p>ようこそ、{{ user_name ?? 'ゲスト' }} さん</p>
{# 出力: ようこそ、カンゾー さん #}

<p>ようこそ、{{ guest_name ?? 'ゲスト' }} さん</p>
{# 出力: ようこそ、ゲスト さん #}

3. おわりに

Twigだけを専門的に学習する機会は少ないと思います。

しかしTwigの記法をマスターすれば、デザイナーの方はPHPの複雑なロジックを意識することなくデザインに集中でき、バックエンドの方は見た目を気にせずデータ処理に専念できますね。

この「関心の分離」が皆さんのチーム開発をよりスムーズで快適なものにしてくれますように！

4. 参考

【公式ドキュメント】

【記事】

1. プログラムを役割ごとにModel（モデル）・View（ビュー）・Controller（コントローラー）の3つに分けて管理するソフトウェア設計モデルのこと。非常に有名で基本的な設計パターンだが、「Fat Controller」や「ビジネスロジックの所在が曖昧」などの問題点もある。そのため現代では、「サービス層の導入」や「APIサーバー化」などのアプローチも登場している。（参考： https://system-kaihatu.com/archives/3204 ） ↩

2. 三項演算子とは、(条件式) ? A : B の形式で記述し、条件が真ならAを、偽ならBを返す、if-else文を短縮するための構文。（参考： https://www.sejuku.net/blog/23070 ） ↩

3. null合体演算子とは、?? を使い左辺の値がnullでない場合は左辺の値を、nullの場合は右辺の値を返す。変数が存在するかどうかをチェックするisset()と組み合わせた処理を、より簡潔に記述するために導入された。（参考： https://www.php.net/manual/ja/migration70.new-features.php ） ↩