Rails: ビューやコンポーネントに条件付きでCSSクラスを追加する（翻訳）

Rails: ビューやコンポーネントに条件付きでCSSクラスを追加する（翻訳）

Rails 6.1でリリースされた class_names（#37918）は、私が多用しているビューヘルパーです。

 class_namesがなかった頃は、以下のような読みにくいコードを書くしかありませんでした。

<div class="<⁠%= item.for_sale? ? 'active' : '' %>">

しかし class_namesヘルパーのおかげで、以下のように書けます。

<div class="<⁠%= class_names(active: item.for_sale?) %>">

上の2つのコードは、どちらも以下のHTMLを出力します（item.for_sale?がtrueを返した場合）。

<div class="active">

さらに進んだ書き方を紹介します。

class_names("item", { active: item.for_sale?, "out-of-stock": item.out_of_stock? })

上の"item"クラスは「無条件に」適用されます。
"active"クラスや"out-of-stock"クラスは、それぞれ条件が満たされた場合にのみ適用されます。

このclass_namesはtagヘルパーでもサポートされてます。つまり、以下のコードの動作は上と同じです

<⁠%= tag.div class: class_names(active: item.for_sale?) %>

以下のようにさらに短く書くことも可能です。

<⁠%= tag.div class: [active: item.for_sale?] %>

Railsのこの機能はあまり知られていませんが、ビューやコンポーネントをいい感じに書くのにとても有用です。私のRails Designerの全コンポーネントでこの書き方が使われているのも当然と言えましょう。😅

関連記事

Rails: 5.1以降のtagヘルパー記法はcontent_tagより便利