JSXでクラス名を指定する属性は？

解説

正解はclassNameです。JSXではHTMLのclass属性の代わりにclassNameを使います。これはJSXがJavaScriptの構文拡張であり、classがJavaScriptの予約語（クラス宣言に使う）と衝突するためです。他の選択肢について補足します。cssClassやclass-nameはReactに存在しない属性です。classをJSXで書いても実際には動作しますが、コンソールに警告が表示されます。Reactは内部でclassを認識して適用してくれるものの、正式な書き方ではありません。なぜJavaScriptの予約語と衝突するのかJSXは見た目こそHTMLに似ていますが、実態はReact.createElement()の呼び出しに変換されるJavaScriptです。たとえば次のJSXは、<div className='container'>Hello</div>ビルド時に以下のように変換されます。React.createElement('div', { className: 'container' }, 'Hello')第2引数はJavaScriptのオブジェクトです。ここでclassをプロパティ名に使うと、JavaScriptのclassキーワードと文法上の曖昧さが生まれます。ES5以前では予約語をオブジェクトのキーにすること自体がエラーでした。この歴史的経緯から、ReactはclassNameを採用しています。同じ理由で名前が変わる属性は他にもあるclass→classNameと同じパターンで、HTMLとJSXで属性名が異なるものがいくつかあります。for→htmlFor — <label>のfor属性。forはJavaScriptのループ構文と衝突するtabindex→tabIndex — JavaScriptのDOM APIに合わせてキャメルケースにonclick→onClick — イベントハンドラはすべてキャメルケースになるJSXの属性名は基本的にJavaScriptのDOM API（element.className、element.htmlForなど）に準拠していると覚えておくと、迷ったときに判断しやすくなります。React 19以降の動きReact 19ではclassをJSXで書いても警告が出なくなりました。内部的にclassNameと同様に処理されるようになっています。ただし、TypeScriptの型定義では引き続きclassNameが正式なプロパティ名であり、既存のコードベースやライブラリもほぼすべてclassNameを使っています。新規に書くコードでもclassNameを使うのが現時点では無難です。