React の className と SolidJS の class

React において HTML の class 属性を設定するには className キーワードを使う。

// React

function FooComponent() {
  return <div className="foo">Foo!</div>;
}

なぜ class="foo" ではなく className="foo" なのか。
巷では「class は JavaScript における予約語だからだ」という噂が囁かれている。

が、どうやらその理解は正確ではないらしい。

SolidJs では class 属性を設定するのに class キーワードを使う。

// SolidJS

function FooComponent() {
  return <div class="foo">Foo!</div>;
}

こういうのでいいんだよ、こういうので。

SolidJS で class="foo" と書ける理由として、巷では「SolidJS にはクラスコンポーネントが無いからだ。だから class を使っても混乱が無いんだ」という噂が囁かれている。

が、それも違う。(ﾀﾌﾞﾝﾈ)

React との差異は、SolidJS が内部的に Preact を使っていることに由来している。
Preact では <div class="..."> のように書ける。加えて Preact にもクラスコンポーネントがある。

「JSX には className しかないんだ！だからこれがいちばんいいんだ！」と思ってたのに、ただの React のローカルルールだったのか。

私からは以上です。

...じゃあないんだよ。だったら何故 React では className なんだよ。

というわけで調べようとしたら、答えが全部書かれた記事が在りました。

要約すると、

className と書かなければいけないのは、予約語だからでも JSX の制約でもレンダリング処理の制限でもない
実際 Preact では class と書けるし、それで問題は起こらない
Preact の JSX は「HTML と同じように書ける」ことを目指しているので class と書くことを許しているのだろう
(推測だが) React の className は Element: className プロパティにインスパイアされ、その慣習を受け継いでいるのではないか？

とのこと。ふーむ、なるほどね。

私からは以上です。

無駄と文化