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

生徒

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

先生

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

生徒

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

先生

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

1. Twigとは？テンプレートエンジンの基本を知ろう

Twig（トゥウィッグ）とは、Symfonyフレームワークで使用されているテンプレートエンジンのことです。テンプレートエンジンとは、HTMLとプログラムの中間のようなもので、「画面に何を表示するか」を担当する部分です。

たとえば、変数の中身をHTMLに表示したり、条件によって表示する内容を切り替えたりできます。Twigでは、{{ }}を使って変数を表示し、{% %}で処理（if文やfor文など）を書くのが基本ルールです。

2. HTMLのclass属性とは？

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

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

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


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

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

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

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


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

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

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


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

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

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


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

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

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


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

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


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

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

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


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

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


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

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