Twigのif文でクラス名を切り替える方法！Symfonyテンプレート初心者必見ガイド

Twigで条件付きクラス名を出力する方法

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

生徒

「SymfonyのテンプレートってTwigですよね？条件によってCSSのクラスを変えたいときって、どうやって書けばいいですか？」

先生

「その通り！SymfonyではTwigというテンプレートエンジンを使います。条件によってクラス名を変更するのもTwigで簡単にできますよ。」

生徒

「HTMLのclass属性の中で、if文みたいに切り替えられるんですか？」

先生

「もちろんできます。Twigにはif文も三項演算子も使えるので、状況に応じたクラス切り替えが可能です！」

1. Twigとは？初心者でもわかるテンプレートエンジンの基本

Twig（トゥウィッグ）とは、PHPの人気フレームワーク「Symfony」で標準採用されているテンプレートエンジンです。プログラミング未経験の方には聞き馴染みがない言葉かもしれませんが、テンプレートエンジンは「Webサイトの見た目（HTML）」と「プログラムのデータ（PHP）」を、パズルのように組み合わせるための便利な道具だと考えてください。

通常、PHPだけでWebページを作ろうとすると、HTMLの中に複雑なPHPコードが混ざり合い、コードが読みづらくなってしまいます。Twigを使うことで、デザインとロジックをきれいに分離でき、保守性の高い開発が可能になります。2026年現在のモダンなWeb開発においても、その安全性と高速な処理能力から非常に高く評価されています。

???? Twigの基本ルール

