女性向けエンジニアスクール
3秒でわかる
JSX で CSS のクラスを指定するときに使う属性名。HTML の class の代わりに書き、値は空白区切りの文字列として渡します。
もう少し詳しく
どういうものか
className は、React の JSX で要素に CSS のクラスを付けるときに書く属性名になる。HTML では class と書くところを、JSX では className と書く。JSX は最終的に JavaScript のオブジェクトへ変換され、その属性は DOM の性質名と対応する。DOM 側の性質名がもともと className であるため、JSX でもこの名前が使われている。
なぜ必要か
class は JavaScript の予約語で、クラス宣言に使われている。JSX は JavaScript の中に書く記法なので、属性名として class をそのまま置くと言語の文法と衝突する。同じ理由で for は htmlFor になる。React 側の気まぐれではなく、JavaScript の制約から来た名前と理解しておくと忘れにくい。
具体例
function Badge({ label, active }) {
return (
<span className={active ? "badge badge-on" : "badge"}>
{label}
</span>
);
}複数のクラスは空白区切りの一つの文字列として渡す。条件で切り替えるときは、上のように三項演算子かテンプレートリテラルで文字列を組み立てる。
<div className={`card ${isWide ? "card-wide" : ""}`}>...</div>つまずきやすいところ
class と書いてしまってもエラーで止まらず、開発時のコンソールに警告が出るだけで、スタイルが当たらない状態になる。見た目が変わらないときはまず属性名を疑う。
配列やオブジェクトをそのまま渡すのも失敗しやすい。className={["a", "b"]} は文字列へ変換されて a,b となり、カンマ入りのクラス名として扱われる。条件分岐が増えてきたら clsx のような小さなライブラリで文字列へまとめる。
CSS Modules を使う場合は、文字列ではなく取り込んだオブジェクトの値を渡す。
import styles from "./Card.module.css";
<div className={styles.card}>...</div>似た用語との違い
className は CSS のクラス指定で、class は JavaScript のクラス宣言、classList は DOM の API になる。名前が似ているだけで役割は重ならない。
覚え方
JSX の属性名は HTML ではなく DOM の性質名に寄せてある。class が className に、for が htmlFor に、onclick が onClick になるのは同じ理由になる。迷ったら、ブラウザの開発者ツールで要素の性質名を確かめると答えが出る。
