この記事では

Reactで条件によってクラス名（className）を動的に付与する方法

を解説します。

動的にクラス名を付与することで、stateの値によって要素の見た目（装飾）に変化を付けるなど、コンポーネントにちょっとした動きを加えることが可能です。

パターン①　特定の条件に一致したときだけクラス名を付与する

単一のクラス名を付与

<p className={judge && "sample-class"}>
   hoge  
</p>

複数のクラス名を付与

<p className={judge && "sample-class01 sample-class02"}>
   hoge  
</p>

これは論理演算子&&を利用した書き方です。
条件 && クラス名とすることで、左辺（条件）がtrueのときだけ右辺（クラス名）を付与するという動きになります。

上記のソースコードでは、judgeがtrueなら右辺に記述してあるクラス（sample-class01、sample-class02）が追加されます。

補足｜三項演算子を使用した書き方

上記のソースコードは以下のように書くことも可能です。

<p className={judge ? "sample-class" : ""}>
   hoge  
</p>

こちらは三項演算子を利用したもので、条件式 ? "trueのとき" : "falseのとき"という書き方が基本的な構文になります。

三項演算子について詳しく知りたい方はMDN公式サイト をご覧ください。

パターン②　条件によってclassNameの内容を変える方法

条件によって付与するクラス名を切り替えたい場合は以下のように記述します。

<p className={judge ? "sample-class01" : "sample-class02"}>
   hoge
</p>

こちらも、パターン①の補足｜三項演算子を使用した書き方でご紹介した三項演算子を利用しています。

パターン③　条件に一致したときだけ＋αのクラス名を追加する

共通のクラスが設定済みで、条件に一致したときだけ＋αで別のクラス名を追加したい場合は以下のように記述します。

<p className={`sample-class01 ${judge && "sample-class02"}`}>
   hoge  
</p>

このように書くことで、judgeがtrueのときはsample-class02が追加されるようになります。

書き方のポイントとしては、クラス名全体をバッククォート`（WindowsならShift + @で入力）で囲み、その中に条件文を埋め込んでいます。

これはいわゆるテンプレートリテラル（参考：MDN公式サイト ）というもので、今回のソースコードでは文字列の中に条件文を埋め込んでいます。

補足｜文字列結合と論理演算子「&&」を組み合わせる

ちなみにテンプレートリテラルを使用しない場合でも、文字列結合と論理演算子を組み合わせることで、以下のように書くことが可能です。

<p className={'sample-class ' + (judge && "sample-class02")}>
   hoge  
</p>

注意点として、'sample-class 'の末尾に半角スペースを入力して、クラス名が正しく区切られるようにしておく必要があります。
※忘れがち＋気が付きづらいのでお気を付けください。

まとめ

以上がReactで条件によってクラス名（className）を動的に付与する方法でした。

Reactは動的なWebサイトやアプリを実装できるJavascriptライブラリです。

今回ご紹介したように、条件式を用いることで、動的にclassName（クラス名）を書き換えることも可能です。

ケケンタ

何気ない装飾の動的な変化などがユーザビリティを向上させることにも繋がります！

この記事が少しでもお役に立ったなら何よりです！

当ブログではLaravelやPHP、Web制作などの情報も発信しています。Webアプリ開発にご興味のある方はぜひそちらもご覧いただけるとうれしいです。