クラス・スタイルの変更
classList style CSS Variables
JavaScriptでCSSクラスやインラインスタイルを動的に変更し、見た目を切り替えます。
デモ：classList
❌ active クラスなし
デモ：インラインスタイル
スタイルをリアルタイムで変更
classList のメソッド
js
const el = document.querySelector('.box');
// クラスの追加・削除
el.classList.add('active');
el.classList.add('foo', 'bar'); // 複数同時に追加
el.classList.remove('active');
el.classList.toggle('open'); // あれば削除、なければ追加
el.classList.toggle('open', true); // 強制的にadd
el.classList.toggle('open', false); // 強制的にremove
// クラスの確認・置換
el.classList.contains('active'); // true / false
el.classList.replace('old', 'new'); // クラス名を置換
// 全クラスの取得
console.log(el.classList.value); // "foo bar active"
[...el.classList]; // 配列に変換比較：style vs classList
| 観点 | classList（推奨） | style（インライン） |
|---|---|---|
| 管理 | CSSファイルで一元管理 | JS内に散在する |
| 優先度 | 通常のCSS特異性に従う | !important以外に優先 |
| トランジション | ✅ 自動でアニメーション | △ transitionを毎回書く |
| 動的な値 | ❌ 固定値のみ | ✅ 計算値を直接セット |
NEWCSS カスタムプロパティ（変数）をJSから操作
CSS変数をJSで書き換えることで、テーマ切り替えや動的スタイルをより宣言的に実装できます。
js
// CSS変数をJSで設定・取得
const root = document.documentElement; // :root に相当
// 設定
root.style.setProperty('--accent-color', '#3b82f6');
root.style.setProperty('--font-size', '18px');
// 取得
const color = getComputedStyle(root)
.getPropertyValue('--accent-color').trim();
// 活用例：テーマ切り替え
function setTheme(isDark) {
root.style.setProperty('--bg', isDark ? '#1a1a1a' : '#fff');
root.style.setProperty('--text', isDark ? '#fff' : '#333');
}🤖 AIプロンプトテンプレート
以下の要件を満たすTypeScript + Reactコンポーネントを作成してください。 - classList.add/remove/toggle/containsを使ったクラス操作のサンプルを示す - CSSカスタムプロパティ（変数）をJavaScriptから動的に変更する例を含める - ダークモード切り替えのサンプルをclassList.toggleで実装する - element.styleで個別のスタイルプロパティを変更するサンプルを含める - getComputedStyle()で現在のスタイル値を取得する例を示す - コメントは日本語で記述する
⚠️ このプロンプトはあくまでたたき台です。AIの回答はモデルやバージョン、会話の文脈によって毎回異なります。意図通りに動かない場合は、条件を追記・修正してお使いください。