{{ 変数名 }}：データを画面に表示する（アウトプット）
{% 処理 %}：if文（条件分岐）やfor文（繰り返し）を実行する
{# コメント #}：メモを残す（画面には表示されない）

例えば、ユーザーの名前を画面に表示したい場合、従来のPHPとTwigでは以下のように書き方が異なります。

【従来のPHPでの書き方】


<p><?php echo htmlspecialchars($userName, ENT_QUOTES, 'UTF-8'); ?></p>

【Twigでの書き方】


<p>{{ userName }}</p>

Twigの方が圧倒的にシンプルで、読みやすいですよね？しかも、Twigは自動的にセキュリティ対策（エスケープ処理）を行ってくれるため、初心者でも安全にWebサイトを作ることができるのが大きなメリットです。この基本をマスターすれば、条件によって背景色を変えたり、ボタンのデザインを切り替えたりといった高度な装飾も自由自在に制御できるようになります。

2. HTMLのclass属性とは？

class（クラス）属性は、HTMLのタグにスタイル（見た目）を適用するための名前を付けるものです。たとえば、赤い文字にしたいときにred-textというクラスを付けて、CSSでその見た目を指定します。

条件によってクラス名を切り替えると、あるときは赤く、あるときは青く…と、表示が柔軟に変えられます。

3. Twigでクラスを切り替える基本パターン

それでは、Twigで条件によってクラス名を切り替える具体的なコードを見てみましょう。下記は、変数isActiveの値によってactiveクラスを付けるかどうかを切り替える例です。


<div class="{{ isActive ? 'active' : 'inactive' }}">
    メニュー項目
</div>

このように、Twigでは三項演算子（さんこうえんざんし）を使うことで、1行で条件分岐ができます。

三項演算子とは、条件 ? 真のときの値 : 偽のときの値という形で、簡単にif文のような処理を行える書き方のことです。

4. if文を使ったクラス名の切り替え

もっと初心者向けに、if文を使って丁寧に書く方法もあります。下記のように書くと、条件によってクラス名を切り替えることができます。


{% if isActive %}
    <div class="active">メニュー項目</div>
{% else %}
    <div class="inactive">メニュー項目</div>
{% endif %}

この書き方なら、まだ三項演算子に慣れていない方でも理解しやすく、読みやすいですね。

5. 複数のクラス名を組み合わせるには？

クラス名を複数同時に使いたい場合もTwigなら簡単です。例えば、baseという基本のクラスに、条件でhighlightクラスを追加したいときは次のように書きます。


<div class="base {{ isImportant ? 'highlight' : '' }}">
    お知らせ
</div>

isImportantがtrueならhighlightが付き、falseなら空白になります。これでHTMLの構造を崩さず、動的なスタイル変更が可能です。

6. よくあるミスと注意点

条件付きでクラスを出力する際にありがちなミスは、スペースを忘れることです。たとえば、次のように書いてしまうと…


<div class="base{{ isImportant ? 'highlight' : '' }}">
</div>

この場合、クラス名がbasehighlightという1つの文字列になってしまい、CSSが正しく適用されません。

正しくは、空白を間に入れて、次のようにしましょう。


<div class="base {{ isImportant ? 'highlight' : '' }}">
</div>

7. 実際の表示結果を確認してみよう

たとえば、次のようにTwigテンプレートを書いて、isImportantがtrueのときは背景色が黄色、そうでなければ背景なしというCSSを適用してみましょう。


<style>
.highlight {
    background-color: yellow;
}
</style>

<div class="notice {{ isImportant ? 'highlight' : '' }}">
    本日の更新情報
</div>

実行結果（isImportant = trueの場合）


<div class="notice highlight">
    本日の更新情報
</div>

8. 変数の値によって複雑な条件も可能

Twigでは、変数の値が複雑な場合でも、比較演算子を使って柔軟に対応できます。たとえば、user.roleという変数があり、それが「admin」かどうかでクラス名を切り替えるときは、次のように書きます。


<div class="{{ user.role == 'admin' ? 'admin-panel' : 'user-panel' }}">
    ダッシュボード
</div>

このようにTwigは、プログラム的な柔軟さをHTMLの中でも簡単に表現できるテンプレートエンジンです。

まとめ

今回の記事では、Symfonyや多くのPHPプロジェクトで採用されているテンプレートエンジン「Twig」を活用して、HTMLのクラス名を動的に切り替える具体的な手法について詳しく解説してきました。Web制作やシステム開発の現場では、ユーザーの状態やデータの値に応じてデザインを変更するシーンが非常に多くあります。例えば、現在開いているページに対応するメニューを強調するための「active」クラスの付与や、フォームの入力エラー時に枠線を赤くするための「has-error」クラスの追加などがその代表例です。

Twigにおける条件分岐の重要性

テンプレートエンジンとしてのTwigの最大の利点は、PHPのロジックを直接HTMLに記述するのではなく、読みやすく安全な記法で動的な処理を実現できる点にあります。特にクラス名の切り替えにおいては、ソースコードの可読性が非常に重要です。後からメンテナンスをする際に、「なぜこのクラスが付与されているのか」がひと目で分かる構成にすることが、高品質なコードへの第一歩となります。

三項演算子とif文の使い分け

本編でも触れた通り、Twigには主に2つの切り替え方法があります。 1つ目は三項演算子を用いた簡潔な書き方です。1行でスッキリと記述できるため、単純な「AかBか」という二者択一のクラス切り替えには最適です。 2つ目は{% if %}タグを用いた構造的な書き方です。こちらは、条件が複雑な場合や、クラス名の切り替えに伴ってHTML要素自体を大きく変更したい場合に適しています。

実戦で役立つPHPとの連携サンプル

Symfonyのコントローラー側からデータを渡し、Twigでその判定を行う実践的なコードを振り返ってみましょう。例えば、商品の在庫数に応じて表示を切り替えるケースを想定します。

コントローラー（PHP側）のイメージ：


// 商品の状態を配列で定義してTwigへ渡す
$product = [
    'name' => '高品質キーボード',
    'stock' => 0,
    'is_new' => true
];

return $this->render('product/detail.html.twig', [
    'product' => $product,
]);

Twigテンプレート（HTML/Twig側）：


<div class="product-item {{ product.stock == 0 ? 'out-of-stock' : 'in-stock' }} {{ product.is_new ? 'new-arrival' : '' }}">
    <h3>{{ product.name }}</h3>
    {% if product.stock == 0 %}
        <p class="badge error-text">完売しました</p>
    {% else %}
        <p class="badge success-text">在庫あり：残り{{ product.stock }}個</p>
    {% endif %}
</div>

実行結果（stockが0の場合）：


<div class="product-item out-of-stock new-arrival">
    <h3>高品質キーボード</h3>
    <p class="badge error-text">完売しました</p>
</div>

さらなる応用：複数条件のハンドリング

さらに複雑なケースでは、iterableなデータ（配列やオブジェクトのリスト）をループ処理しながらクラスを切り替えることも頻繁にあります。Twigのforループ内で、現在のインデックスが奇数か偶数かを判定するloop.index0 is evenといった便利な機能も、クラス名の切り替えと非常に相性が良いです。

WebサイトのUI/UXを向上させるためには、細かな見た目の変化が欠かせません。今回学んだTwigのif文や三項演算子をマスターすることで、プログラミング初心者の方でも、よりリッチでインタラクティブな画面作りが可能になります。まずは小さなボタンの色の切り替えから試してみて、徐々に複雑なロジックに挑戦していきましょう。

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

生徒

「先生、ありがとうございました！Twigでのクラス名の切り替え、思っていたよりもずっとシンプルに書けるんですね。特に三項演算子は、1行で書けるのでHTMLがスッキリして見えます！」

先生

「その通りですね。でも、三項演算子は便利すぎて、あまりに長い条件を詰め込むとかえって読みにくくなることもあるんです。そんな時は、あえて{% if %}を使って数行に分けて書くのが『大人なプログラミング』ですよ。」

生徒

「なるほど。読みやすさも大事なんですね。あと、さっきの注意点で教えてもらった『スペースを入れる』っていうのは、初心者が一番やりそうなミスだなと思いました。私も危うくclass="baseactive"にしちゃうところでした……。」

先生

「ふふ、それは誰もが一度は通る道です。開発ツールで要素をチェックした時に、クラス名がくっついていないか確認する癖をつけると良いですね。Symfonyのようなフレームワークを使っていると、Twigを使いこなせるかどうかで開発スピードが劇的に変わります。」

生徒

「はい！これからはデザインの動きに合わせて、もっと自由にクラスを操れるように練習してみます。PHPのバックエンド処理とフロントの表示が繋がった感じがして、すごく楽しいです！」

先生

「その意気です！もしクラス名が増えすぎて管理が大変になったら、次はTwigの『マクロ』や『ブロック』という機能も調べてみると面白いですよ。どんどんステップアップしていきましょう！」

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

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

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

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

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

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

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

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

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