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

生徒

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

先生

「それなら、Bladeの便利な @class ディレクティブを使うと簡単に書けますよ。」

生徒

「ディレクティブって何ですか？あと、具体的にどうやって使うんですか？」

先生

「ディレクティブはBladeテンプレートで使う特別な命令みたいなものです。@classは条件に応じてCSSクラスを付けたり外したりできる命令です。さっそく基本的な使い方を見ていきましょう！」

1. Bladeテンプレートの@classディレクティブとは？

LaravelのBladeテンプレートにある @class は、HTMLタグに付けるCSSのクラスを条件によって動的に変えられる特別な命令（ディレクティブ）です。これを使うことで、例えばボタンの色を「エラーの時は赤」「正常の時は緑」に変えることができます。

簡単に言うと、「条件付きのCSSクラスの付け方」をスマートに書ける便利な方法です。

2. CSSのクラスって何？

まずCSSのクラスについて簡単に説明します。クラスとは、HTMLの見た目を決めるための名前のことです。例えば、「btn」というクラスが付いたボタンは青色で大きく表示されるかもしれません。

複数のクラスを付けることで、見た目やデザインを自由にコントロールできます。

3. これまでのクラスの付け方と@classの違い

通常、クラスは以下のように固定で書きます。


<div class="btn btn-primary">ボタン</div>

でも、条件によってクラスを切り替えたい場合、Bladeではよくこう書かれます。


<div class="{{ $isActive ? 'btn-active' : 'btn-inactive' }}">ボタン</div>

この書き方でも動きますが、複雑な条件や複数のクラスを扱うと長くて読みにくくなりがちです。

そこで、@class ディレクティブを使うと、もっと見やすく書けます。

4. @classディレクティブの基本的な使い方

下記のように書くと、$isActive が true のときだけ btn-active クラスが付き、そうでない時は付かなくなります。


<div @class([
    'btn',
    'btn-active' => $isActive,
])>ボタン</div>

この例では「btn」は常に付いていて、「btn-active」は $isActive が真の時だけ付く、という意味です。

5. 複数の条件付きクラスも簡単に書ける

例えば、ボタンの色とサイズを状態によって変えたい場合は、以下のように書けます。


<button @class([
    'btn',
    'btn-large' => $isLarge,
    'btn-danger' => $hasError,
])>送信</button>

ここで $isLarge が真なら btn-large クラスを付け、$hasError が真なら btn-danger クラスを付けます。どちらも偽なら付けません。

6. 配列で条件以外に固定クラスも指定できる

さきほどの例で、固定のクラスと条件付きのクラスを同時に指定していますが、固定のクラスは文字列で書きます。条件付きのクラスは クラス名 => 条件 の形で書きます。

この構造がわかると複雑な条件でも読みやすくなります。

7. @classディレクティブのメリット

条件付きクラスの指定がシンプルでわかりやすい
HTMLタグ内がすっきりして可読性がアップする
複数の条件付きクラスも簡単に管理できる
Bladeテンプレートの標準機能なので追加インストール不要

8. 覚えておきたいポイント

@classはBladeテンプレート専用の命令で、条件に応じたCSSクラスを付けたり外したりできる
条件付きクラスは 'クラス名' => 条件 の配列で指定
固定のクラスは文字列としてそのまま配列に書く
複雑なHTMLのクラス指定をすっきりシンプルに書ける

まとめ

Bladeの@classディレクティブで条件付きクラスを安全かつ簡単に管理する

この記事では、LaravelのBladeテンプレートで条件付きでCSSクラスを付与する方法として、@classディレクティブの使い方を初心者向けに詳しく解説してきました。Webアプリケーションでは、画面の状態やデータの内容によって見た目を変える場面が非常に多くあります。例えば、エラーがあるときは赤色で表示したり、選択中のメニューだけを強調表示したりといったケースです。そのようなときに、Bladeの@classディレクティブを使うことで、HTMLとロジックを無理なく分離しながら、読みやすく保守しやすいテンプレートを書くことができます。

従来のBladeでは、三項演算子や@if文を使ってclass属性を切り替える書き方が一般的でしたが、条件が増えるほど記述が複雑になり、HTMLが読みづらくなりがちでした。@classディレクティブは、配列という分かりやすい形で「常に付けるクラス」と「条件付きで付けるクラス」を整理できるため、テンプレート全体の見通しが良くなります。LaravelのBladeテンプレートを使う上で、ぜひ覚えておきたい機能のひとつです。

固定クラスと条件付きクラスを一緒に書けるのが強み

@classディレクティブの大きな特徴は、固定のCSSクラスと条件付きクラスを同じ配列の中で自然に書ける点です。常に適用したいクラスは文字列として記述し、条件によって切り替えたいクラスは「クラス名 => 条件」という形で指定します。このルールさえ覚えてしまえば、複雑な状態管理でも迷わずクラス指定ができるようになります。


<button @class([
    'btn',
    'btn-primary' => $isActive,
    'btn-danger' => $hasError,
])>
    送信
</button>

この例では、btnクラスは常に付与され、$isActiveが真のときはbtn-primary、$hasErrorが真のときはbtn-dangerが追加されます。条件が増えても配列の行が増えるだけなので、後から条件を追加したり修正したりするのも簡単です。Bladeテンプレート内でのCSSクラス管理がとても楽になることを実感できるでしょう。

可読性と保守性を高めるBladeテンプレートの書き方

@classディレクティブを使う最大のメリットは、可読性と保守性の向上です。HTMLタグの中に複雑な条件式が並ばなくなるため、デザイン担当者や他の開発者がテンプレートを見たときにも理解しやすくなります。Laravelはチーム開発で使われることも多いため、Bladeテンプレートをきれいに保つことは非常に重要です。

また、@classはLaravelの標準機能なので、追加のライブラリや設定は一切不要です。Bladeテンプレートを使っているプロジェクトであれば、すぐに導入できます。条件付きクラスの指定に悩んでいる方は、これを機に@classディレクティブを積極的に使ってみるとよいでしょう。

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

生徒：Bladeで条件付きクラスを書くのが、こんなにスッキリするとは思いませんでした。

先生：@classディレクティブを使うと、HTMLと条件の関係がとても分かりやすくなりますね。

生徒：三項演算子よりも読みやすくて、後から修正もしやすそうです。

先生：その通りです。条件が増えても配列に追加するだけなので管理が楽になります。

生徒：Bladeテンプレートを書くのが、前より楽しくなりました。

先生：ぜひ実際の画面でも使ってみてください。Laravel開発が一段と快適になりますよ。