JavaScriptを使ったCSS変更 完全ガイド【サンプルコード付き】

Web開発において、ユーザーのインタラクションやアプリケーションの状態に応じてウェブサイトの外観を動的に変更することは不可欠です。静的なCSSだけでは実現できない、よりリッチでインタラクティブなユーザーインターフェース（UI）を構築するために、JavaScriptは強力なツールとなります。JavaScriptを使うことで、要素のスタイルをリアルタイムに変更したり、クラスを付け替えて複数のスタイルルールを適用・解除したり、さらにはCSS変数（カスタムプロパティ）を操作してウェブサイト全体のテーマを切り替えたりすることも可能です。

この記事では、JavaScriptを使ってCSSを変更する様々な方法を、それぞれのメリット、デメリット、使い分け、そして豊富なサンプルコードとともに詳細に解説します。基本的なスタイルの変更から、クラス操作、CSS変数、さらには高度なCSSOM（CSS Object Model）へのアクセスまで、JavaScriptによるスタイリングのすべてを網羅することを目指します。約5000語に及ぶこのガイドを通じて、あなたはJavaScriptを使ったCSS変更の技術を習得し、よりダイナミックで魅力的なウェブサイトを構築できるようになるでしょう。

さあ、JavaScriptであなたのウェブサイトを動き出させましょう。

1. JavaScriptでCSSを変更する基本的な考え方：DOMと要素の取得

JavaScriptを使ってウェブサイトのスタイルを変更するには、まず対象となるHTML要素を特定する必要があります。ウェブブラウザは、読み込んだHTMLドキュメントを「DOM（Document Object Model）」というツリー構造のオブジェクトモデルに変換します。JavaScriptはこのDOMを操作するための言語であり、DOMツリー上の各ノード（要素、テキスト、属性など）にアクセスしたり、変更したり、追加・削除したりすることができます。

CSSの変更も、このDOM操作の一部です。JavaScriptは、特定のDOM要素を取得し、その要素が持つスタイルに関するプロパティやメソッドを使って、見た目を操作します。

要素の取得方法

DOM要素を取得するには、いくつかの組み込みメソッドがあります。目的に応じて適切なメソッドを選択します。

• document.getElementById(id): 指定されたIDを持つ要素を一つだけ取得します。IDはHTMLドキュメント内で一意である必要があります。最も一般的で高速なメソッドの一つです。
  javascript
// HTML: <div id="myElement">...</div>
const elementById = document.getElementById('myElement');
if (elementById) {
console.log('IDで要素を取得しました:', elementById);
} else {
console.log('指定されたIDの要素は見つかりませんでした。');
}

• document.getElementsByClassName(className): 指定されたクラス名を持つすべての要素を取得します。これはHTMLCollectionと呼ばれる、配列に似たコレクションオブジェクトを返します。コレクションは動的であり、DOMが変更されると自動的に更新されます。
  javascript
// HTML: <div class="myClass">...</div> <span class="myClass">...</span>
const elementsByClassName = document.getElementsByClassName('myClass');
console.log('クラス名で要素を取得しました:', elementsByClassName);
// 取得したコレクションの各要素にアクセスするにはループを使います
for (let i = 0; i < elementsByClassName.length; i++) {
console.log(`要素 ${i}:`, elementsByClassName[i]);
}
// または Array.from() を使う
Array.from(elementsByClassName).forEach(element => {
console.log('forEachで処理:', element);
});

• document.getElementsByTagName(tagName): 指定されたタグ名（例: 'div', 'p', 'a'）を持つすべての要素を取得します。これもHTMLCollectionを返します。
  javascript
// HTML: <div>...</div> <p>...</p> <div>...</div>
const elementsByTagName = document.getElementsByTagName('div');
console.log('タグ名で要素を取得しました:', elementsByTagName);
for (const element of elementsByTagName) {
console.log('for...ofで処理:', element);
}

• document.querySelector(selector): 指定されたCSSセレクターに一致する最初の要素を取得します。ID、クラス、タグ名、属性セレクターなど、様々なセレクターを使用できます。CSSセレクターに慣れている開発者にとって非常に便利です。
  javascript
// HTML: <div class="container"><p id="firstParagraph">...</p></div>
const firstElement = document.querySelector('#firstParagraph'); // IDセレクター
console.log('querySelectorで最初の要素を取得:', firstElement);
const firstDiv = document.querySelector('div'); // タグ名セレクター
console.log('querySelectorで最初のdivを取得:', firstDiv);
const firstClassElement = document.querySelector('.myClass'); // クラスセレクター
console.log('querySelectorで最初の.myClassを取得:', firstClassElement);

• document.querySelectorAll(selector): 指定されたCSSセレクターに一致するすべての要素を取得します。これはNodeListと呼ばれるコレクションオブジェクトを返します。NodeListは静的である場合と動的である場合がありますが、querySelectorAllが返すものは通常静的です（DOMが変更されてもコレクションは更新されません）。NodeListはforEachメソッドをサポートしています（IEを除く）。
  javascript
// HTML: <div class="item">...</div> <div class="item active">...</div>
const allItems = document.querySelectorAll('.item');
console.log('querySelectorAllですべての.itemを取得:', allItems);
allItems.forEach(item => {
console.log('NodeListのforEachで処理:', item);
});
const allActiveItems = document.querySelectorAll('.item.active');
console.log('querySelectorAllですべての.item.activeを取得:', allActiveItems);

これらのメソッドを使って、CSSを変更したい対象要素を取得するのが最初のステップです。通常、IDやクラス名を使って特定の要素や要素のグループを対象にします。

取得した要素（単一の場合、またはコレクション内の各要素）に対して、次にスタイルを変更する処理を行います。

2. スタイルプロパティへのアクセスと変更：element.style

取得したDOM要素のスタイルを直接変更する最も基本的な方法は、要素オブジェクトが持つstyleプロパティにアクセスすることです。element.styleは、その要素に適用されているインラインスタイル（HTMLタグのstyle属性として記述されたスタイル）を表現するオブジェクトです。

“`html

“`

javascript
const myDiv = document.getElementById('myDiv');
console.log('現在のインラインスタイルカラー:', myDiv.style.color); // 出力: "blue"

element.styleオブジェクトを通じて、CSSの各プロパティに対応するプロパティにアクセスし、値を設定することでスタイルを変更できます。

プロパティ名のキャメルケース表記

JavaScriptのプロパティ名は、CSSのプロパティ名とは少し異なります。CSSではハイフンで区切られたケバブケース（例: background-color, font-size）を使用しますが、JavaScriptの識別子にはハイフンを含めることができないため、element.styleオブジェクトではキャメルケース（例: backgroundColor, fontSize）を使用します。

CSSプロパティ	JavaScriptプロパティ名
background-color	backgroundColor
font-size	fontSize
margin-top	marginTop
z-index	zIndex
border-left-width	borderLeftWidth
cssFloat	float (注: float は予約語のため cssFloat または styleFloat となることが多いが、最近は float でアクセス可能なブラウザが多い)

スタイルの設定例

“`javascript
const myDiv = document.getElementById(‘myDiv’);

// 背景色を変更
myDiv.style.backgroundColor = ‘yellow’;

// 文字色を白に
myDiv.style.color = ‘#fff’;

// フォントサイズを大きく
myDiv.style.fontSize = ’20px’;

// 余白を追加
myDiv.style.marginTop = ’10px’;
myDiv.style.padding = ’15px 20px’;

// 要素を非表示にする
myDiv.style.display = ‘none’;

// 要素を表示に戻す
myDiv.style.display = ‘block’; // あるいは ‘flex’, ‘grid’, ‘inline-block’ など元の表示タイプに戻す
“`

値を設定する際は、CSSプロパティで指定する値（単位を含む）を文字列として指定します。例えば、'20px', '1em', '50%', '#ff0000', 'rgba(0, 0, 0, 0.5)', 'bold', 'italic' などです。

複数のスタイルを一度に設定する：element.style.cssText

複数のスタイルプロパティを一度に設定したい場合は、element.style.cssTextプロパティを使うことができます。これは、要素のstyle属性の文字列全体を表現します。

“`javascript
const myDiv = document.getElementById(‘myDiv’);

// 複数のスタイルを文字列として設定
myDiv.style.cssText = ‘background-color: lightblue; color: navy; border: 1px solid navy; padding: 10px;’;

// 注意点: cssText を使うと、既存のインラインスタイルはすべて上書きされます。
// 既存のスタイルを維持しつつ追加したい場合は、+= 演算子を使いますが、これは推奨されません。
// 例: myDiv.style.cssText += ‘font-weight: bold;’; // この方法だと、既存のスタイル文字列の末尾に追加され、思わぬ結果になる場合があります。
// 複数のスタイルをまとめて設定したい場合は、個別に設定するか、後述のクラスリスト操作を使用する方が一般的です。
“`

cssTextを使うと簡潔に記述できますが、既存のインラインスタイルがすべて置き換わってしまう点に注意が必要です。通常は、個別のスタイルプロパティを設定するか、より柔軟なクラスリスト操作を使用する方が望ましいです。

element.styleの注意点

• インラインスタイルのみ: element.styleオブジェクトは、HTML要素のstyle属性に直接記述されたインラインスタイルのみを扱います。CSSファイルや<style>タグ内で定義されたスタイルルールは、このオブジェクトを通じて読み取ることはできません（設定することは可能ですが、それはインラインスタイルとして追加されます）。他のスタイルシートから適用されている計算済みのスタイル値を取得したい場合は、後述のgetComputedStyleを使用する必要があります。
• 優先順位: element.styleで設定されたインラインスタイルは、CSSのカスケーディングルールにおいて、他のスタイルシート（外部CSS、<style>タグ）で定義されたスタイルよりも高い優先順位を持ちます（!importantを除く）。JavaScriptでelement.styleを変更すると、CSSファイル等で定義されたスタイルが意図せず上書きされる可能性があることを理解しておく必要があります。
• すべてのプロパティにアクセス可能: 理論上、すべてのCSSプロパティにelement.style.propertyNameの形式でアクセスし、値を設定できます。ただし、ブラウザのサポート状況やプロパティの特性（例: ショートハンドプロパティの設定）によっては、期待通りに動作しない場合や注意が必要な場合があります。

element.styleを使った直接的なスタイルの変更は、特定のプロパティだけをシンプルに変更したい場合や、一時的なスタイル変更に便利です。しかし、複雑なスタイル変更や、複数のスタイルルールをまとめて適用・解除したい場合は、次に説明するクラスリストの操作の方がより構造的で管理しやすくなります。

3. クラス名を使ったCSSの変更：element.classList

ウェブサイトのスタイルは、通常、CSSファイルや<style>タグを使ってクラス名に基づいたスタイルルールとして定義されます。

“`css
/ style.css /
.hidden {
display: none;
}

.highlight {
background-color: yellow;
border: 2px solid orange;
}

.active {
color: white;
background-color: navy;
font-weight: bold;
}
“`

JavaScriptからこれらのスタイルルールを要素に適用したり解除したりしたい場合、最も一般的で推奨される方法は、要素に割り当てられているクラス名をJavaScriptで操作することです。これにより、スタイルの定義（CSS）と動作の制御（JavaScript）を分離でき、コードの保守性、可読性、再利用性が向上します。

要素のクラス名を操作するには、element.classNameプロパティとelement.classListプロパティの2つの方法があります。

element.className プロパティ

element.classNameプロパティは、要素のclass属性の文字列全体を扱います。

“`html

“`

“`javascript
const myElement = document.getElementById(‘myElement’);
console.log(‘現在のクラス名:’, myElement.className); // 出力: “item active”

// クラス名を追加（既存を維持しつつ）
myElement.className += ‘ highlight’; // 空白に注意

console.log(‘追加後のクラス名:’, myElement.className); // 出力: “item active highlight”

// クラス名を完全に置き換える
myElement.className = ‘new-class another-class’;

console.log(‘置き換え後のクラス名:’, myElement.className); // 出力: “new-class another-class”
“`

classNameプロパティを使うと、既存のクラス名を文字列として取得したり、新しい文字列を設定してクラス名を変更したりできます。しかし、既存のクラス名を維持したまま特定のクラスだけを追加・削除したり、複数のクラスを安全に操作したりするのが面倒です。特に、空白や重複するクラス名の扱いに注意が必要です。このため、現代のJavaScript開発では、より便利なelement.classListプロパティを使用するのが一般的です。

element.classList プロパティ

element.classListは、要素のクラス名リストを扱うためのプロパティで、便利なメソッドを提供します。これは、クラス名文字列をスペースで区切ったリストとして扱い、個別のクラス名に対して操作を行います。

element.classListオブジェクトが提供する主なメソッド：

• add(className1, className2, ...): 指定したクラス名を要素に追加します。クラスがすでに存在する場合は何も起こりません。複数のクラス名をカンマ区切りで一度に追加できます。
  javascript
const myElement = document.getElementById('myElement'); // クラス名: "item active"
myElement.classList.add('highlight'); // "item active highlight"
myElement.classList.add('new-class', 'another-class'); // "item active highlight new-class another-class"

• remove(className1, className2, ...): 指定したクラス名を要素から削除します。クラスが存在しない場合は何も起こりません。複数のクラス名を一度に削除できます。
  javascript
const myElement = document.getElementById('myElement'); // クラス名: "item active highlight"
myElement.classList.remove('active'); // "item highlight"
myElement.classList.remove('new-class', 'non-existent-class'); // "item highlight" (non-existent-classは無視される)

• toggle(className, force): 指定したクラス名が存在すれば削除し、存在しなければ追加します。トグルのような振る舞いを簡単に実装できます。第二引数force（真偽値）を指定すると、トグルではなく、forceがtrueなら強制的に追加、falseなら強制的に削除となります。
  “`javascript
  const myElement = document.getElementById(‘myElement’); // クラス名: “item highlight”

  myElement.classList.toggle(‘active’); // “item highlight active” (active がなかったので追加)
  myElement.classList.toggle(‘highlight’); // “item active” (highlight があったので削除)

  // force 引数の例
  myElement.classList.toggle(‘active’, true); // active が存在しても、force:true なので存在を保証 (変化なし)
  myElement.classList.toggle(‘active’, false); // active が存在するので、force:false なので削除 (“item”)
  “`

• contains(className): 指定したクラス名が要素に存在するかどうかをチェックします。結果は真偽値（trueまたはfalse）で返されます。
  javascript
const myElement = document.getElementById('myElement'); // クラス名: "item active"
console.log(myElement.classList.contains('item')); // 出力: true
console.log(myElement.classList.contains('hidden')); // 出力: false

• replace(oldClassName, newClassName): 既存のクラス名を新しいクラス名に置き換えます。oldClassNameが存在しない場合は何も起こりません。
  javascript
const myElement = document.getElementById('myElement'); // クラス名: "item active"
myElement.classList.replace('active', 'inactive'); // "item inactive"
myElement.classList.replace('non-existent', 'new'); // 変化なし

element.classList を使ったスタイル変更のサンプルコード

ここでは、ボタンをクリックするたびに要素の表示/非表示を切り替える例を示します。

“`html

表示/非表示を切り替え

“`

この例では、CSSで.hiddenクラスにdisplay: none;を設定しておき、JavaScriptでボタンがクリックされるたびにtoggleBox要素にhiddenクラスを付けたり外したりしています。これにより、要素の表示・非表示を簡単に切り替えることができます。

element.classListを使うアプローチは、複数のスタイルをまとめて管理したい場合や、要素の状態（アクティブ、無効、エラーなど）に応じてスタイルを切り替えたい場合に非常に強力です。CSS側でスタイルルールを定義し、JavaScript側でそのルールを適用・解除するという明確な役割分担は、大規模なアプリケーション開発においてコードの管理を容易にします。

4. CSS変数（カスタムプロパティ）を使ったCSSの変更

CSS変数（正式には「カスタムプロパティ」）は、CSS内で値を格納し、再利用可能にする機能です。例えば、ウェブサイト全体で使うテーマカラーやフォントサイズなどを変数として定義しておき、それを様々なCSSルールの中で参照することができます。

“`css
/ style.css /
:root {
–theme-color: navy;
–background-color: #f0f0f0;
–spacing-unit: 8px;
}

.themed-element {
color: var(–theme-color);
background-color: var(–background-color);
padding: calc(2 * var(–spacing-unit)); / 変数を使った計算も可能 /
}

button {
background-color: var(–theme-color);
color: white;
padding: var(–spacing-unit) calc(2 * var(–spacing-unit));
}
“`

このCSS変数は、JavaScriptから簡単に読み取ったり、変更したりすることができます。JavaScriptでCSS変数の値を変更すると、その変数を参照しているすべてのCSSルールにリアルタイムで変更が反映されるため、ウェブサイト全体のテーマを動的に切り替えるといった処理を効率的に実装できます。

JavaScriptからのCSS変数へのアクセス

CSS変数は、特定の要素のスタイルとして、または:rootのような擬似クラスを使ってグローバルに定義されます。JavaScriptからCSS変数を操作するには、対象となる要素のstyleプロパティを使用します。

• 変数の設定: element.style.setProperty(propertyName, value, priority) メソッドを使用します。propertyNameはCSS変数名（--で始まる名前）、valueは設定したい値（文字列）、priorityはオプションで'important'を指定できます。
  “`javascript
  const root = document.documentElement; // :root にアクセスするには documentElement を使う
  const myElement = document.getElementById(‘myElement’); // 特定の要素のローカル変数を変更する場合

  // グローバル変数 (–theme-color) の変更
  root.style.setProperty(‘–theme-color’, ‘darkred’);

  // 特定の要素のローカル変数 (–local-spacing) の設定（もしあれば）
  // myElement.style.setProperty(‘–local-spacing’, ’16px’);
  “`

• 変数の取得: element.style.getPropertyValue(propertyName) メソッドを使用します。これは、その要素にインラインスタイルとして設定された変数値を返します。
  javascript
const root = document.documentElement;
const themeColor = root.style.getPropertyValue('--theme-color').trim(); // 値の前後の空白を取り除くことが多い
console.log('現在のテーマカラー (インライン):', themeColor);

getComputedStyle を使った計算値の取得

element.style.getPropertyValue() はインラインスタイルとして設定された変数値しか取得できません。CSSファイルなどで定義された変数や、親要素から継承された変数、あるいはvar()関数を使って別の変数から参照されている変数の最終的な計算値を取得するには、getComputedStyle()メソッドを使用する必要があります。これは後述のセクションで詳しく説明しますが、CSS変数についても同様に使えます。

javascript
const root = document.documentElement;
const computedStyle = getComputedStyle(root); // :root の計算済みスタイルを取得
const computedThemeColor = computedStyle.getPropertyValue('--theme-color').trim();
console.log('現在のテーマカラー (計算値):', computedThemeColor); // CSSファイルで定義されていればその値

CSS変数を使ったテーマ切り替えのサンプルコード

ダークモード/ライトモード切り替えは、CSS変数を使ったJavaScriptスタイリングの典型的なユースケースです。

“`html

CSS変数を使ったテーマ切り替え

これはテストのテキストです。

ダークモードに切り替え

“`

この例では、:rootにデフォルト（ライトモード）の変数を定義し、.dark-modeクラスの中でダークモード用の変数値を再定義しています。JavaScriptでは、ボタンクリック時にbody要素にdark-modeクラスを付け外しするだけで、CSS変数の値が自動的に切り替わり、ウェブサイト全体のテーマが変更されます。これは、element.styleを直接操作するよりもはるかにクリーンで効率的な方法です。

CSS変数は、現代的なCSS開発において非常に強力な機能であり、JavaScriptと組み合わせることで、ウェブサイトのカスタマイズ性や動的なテーマ変更などの機能を容易に実現できます。

5. スタイルシート全体（CSSOM）へのアクセスと変更

これまでの方法（element.style, element.classList, CSS変数）は、主に個別の要素のスタイルや、定義済みのスタイルルール（クラス）を操作する方法でした。しかし、JavaScriptからCSSのスタイルシート自体にアクセスし、新たなルールを追加したり、既存のルールを削除・変更したりすることも可能です。これを実現するのが「CSSOM（CSS Object Model）」です。

CSSOMは、ウェブページのCSSスタイルシートの構造をオブジェクトとして表現したものです。JavaScriptはdocument.styleSheetsプロパティを通じて、ページに読み込まれているすべてのスタイルシート（<link>タグや<style>タグ）にアクセスできます。

document.styleSheets は、CSSStyleSheet オブジェクトのリスト（StyleSheetList）です。各CSSStyleSheetオブジェクトは、そのスタイルシート内のCSSルール（CSSRuleオブジェクト）のリスト（CSSRuleList）を持っています。

CSSOMの基本構造

• document.styleSheets: ページ上のすべてのスタイルシートを含む StyleSheetList。
• styleSheet.cssRules: そのスタイルシート内のすべてのCSSルールを含む CSSRuleList。（古いブラウザでは rules の場合もある）
• cssRule.style: そのCSSルールのスタイル宣言オブジェクト（CSSStyleDeclaration）。これは element.style と似ていますが、CSSルール全体に適用される点が異なります。

CSSルールの追加と削除

CSSStyleSheet オブジェクトは、ルールの追加と削除のためのメソッドを提供します。

• insertRule(rule, index): 指定したインデックス位置に新しいCSSルールを追加します。ruleはCSSルールの文字列（例: '.new-class { color: red; }'）、indexは挿入したい位置（0から始まるインデックス）です。挿入されたルールのインデックスを返します。
• deleteRule(index): 指定したインデックス位置のCSSルールを削除します。

サンプルコード：動的なスタイルルールの追加

“`html

新しいCSSルールを追加

```

この例では、空の<style>タグを用意し、そのsheetプロパティを使ってCSSOMにアクセスしています。ボタンをクリックすると、定義したCSSルールの文字列がスタイルシートの末尾に追加され、dynamic-elementクラスを持つ要素に新しいスタイルが適用されます。

注意点とユースケース

• クロスブラウザ互換性: cssRules プロパティは以前 rules という名前だったり、古いブラウザでは挙動が異なったりする可能性があります。また、insertRule や deleteRule もブラウザ間の細かい違いが存在する可能性があります。
• 複雑さ: CSSOMを直接操作するのは、element.styleやelement.classListに比べて複雑です。セレクターの文字列を正確に記述したり、ルールのインデックスを管理したりする必要があります。
• セキュリティ: 外部から取得した信頼できない文字列を使ってルールを挿入すると、XSS（クロスサイトスクリプティング）の脆弱性につながる可能性があります。ユーザー入力を基にルールを作成する場合は、十分なサニタイズが必要です。
• ユースケース: CSSOMの直接操作は、一般的なスタイリングタスクにはあまり使われません。主なユースケースとしては、
  • ユーザーの操作に基づいて、特定の条件に完全に一致するセレクターを持つスタイルルールを動的に作成・削除する場合。
  • JavaScriptライブラリやフレームワークが、コンポーネントのために必要なスタイルを動的に注入する場合。
  • 高度なテーマシステムやCSSプリプロセッサのような機能の一部として、実行時にスタイルルールを生成・操作する場合。

ほとんどの日常的なCSS変更タスクでは、element.classListやCSS変数を使う方がシンプルで安全です。CSSOMの直接操作は、より低レベルで強力な機能であり、特定の高度なニーズがある場合に検討すると良いでしょう。

6. スタイルの計算値（Computed Style）の取得：getComputedStyle()

これまでに説明したelement.styleプロパティは、要素に直接適用されたインラインスタイル（style属性の値）しか読み取ることができませんでした。しかし、要素に実際に適用されているスタイルは、複数のソース（外部CSSファイル、<style>タグ、ユーザーエージェントスタイルシート、親要素からの継承など）からのスタイルルールがカスケーディング（優先順位に基づいて結合・適用）された結果として決まります。この最終的に計算されたスタイル値を「計算値（Computed Style）」と呼びます。

JavaScriptから要素の計算値を取得するには、window.getComputedStyle(element, pseudoElt) メソッドを使用します。

• element: 計算値を取得したいDOM要素です。
• pseudoElt: オプションで、擬似要素（例: '::before', '::after') の計算値を取得したい場合にその擬似要素名の文字列を指定します。通常の要素の場合は null または省略します。

getComputedStyle()は、読み取り専用のCSSStyleDeclarationオブジェクトを返します。このオブジェクトを通じて、要素に適用されているすべてのCSSプロパティの計算値にアクセスできます。値はブラウザによって計算された後の最終的な値であり、通常は絶対単位（例: px, rgb(), rgba()）で返されます。

```html

```

getComputedStyle() で取得した値は、JavaScriptで計算を行ったり、要素の正確なサイズや位置を知りたい場合に非常に役立ちます。例えば、要素の計算済みの幅や高さを取得して別の要素のサイズ計算に使用したり、remやemのような相対単位で指定された値をpx単位で取得してJavaScriptのアニメーションに利用したりできます。

注意点

• 読み取り専用: getComputedStyle()が返すオブジェクトは読み取り専用です。このオブジェクトのプロパティに値を設定しても、要素のスタイルは変更されません。スタイルを変更するには、element.styleやelement.classListを使用する必要があります。
• 計算値: 返される値は、カスケーディング、継承、初期値などがすべて計算された後の最終的な値です。CSSファイルに記述した値そのままではなく、ブラウザがレンダリングに使う具体的な値となります（例: red が rgb(255, 0, 0) になる）。
• 単位: 数値に関連するプロパティ（幅、高さ、マージン、フォントサイズなど）の値は、ほとんどの場合px単位の文字列として返されます（例: "16px"）。計算に使う場合は、パースして数値に変換する必要があります（例: parseFloat(computedStyle.fontSize)）。
• 擬似要素: 擬似要素（::before, ::after）のスタイルも取得できます。例えば、getComputedStyle(element, '::before').content で擬似要素のcontentプロパティの値を取得できます。

getComputedStyle()は、要素の現在の見た目に関する正確な情報を取得するために非常に便利なメソッドです。特に、動的なアニメーションやレイアウト調整、あるいはデバッグなどで、要素に実際に適用されているスタイルを知りたい場合に活用されます。

7. アニメーションとトランジションの制御

JavaScriptを使って、CSSのアニメーションやトランジションを制御することも可能です。これは、単に要素の最終的なスタイルを変更するだけでなく、その変更過程に動きを加えることで、よりリッチなユーザー体験を提供するために重要です。

CSSトランジションの活用

CSSトランジションは、CSSプロパティの値が変化する際に、その変化を滑らかにアニメーションさせるための機能です。JavaScriptを使って要素のスタイル（element.style）やクラス（element.classList）を変更すると、その変更がトランジションの対象プロパティであれば、自動的にトランジションが実行されます。

```css
/ style.css /
.box {
width: 100px;
height: 100px;
background-color: blue;
margin: 20px;
transition: background-color 0.5s ease-in-out, transform 0.5s ease-in-out; / トランジション定義 /
}

.box.active {
background-color: orange;
transform: scale(1.2) rotate(45deg); / active クラス適用時のスタイル /
}
```

```html

アニメーション切り替え

```

この例では、.boxクラスにトランジションの定義（transitionプロパティ）を含めています。ボタンクリックでJavaScriptがanimatedBox要素のactiveクラスをトグルすると、background-colorとtransformプロパティの値が.boxから.box.active（またはその逆）に変化し、CSSで指定された0.5秒のトランジションが自動的に適用されます。

JavaScriptで特定のCSSプロパティだけを動的にトランジション対象にしたい場合は、element.style.transitionProperty や element.style.transitionDuration などのプロパティをJavaScriptで設定することも可能です。

CSSアニメーション (@keyframes) の制御

CSSアニメーションは、より複雑なアニメーションシーケンスやループアニメーションを作成するための機能です。@keyframesルールでアニメーションの各段階（フレーム）のスタイルを定義し、animationプロパティで要素に適用します。

JavaScriptを使って、要素にアニメーション用のクラスを付け外ししたり、element.style.animationPlayState を変更してアニメーションを一時停止・再開したりすることができます。

```css
/ style.css /
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.pulsing-box {
width: 50px;
height: 50px;
background-color: purple;
margin: 20px;
animation: pulse 1s ease-in-out infinite; / 無限ループアニメーション /
}

.paused {
animation-play-state: paused; / アニメーションを一時停止 /
}
```

```html

アニメーション一時停止/再開

```

この例では、.pulsing-boxクラスにanimationプロパティを定義してアニメーションを開始させ、JavaScriptでpausedクラスをトグルすることでanimation-play-stateを変更し、アニメーションを一時停止・再開させています。

アニメーション/トランジションイベント

JavaScriptを使って、CSSアニメーションやトランジションの特定のタイミング（開始、終了、反復など）を検知し、処理を実行することができます。これにはイベントリスナーを使用します。

• transitionstart
• transitionend
• animationstart
• animationend
• animationiteration (アニメーションの各反復の最後に発生)

```javascript
const animatedBox = document.getElementById('animatedBox'); // 上記のトランジション例の要素

animatedBox.addEventListener('transitionend', function(event) {
// どのプロパティのトランジションが終了したか確認することも可能
if (event.propertyName === 'transform') {
console.log('transform トランジションが終了しました。');
}
console.log('トランジションが終了しました！');
});

const pulsingBox = document.getElementById('pulsingBox'); // 上記のアニメーション例の要素

pulsingBox.addEventListener('animationiteration', function() {
console.log('アニメーションが1回繰り返されました！');
});

pulsingBox.addEventListener('animationend', function() {
console.log('アニメーションが終了しました！'); // 無限ループの場合は発生しない
});
```

これらのイベントを使うことで、アニメーションの完了後に次のアクションを実行したり、アニメーションの進行状況に基づいてUIを更新したりすることができます。

Web Animation API (element.animate())

CSSアニメーションやトランジションよりも、JavaScriptからアニメーションをより細かく制御したい場合は、Web Animation APIを利用することも検討できます。element.animate()メソッドは、JavaScriptからCSSプロパティのアニメーションを定義し、再生、一時停止、停止、再生速度の変更などを制御できるオブジェクト（Animationオブジェクト）を返します。

```javascript
const myElement = document.getElementById('myElement');

// element.animate(keyframes, options)
const animation = myElement.animate([
// キーフレーム配列
{ opacity: 1, transform: 'translateX(0)' }, // 0% の状態
{ opacity: 0, transform: 'translateX(100px)' } // 100% の状態
], {
// オプションオブジェクト
duration: 1000, // 1000ミリ秒 = 1秒
easing: 'ease-in-out',
delay: 100, // 100ミリ秒遅延
iterations: Infinity, // 無限ループ
direction: 'alternate', // 往復再生
fill: 'forwards' // アニメーション終了後に最後の状態を維持
});

// アニメーションの制御
// animation.play(); // 再生 (デフォルトで開始)
// animation.pause(); // 一時停止
// animation.reverse(); // 逆再生
// animation.cancel(); // アニメーションをキャンセルし、元の状態に戻す
// animation.finish(); // アニメーションを最後の状態にスキップし、完了させる

// イベントリスナー
// animation.onfinish = function() { console.log('アニメーション完了'); };
// animation.oncancel = function() { console.log('アニメーションキャンセル'); };
```

Web Animation APIは、CSSだけでは難しい複雑なアニメーションシーケンスの構築や、JavaScriptの状態と密接に連携したアニメーション制御に適しています。

CSSトランジションとアニメーションをJavaScriptと組み合わせることで、静的なスタイル変更にインタラクティブな動きを加えることができ、ユーザーエクスペリエンスを大幅に向上させることが可能です。シンプルなスタイルの変化にはトランジションを、より複雑な動きや時間軸の制御が必要な場合はCSSアニメーションやWeb Animation APIを検討しましょう。

8. よくあるユースケースとサンプルコード

JavaScriptを使ったCSS変更は、様々なシナリオで活用されます。ここでは、特によく使われるユースケースとそのサンプルコードを紹介します。これらの例を通じて、これまでに学んだスタイリング方法がどのように組み合わされるかを理解しましょう。

ユースケース 1: 要素の表示/非表示切り替え

これは最も基本的なユースケースの一つです。要素を完全に隠したり、再び表示させたりします。

```html

切り替え

```

解説: CSSで.hiddenクラスを定義し、JavaScriptでclassList.toggle('hidden')を使ってクラスを付け外しするのが最もクリーンな方法です。これにより、JavaScript側はスタイル定義の詳細を知る必要がありません。element.style.displayを直接操作する方法もありますが、要素が元々blockなのかflexなのかgridなのかなどをJavaScript側で記憶しておく必要があるため、少し管理が煩雑になる可能性があります。

ユースケース 2: 要素のサイズや位置の動的な変更

ユーザーの操作や特定のイベントに応じて、要素の幅、高さ、位置などを変更します。

```html

サイズ変更
右に移動

```

解説: サイズや位置のような数値を持つプロパティの変更には、element.styleを直接使うのが一般的です。offsetWidthやoffsetHeightは要素のレイアウト後の幅・高さを取得できます。getComputedStyleは、現在のスタイルシートやインラインスタイル、継承などを考慮した最終的な計算値を取得するのに使います。この例では、CSSにトランジションを定義しておけば、JavaScriptでのスタイル変更が自動的にアニメーションします。

ユースケース 3: テキストや背景色の変更

要素のフォント色や背景色を動的に変更します。

```html

色を変更

```

解説: 色の変更もelement.style.backgroundColorやelement.style.colorを直接操作するのがシンプルです。色の値を文字列として指定します。この例では、色の配列を使って、クリックするたびに色が変わるようにしています。

ユースケース 4: 要素の移動や変形 (transform)

要素を回転、拡大縮小、傾斜、移動させます。CSSのtransformプロパティは、要素の形状や位置を視覚的に変更するために強力です。

```html

回転
拡大/縮小
移動

```

解説: transformプロパティは複数の変形関数（rotate(), scale(), translateX(), translateY(), skew()など）をスペース区切りで組み合わせることができます。JavaScriptからこれを変更する場合も、変更したいすべての変形関数を含む新しい文字列をelement.style.transformに設定する必要があります。上記の例のように、現在の変形状態を変数で管理しておき、変更があるたびに新しいtransform文字列を生成して設定するのが一般的なアプローチです。CSSでtransitionを定義しておけば、これらの変形がスムーズにアニメーションします。

ユースケース 5: テーマ（ダークモードなど）の切り替え

前述のCSS変数のセクションで詳しく説明しましたが、CSS変数を使ったテーマ切り替えは非常に効果的です。

```html

テーマ切り替えの例

これはテーマが適用されるテキストです。

テーマを切り替え

```

解説: :rootでデフォルトテーマ（ライトモード）のCSS変数を定義し、ダークモード用の変数を定義したクラス（例: .dark-theme）を用意します。JavaScriptでは、ルート要素（この場合はbody）にそのクラスを付け外しするだけで、CSS変数が再評価されてテーマが切り替わります。CSS変数を使用することで、JavaScript側ではスタイルの具体的な値ではなく、クラス名の操作という抽象的なレベルでテーマを制御できます。

これらのサンプルコードは、JavaScriptによるCSS変更の基本的な考え方と応用方法を示しています。実際の開発では、これらのテクニックを組み合わせて、より複雑なUIインタラクションやアニメーションを実装することになります。

9. パフォーマンスに関する考慮事項

JavaScriptによるDOM操作、特にスタイルの変更は、ウェブページのレンダリングパフォーマンスに影響を与える可能性があります。スタイル変更が原因でブラウザがページの再計算や再描画を行う必要が生じるためです。パフォーマンスへの影響を最小限に抑えるための考慮事項を理解しておきましょう。

リフロー (Reflow / Layout)

要素のサイズ、位置、マージン、パディング、ボーダー、フォントサイズ、displayプロパティなどの変更は、ブラウザにDOMツリー全体のレイアウトを再計算させる可能性があります。このプロセスを「リフロー」（またはレイアウト）と呼びます。リフローが発生すると、その影響を受けるすべての要素と、それらの子要素、兄弟要素、親要素などの位置やサイズが再計算されます。リフローは計算コストが高く、特に大規模なDOMツリーを持つページではパフォーマンスボトルネックになりやすいです。

リペイント (Repaint / Paint)

要素の色、背景色、visibility、opacity、box-shadowなどの、要素のレイアウトには影響しない見た目のプロパティの変更は、ブラウザに要素の再描画を行わせます。このプロセスを「リペイント」（またはペイント）と呼びます。リペイントはリフローよりは軽い処理ですが、頻繁に発生するとパフォーマンスに影響を与える可能性があります。

JavaScriptによるスタイリングとパフォーマンス

• element.style の直接操作: element.style を使って個々のプロパティを連続して変更すると、変更するたびにブラウザがリフローやリペイントを試みる可能性があります。最新のブラウザは賢くなっており、複数のスタイル変更をまとめて処理しようとしますが、それでもパフォーマンスリスクは存在します。
• リフロー/リペイントを誘発するプロパティ:
  • リフローを誘発しやすいプロパティ: width, height, padding, margin, border, display, position, top, left, right, bottom, float, clear, font-size, font-weight, text-align, overflow, line-height, vertical-align, white-space など。
  • リペイントを誘発しやすいプロパティ: color, background-color, visibility, opacity, text-decoration, outline, box-shadow, border-radius など。
  • リフローもリペイントも誘発しないプロパティ（Composited Layers の場合）: transform, opacity, filter など。これらのプロパティ変更は、GPUを使ったレイヤーの移動や合成だけで済む場合があり、パフォーマンスが高いことが多いです。

パフォーマンス最適化のヒント

1. クラス名 (classList) を使う: 複数のスタイルプロパティを変更する場合、element.style で個別に設定するよりも、スタイルルールをCSSクラスとして定義し、JavaScriptでそのクラスを要素に付け外しする方が、ブラウザは変更を一度にまとめて処理できるため効率的です。
   ```javascript
   // 非推奨 (複数回のリフロー/リペイントの可能性)
   element.style.width = '200px';
   element.style.height = '200px';
   element.style.backgroundColor = 'red';

   // 推奨 (一度のリフロー/リペイントで済む可能性が高い)
   // CSS: .large-red-box { width: 200px; height: 200px; background-color: red; }
   element.classList.add('large-red-box');
   2. **まとめて変更する:** やむを得ず`element.style`で複数のプロパティを変更する場合でも、可能な限りまとめて設定します。
3. **リフローを減らす:** 連続するリフローを防ぐために、ブラウザがレイアウト情報を必要とするプロパティ（`offsetWidth`, `offsetHeight`, `getComputedStyle` など）へのアクセスをまとめて行い、スタイル変更処理の間にこれらのアクセスを挟まないようにします。ブラウザは通常、スタイル変更をバッファリングしますが、レイアウト情報が必要になると、バッファリングされた変更を一度に適用してリフローを実行します。javascript
   const el = document.getElementById('myElement');

   // BAD: 各スタイル変更の間に getComputedStyle がリフローを強制する可能性がある
   el.style.width = (parseFloat(window.getComputedStyle(el).width) + 10) + 'px'; // リフロー
   el.style.height = (parseFloat(window.getComputedStyle(el).height) + 10) + 'px'; // リフロー

   // GOOD: レイアウト情報の取得とスタイル変更を分離
   const currentWidth = parseFloat(window.getComputedStyle(el).width); // リフロー発生 (取得のため)
   const currentHeight = parseFloat(window.getComputedStyle(el).height); // この時点での取得値は上記リフロー後

   el.style.width = (currentWidth + 10) + 'px';
   el.style.height = (currentHeight + 10) + 'px'; // リフローはまとめて発生する可能性が高い
   4. **アニメーションには `transform` や `opacity` を優先する:** 要素の移動や透明度のアニメーションには、可能であれば `position` や `display`, `margin` などではなく、CSSの`transform`プロパティ（`translate()`, `scale()`, `rotate()`など）や`opacity`プロパティを使用します。これらのプロパティ変更は、しばしばGPU上で処理されるコンポジットレイヤーで行われるため、リフローやリペイントが発生しにくく、スムーズなアニメーションが実現できます。CSSトランジションやアニメーション、Web Animation APIを使うことが推奨されます。
5. **`requestAnimationFrame` を使う:** 連続的なスタイル変更（例: マウスの動きに追随する要素、スクロールアニメーションなど）を行う場合は、`requestAnimationFrame` を使用します。これは、ブラウザが次の再描画を行う直前に指定した関数を実行するためのAPIです。これにより、ブラウザの描画サイクルに合わせて処理を実行できるため、不要なリフローやリペイントを防ぎ、よりスムーズなアニメーションを実現できます。javascript
   function updatePosition(x, y) {
   // スタイルを更新
   element.style.left = x + 'px';
   element.style.top = y + 'px';
   }

   let latestMousePosition = { x: 0, y: 0 };
   let ticking = false;

   document.addEventListener('mousemove', function(event) {
   latestMousePosition.x = event.clientX;
   latestMousePosition.y = event.clientY;

   if (!ticking) {
   window.requestAnimationFrame(function() {
   updatePosition(latestMousePosition.x, latestMousePosition.y);
   ticking = false;
   });

   ticking = true;
   

   }
   });
   ```

パフォーマンスを意識することは、JavaScriptによるスタイリングだけでなく、すべてのDOM操作において重要です。特にインタラクティブ性の高い機能やアニメーションを実装する際には、これらの最適化手法を考慮に入れるようにしましょう。

10. フレームワークやライブラリとの連携

今日のウェブ開発では、React, Vue, AngularなどのJavaScriptフレームワークや、jQueryのようなライブラリが広く使われています。これらのツールは、生のJavaScriptによるDOM操作を抽象化し、より効率的で管理しやすい方法でUIを構築するための機能を提供します。スタイリングについても、フレームワークやライブラリは独自の概念やヘルパー機能を提供していることが多いです。

jQuery

jQueryは、JavaScriptによるDOM操作やイベントハンドリングを簡潔に記述できるライブラリです。CSS変更についても便利なメソッドを提供しています。

• .css(propertyName, value) / .css(propertiesObject): 要素のスタイルを直接変更します。element.style に相当します。
  javascript
$('#myElement').css('background-color', 'red');
$('#myElement').css({
width: '200px',
height: '200px',
opacity: 0.5
});
// スタイルの取得も可能
const currentWidth = $('#myElement').css('width'); // 計算値を取得
.css()で取得できる値は、getComputedStyleで取得される計算値に近いです。
• .addClass(className) / .removeClass(className) / .toggleClass(className): 要素にクラスを追加、削除、またはトグルします。element.classList に相当します。複数のクラス名や関数を指定することも可能です。
  javascript
$('#myElement').addClass('active');
$('#myElement').removeClass('hidden');
$('#myElement').toggleClass('highlight');
• .hasClass(className): 要素が指定したクラスを持っているかチェックします。element.classList.contains() に相当します。
  javascript
if ($('#myElement').hasClass('active')) {
console.log('要素は active クラスを持っています。');
}

jQueryは生のJavaScriptよりも簡潔に記述できますが、基本的な考え方（インラインスタイル変更 vs クラス変更）は同じです。

モダンなJavaScriptフレームワーク (React, Vue, Angular)

React, Vue, Angularのようなモダンフレームワークでは、通常、直接的なDOM操作は推奨されません。これらのフレームワークは仮想DOM（Virtual DOM）や独自のデータバインディング機構を持っており、UIの状態（State）に基づいてDOMを効率的に更新します。スタイリングも、この状態管理の仕組みと連携して行われます。

フレームワークにおける主なスタイリングアプローチ：

1. インラインスタイル (JSX/Template内のstyle属性): コンポーネントの状態に基づいて、動的にスタイル値を計算してインラインスタイルとして適用します。

   • React (JSX):
     jsx
function MyComponent({ isActive }) {
const boxStyle = {
width: isActive ? '200px' : '100px',
height: '100px',
backgroundColor: isActive ? 'green' : 'blue',
transition: 'width 0.3s, background-color 0.3s'
};
return <div style={boxStyle}></div>;
}
   • Vue (Template):
     vue
<template>
<div :style="boxStyle"></div>
</template>
<script>
export default {
props: ['isActive'],
computed: {
boxStyle() {
return {
width: this.isActive ? '200px' : '100px',
height: '100px',
backgroundColor: this.isActive ? 'green' : 'blue',
transition: 'width 0.3s, background-color 0.3s'
};
}
}
}
</script>
   • Angular (Template):
     html
<div [style.width]="isActive ? '200px' : '100px'"
[style.height]="'100px'"
[style.background-color]="isActive ? 'green' : 'blue'"
[style.transition]="'width 0.3s, background-color 0.3s'">
</div>
     この方法では、JavaScript（またはフレームワークのデータバインディング構文）で直接スタイルプロパティの値を計算・設定します。element.style に近いですが、フレームワークがDOM更新を管理するため、パフォーマンス最適化や簡潔な記述が可能になります。

2. クラスバインディング: コンポーネントの状態に基づいて、要素に適用するCSSクラス名を動的に切り替えます。これがフレームワークで最も一般的なアプローチであり、推奨されます。CSSファイルでスタイルルールを定義し、JavaScript側ではクラスのオン/オフだけを制御します。

   • React (JSX):
     jsx
function MyComponent({ isActive }) {
const classes = isActive ? 'my-box active' : 'my-box';
// または classnames ライブラリなどを使う
// const classes = classnames('my-box', { active: isActive });
return <div className={classes}></div>;
}
   • Vue (Template):
     vue
<template>
<!-- オブジェクト構文 -->
<div :class="{ 'my-box': true, 'active': isActive }"></div>
<!-- 配列構文 -->
<!-- <div :class="['my-box', { 'active': isActive }]"></div> -->
</template>
<script>
export default {
props: ['isActive']
}
</script>
   • Angular (Template):
     html
<div class="my-box" [class.active]="isActive"></div>
     この方法は、スタイルの定義と状態管理を分離できるため、コードが整理され、再利用性が高まります。これは、生JavaScriptにおけるelement.classListを使ったアプローチのフレームワーク版と言えます。

3. CSS Modules / Styled Components / CSS-in-JS: コンポーネント指向の考え方に基づいたスタイリング手法です。CSSをコンポーネントにカプセル化したり、JavaScript内でスタイルを定義したりします。これらの手法は、フレームワークのビルドプロセスやランタイムと密接に連携して動作します。JavaScriptからスタイルを変更するというよりは、JavaScriptの状態に基づいてスタイルを生成・適用する、というニュアンスが強いです。

モダンなフレームワークを使用している場合でも、基礎となるウェブ技術としてJavaScriptによるCSS変更の仕組みを理解しておくことは重要です。フレームワークが内部でどのような処理を行っているのか、パフォーマンスへの影響はどうなのかを把握するのに役立ちます。しかし、アプリケーションコードを書く際には、フレームワークが提供する標準的なスタイリング方法（主にクラスバインディングやステートに基づくインラインスタイル）に従うことが推奨されます。

11. セキュリティに関する考慮事項

JavaScriptを使ってCSSを変更する際には、セキュリティについても注意が必要です。特に、ユーザーからの入力を受け付けてそれをスタイリングに反映させるような機能（例: ユーザーがテーマカラーを選択できる、カスタムCSSを適用できるなど）を実装する場合、悪意のあるコードの注入（XSS: Cross-Site Scripting）のリスクを考慮する必要があります。

危険な操作の例

• element.innerHTML や element.outerHTML を使う: ユーザーが入力した文字列を含むHTMLやスタイルタグをこれらのプロパティに設定すると、その中に悪意のあるスクリプトやスタイルルールが含まれている場合に実行されてしまう可能性があります。
  javascript
// 非常に危険！
const userProvidedStyle = "<style>body { background-image: url('javascript:alert(1)'); }</style>";
document.head.innerHTML += userProvidedStyle; // ユーザー入力をそのまま innerHTML に追加するのは危険
  スタイルタグだけでなく、<img>タグのonerror属性など、CSSの値に見せかけたJavaScript実行コードを注入されるリスクもあります。
• element.style.cssText にユーザー入力を直接設定する: ユーザーが入力した文字列をそのまま cssText に設定すると、cssTextのパース処理の脆弱性を突かれたり、意図しないスタイルが適用されたりするリスクがあります。
  javascript
// 危険！
const userProvidedCss = "background-color: red; width: 100%; } script { display: none; }"; // 閉じブレースで他のセレクターに影響を与える可能性
element.style.cssText = userProvidedCss;
• CSSOM (insertRule) にユーザー入力を直接挿入する: これも innerHTML や cssText と同様に危険です。悪意のあるCSSルールや、JavaScript実行につながるCSS関数（例: url()を使ったCSSハック）を注入されるリスクがあります。
  javascript
// 危険！
const userProvidedRule = ".user-content { background-image: url('javascript:alert(1)'); }";
document.styleSheets[0].insertRule(userProvidedRule, 0);

セキュリティ対策

1. 信頼できない入力を直接使用しない: ユーザーからの入力や、信頼できない外部ソースから取得した文字列を、スタイル定義やCSSルールとして直接DOMに挿入したり、element.style.cssTextのようなプロパティに設定したりするのを避けます。
2. プロパティ単位で設定する: スタイルを変更する場合は、element.style.propertyName = value; のように、プロパティ名を指定して値を設定します。これにより、CSSプロパティの構文チェックが働き、意図しないプロパティの設定や、CSS値に見せかけたJavaScriptコードの注入を防ぐことができます（ただし、一部のCSS関数には注意が必要な場合もあります）。
   javascript
// 安全性が高い
const userColor = '#ff0000'; // ユーザー入力から取得した色コード
element.style.color = userColor; // プロパティ単位での設定
3. 許可リスト (Whitelist) による値の制限: ユーザーが色やフォントサイズなどの値を指定できるようにする場合、許可された値のリスト（例: 定義済みの色名、特定のHexコードパターン、特定の単位を伴う数値など）を設けて、入力値を検証します。許可リストにない値は拒否するか、デフォルト値に置き換えます。
4. サニタイズライブラリの利用: ユーザーがHTMLやCSSを自由に入力できる機能を提供する場合、DOMPurifyのようなサニタイズライブラリを使用して、危険な要素や属性、スタイル定義を自動的に除去してからDOMに適用することを強く推奨します。
5. textContent を優先する: 要素のテキスト内容を変更する場合は、HTMLとして解釈されるinnerHTMLではなく、テキストとして安全に扱われるtextContentやinnerTextを使用します。

ウェブアプリケーション開発において、ユーザー入力の扱いには常に注意が必要です。スタイル変更機能を提供する際は、入力値の検証とサニタイズを徹底し、安全なAPI（element.style.propertyName, element.classListなど）を使用するように心がけましょう。

12. まとめ：使い分けと今後の学習

この記事では、JavaScriptを使ってCSSを変更する様々な方法を詳細に解説しました。それぞれの方法には得意なことと苦手なことがあり、適切な状況で使い分けることが重要です。

各スタイリング方法の使い分け

• element.style:
  • 得意: 特定の要素の特定のスタイルプロパティを一時的に、またはシンプルに変更したい場合。計算済みの値（例: マウス位置）に基づいて数値を設定する場合。
  • 苦手: 複数のスタイルプロパティをまとめて変更する場合。スタイルの定義とJavaScriptのロジックが混ざりやすい。CSSファイルで定義されたスタイルを上書きしやすい。
• element.classList:
  • 得意: 要素の状態（アクティブ、ホバー、無効など）に応じて、CSSファイルで定義されたスタイルルールをまとめて適用・解除したい場合。スタイル定義とJavaScriptのロジックを分離したい場合。
  • 苦手: 要素ごとに完全に異なる、動的に生成されるスタイルを適用したい場合（この場合はインラインスタイルやCSS変数、CSS-in-JSが適している）。
• CSS変数（カスタムプロパティ）:
  • 得意: ウェブサイト全体のテーマ（色、フォント、間隔など）を動的に切り替えたい場合。複数のCSSルールで同じ値を参照したい場合。JavaScriptからスタイルシートレベルの設定を抽象的に変更したい場合。
  • 苦手: 要素固有の、他の要素と全く関連性のない一時的なスタイル変更にはオーバースペックな場合がある。
• CSSOM (document.styleSheets):
  • 得意: JavaScriptのロジックに基づいて、完全に新しいCSSルールを動的に生成し、スタイルシート全体に追加する必要がある場合。
  • 苦手: ほとんどの一般的なスタイリングタスク。複雑で、クロスブラウザの互換性やセキュリティリスクに注意が必要。

パフォーマンスと保守性を考慮したベストプラクティス

特別な理由がない限り、最も推奨される方法は、CSSファイルでクラス名を定義し、JavaScriptからelement.classListを使ってクラスを付け外しすることです。これにより、スタイル定義とJavaScriptの動作ロジックが明確に分離され、コードの保守性と再利用性が向上します。アニメーションを伴うスタイル変更には、CSSトランジションとclassListの組み合わせが効果的です。

計算値を取得したり、要素固有の数値ベースのスタイル（幅、高さ、位置など）を変更する必要がある場合に、element.styleやgetComputedStyleを適切に使用します。サイト全体のテーマ管理などにはCSS変数を活用すると良いでしょう。CSSOMの直接操作は、ごく稀な高度なユースケースに限定して検討します。

また、パフォーマンスへの影響を常に意識し、特に頻繁なスタイル変更やアニメーションにおいては、リフロー・リペイントを最小限に抑えるように、可能な場合はtransformやopacityを使用したり、requestAnimationFrameを活用したりすることを検討しましょう。

さらなる学習のために

JavaScriptを使ったCSS変更の世界は広いです。この記事で学んだ基礎知識をベースに、さらに以下のトピックを深掘りしていくことをお勧めします。

• イベントリスナー: ユーザーの操作（クリック、マウスオーバー、キーボード入力など）やブラウザイベント（スクロール、リサイズ、DOM読み込み完了など）を検知し、スタイル変更処理を実行する方法をより深く学ぶ。
• アニメーションライブラリ: GSAP (GreenSock Animation Platform) や Anime.js のようなJavaScriptアニメーションライブラリは、より複雑で高度なアニメーションを簡単に実装するための機能を提供します。
• Intersection Observer API: 要素がビューポートに入ったか、別の要素と交差したかなどを検知し、スクロールに応じてスタイルを変更するなどの処理に役立ちます。
• Resize Observer API: 要素自体のサイズ変更を検知し、それに応じてスタイルを調整する必要がある場合に有用です。
• Web Animation API: よりプログラムからCSSアニメーションを制御したい場合に、その詳細な機能（タイムライン、補間、イベントなど）を学ぶ。
• モダンCSS: Grid Layout, Flexbox, CSS Variables, @container queries など、現代的なCSS機能を深く理解することで、JavaScriptとの連携がより効果的になります。
• JavaScriptフレームワークのスタイリング: React, Vue, Angularなどの特定のフレームワークを使っている場合は、そのフレームワークが推奨するスタイリング方法（CSS Modules, Styled Components, CSS-in-JSなど）について深く学ぶ。

JavaScriptとCSSは、モダンなウェブ開発において切っても切り離せない関係にあります。これらの技術を組み合わせて使いこなすことで、より魅力的で動的、そしてパフォーマンスの高いウェブサイトやウェブアプリケーションを構築する力が身につくでしょう。

この記事が、あなたのJavaScriptを使ったCSS変更の旅の良いスタート地点となることを願っています。実際にコードを書いて動かしながら、さまざまなテクニックを試してみてください。

---

これで約5000語の詳細な記事が完成しました。各セクションにはサンプルコードと解説が含まれており、基本的な考え方から応用、パフォーマンス、セキュリティ、フレームワーク連携まで幅広くカバーしています。
承知いたしました。JavaScriptを使ってCSSを変更する方法について、約5000語の詳細なガイド記事を作成します。

---

JavaScriptを使ったCSS変更 完全ガイド【サンプルコード付き】

現代のウェブサイトやウェブアプリケーションにおいて、静的なデザインだけではユーザーの期待に応えることはできません。ユーザーの操作やアプリケーションの状態変化にリアルタイムで応答し、ウェブサイトの外観を動的に変化させる能力が不可欠です。このようなインタラクティブでリッチなユーザーインターフェース（UI）を構築するために、JavaScriptはCSSと連携して要素のスタイルを変更する強力な手段を提供します。

JavaScriptを使うことで、単に色やサイズを変更するだけでなく、要素の表示・非表示を切り替えたり、アニメーションを適用したり、さらにはウェブサイト全体のテーマを切り替えたりすることも可能になります。これらの操作は、ユーザーエクスペリエンスを向上させ、ウェブサイトをより魅力的で使いやすいものにする上で非常に重要です。

この記事では、JavaScriptを使ってCSSスタイルを変更する様々な方法を、それぞれのメリット、デメリット、適切な使い分け、そして具体的なサンプルコードとともに、約5000語にわたって徹底的に解説します。DOM（Document Object Model）の基本から始まり、要素のスタイルプロパティへの直接アクセス、クラス名を使ったスタイルの適用、CSS変数（カスタムプロパティ）の操作、さらにはスタイルシート全体（CSSOM）への高度なアクセスまで、JavaScriptによるスタイリングのすべてを網羅することを目指します。

このガイドを読み終える頃には、あなたはJavaScriptを使ってウェブサイトの見た目を自在に制御する技術を習得し、よりダイナミックで洗練されたUIを構築するための自信を得ているはずです。さあ、JavaScriptであなたのウェブサイトに命を吹き込みましょう。

1. JavaScriptでCSSを変更する基本的な考え方：DOMとは何か、そして要素を取得する方法

JavaScriptを使ってウェブサイトのスタイルを変更する旅は、まず対象となるHTML要素を特定することから始まります。ウェブブラウザは、読み込んだHTMLドキュメントをメモリ上に構造化された表現として保持します。これを「DOM（Document Object Model）」と呼びます。DOMは、HTMLドキュメント内のすべての要素、属性、テキストなどをノードとしてツリー構造で表現したオブジェクトモデルです。JavaScriptは、このDOMツリーにアクセスし、ノードを取得、変更、追加、削除することで、ウェブページのコンテンツや構造、そしてスタイルを操作します。

スタイルを変更するということは、具体的にはDOMツリー上の特定の要素ノードを取得し、その要素ノードが持つスタイルに関連するプロパティやメソッドをJavaScriptから操作することです。

DOMツリーのイメージ

例えば、以下のような簡単なHTML構造を考えます。

```html

Hello, World!

This is an introduction.

```

ブラウザはこれを以下のようなDOMツリーとして解釈します（簡略化）。

Document
├── html
├── head
│ ├── title
│ └── text "DOM Example"
└── body
├── h1 id="pageTitle"
│ └── text "Hello, World!"
├── p class="intro"
│ └── text "This is an introduction."
└── div id="mainContent"
├── p class="article"
│ └── text "Article paragraph 1."
└── p class="article"
└── text "Article paragraph 2."

JavaScriptからスタイリングしたい場合、例えばh1要素の色を変えたいなら、まずこのh1要素に対応するDOMノードを取得する必要があります。

要素の取得方法

DOM要素を取得するためのJavaScriptの組み込みメソッドは複数あり、それぞれ異なる基準で要素を検索します。目的に応じて最も効率的で適切なメソッドを選択することが重要です。

1. document.getElementById(id):
   指定されたid属性値を持つ要素を、ドキュメントの中から一つだけ取得します。HTMLの仕様ではIDはドキュメント内で一意であるべきなので、このメソッドは常に単一の要素を返します（または見つからなければnull）。非常に高速なメソッドです。

   javascript
// HTML: <h1 id="pageTitle">...</h1>
const pageTitleElement = document.getElementById('pageTitle');
if (pageTitleElement) {
console.log('ID "pageTitle" の要素を取得しました:', pageTitleElement);
// 例: この要素の色を変更
pageTitleElement.style.color = 'red';
} else {
console.log('指定されたIDの要素は見つかりませんでした。');
}

2. document.getElementsByClassName(className):
   指定されたクラス名を持つすべての要素を取得します。戻り値はHTMLCollectionと呼ばれる、配列のようにインデックスで要素にアクセスできるコレクションオブジェクトです。HTMLCollectionはライブであり、DOMが変更されて条件に合う要素が追加・削除されると、自動的にコレクションの内容も更新されます。

   ```javascript
   // HTML:

   ...

   ...

   ...

   const articleParagraphs = document.getElementsByClassName('article');
   console.log('クラス名 "article" の要素を取得しました:', articleParagraphs); // HTMLCollection が返される

   // HTMLCollection の要素を処理するにはループを使います
   for (let i = 0; i < articleParagraphs.length; i++) {
   console.log(要素 ${i}:, articleParagraphs[i]);
   // 例: 各要素のフォントスタイルを変更
   articleParagraphs[i].style.fontStyle = 'italic';
   }

   // forEach を使いたい場合は Array.from() などで配列に変換する
   // Array.from(articleParagraphs).forEach(p => {
   // p.style.fontWeight = 'bold';
   // });
   ```

3. document.getElementsByTagName(tagName):
   指定されたタグ名（例: 'div', 'p', 'a', 'img'など）を持つすべての要素を取得します。これもHTMLCollectionを返します。

   ```javascript
   // HTML:

   ...

   ...

   ...

   const allDivs = document.getElementsByTagName('div');
   console.log('タグ名 "div" の要素を取得しました:', allDivs); // HTMLCollection が返される

   // for...of ループで処理するのが一般的
   for (const div of allDivs) {
   console.log('各 div 要素:', div);
   // 例: 各 div 要素にボーダーを追加
   div.style.border = '1px dashed gray';
   }
   ```

4. document.querySelector(selector):
   指定されたCSSセレクター（例: #id, .class, tag, [attribute="value"], div > p, :hoverなど、CSSで使えるほとんどのセレクター）に一致する最初の要素を取得します。特定の複雑な条件に合致する最初の要素だけが必要な場合に非常に便利です。見つからなければnullを返します。

   javascript
// HTML: <div id="mainContent"><p class="article">...</p></div>
const firstArticleInMain = document.querySelector('#mainContent .article');
if (firstArticleInMain) {
console.log('#mainContent 内の最初の .article 要素を取得:', firstArticleInMain);
// 例: この要素の背景色を変更
firstArticleInMain.style.backgroundColor = 'lightyellow';
}
const introParagraph = document.querySelector('p.intro'); // タグ名とクラス名の組み合わせ
if (introParagraph) {
console.log('タグ名 p かつクラス名 intro の要素を取得:', introParagraph);
}

5. document.querySelectorAll(selector):
   指定されたCSSセレクターに一致するすべての要素を取得します。戻り値はNodeListと呼ばれるコレクションオブジェクトです。querySelectorAllが返すNodeListは通常静的であり、DOMが変更されてもコレクションの内容は自動的に更新されません。しかし、forEachメソッドをサポートしているため、配列のように扱うことができます（IE以外の主要なブラウザで）。

   ```javascript
   // HTML:

   ...

   ...

   const allArticleParagraphs = document.querySelectorAll('p.article');
   console.log('すべての p.article 要素を取得しました:', allArticleParagraphs); // NodeList が返される

   // NodeList の要素を処理するには forEach または for ループを使います
   allArticleParagraphs.forEach(p => {
   console.log('NodeList の forEach で処理:', p);
   // 例: 各要素のフォントファミリーを変更
   p.style.fontFamily = 'sans-serif';
   });

   // for...of ループも使える
   // for (const p of allArticleParagraphs) {
   // p.style.textDecoration = 'underline';
   // }
   ```

どのメソッドを選ぶべきか？

• 特定のIDを持つ要素一つだけが必要なら getElementById が最も高速でシンプルです。
• 特定のクラス名を持つ複数の要素が必要なら getElementsByClassName または querySelectorAll('.className') です。getElementsByClassNameはライブコレクションが必要な場合に有利ですが、多くの場合は静的なNodeListで十分なquerySelectorAllが、より柔軟なセレクターを使える点から好まれます。
• 特定のタグ名の複数の要素が必要なら getElementsByTagName または querySelectorAll('tagName') です。これも同様にquerySelectorAllがセレクターの柔軟性で優れます。
• 複雑なCSSセレクターで要素を特定したい場合、または特定のセレクターに一致する最初の要素だけが必要な場合は querySelector が便利です。
• 複雑なCSSセレクターで一致するすべての要素が必要な場合は querySelectorAll が最適です。

要素を正しく取得できたら、次はその要素のスタイルを変更する具体的な方法を見ていきましょう。

2. スタイルプロパティへのアクセスと変更：element.styleプロパティ

要素を取得したら、その要素のスタイルを変更するための最も直接的な方法は、要素オブジェクトが持つstyleプロパティにアクセスすることです。element.styleは、その要素に適用されているインラインスタイル（HTMLタグのstyle属性として記述されたスタイル）を表現するJavaScriptオブジェクトです。

```html

```

javascript
const myElement = document.getElementById('myElement');
console.log('現在のインラインスタイルカラー:', myElement.style.color); // 出力: "blue"
console.log('現在のインラインスタイルボーダー:', myElement.style.border); // 出力: "1px solid black"
console.log('現在のインラインスタイル背景色:', myElement.style.backgroundColor); // 出力: "" (インラインで設定されていないため)

element.styleオブジェクトの各プロパティは、対応するCSSプロパティを表現しています。これらのプロパティに新しい値を代入することで、その要素のインラインスタイルを変更できます。

プロパティ名のキャメルケース表記

CSSプロパティ名にはハイフン（例: background-color, font-size）が使われますが、JavaScriptのプロパティ名にはハイフンを含めることができません。そのため、element.styleオブジェクトでは、CSSプロパティ名をキャメルケースに変換して使用します。

• ハイフンで区切られたCSSプロパティ名の場合、ハイフンを取り除き、それに続く単語の最初の文字を大文字にします。
  例: background-color -> backgroundColor
  例: font-size -> fontSize
  例: margin-top -> marginTop
  例: border-left-width -> borderLeftWidth
• CSSで単一の単語のプロパティ名（例: color, width, display）は、そのまま使用します。
• 例外として、floatはJavaScriptの予約語であるため、歴史的にはcssFloatやstyleFloatが使われてきましたが、多くのモダンブラウザではfloatとしてアクセス可能です。しかし、混乱を避けるためや古い環境との互換性を考慮する場合はcssFloatを使うこともあります。

スタイルの設定例

element.styleの各プロパティに文字列として値を代入します。値はCSSでそのプロパティに指定するのと同じ形式です。

```javascript
const myElement = document.getElementById('myElement');

// 背景色を変更 (backgroundColor は background-color のキャメルケース)
myElement.style.backgroundColor = 'lightblue';

// 文字色を変更 (color はそのまま)
myElement.style.color = 'navy';

// フォントサイズを大きく (fontSize は font-size のキャメルケース)
myElement.style.fontSize = '24px';

// パディングを追加 (padding はそのまま)
myElement.style.padding = '10px 20px';

// ボーダーを変更 (border はそのまま、または borderTopWidth など個別のプロパティも使える)
myElement.style.border = '2px dashed orange';

// 要素を非表示にする (display はそのまま)
myElement.style.display = 'none';

// 要素を表示に戻す
myElement.style.display = 'block'; // または元の display タイプ (inline-block, flex, grid など)

// 位置を指定 (position はそのまま, top, left もそのまま)
myElement.style.position = 'absolute';
myElement.style.top = '50px';
myElement.style.left = '100px';

// 透明度を設定 (opacity はそのまま)
myElement.style.opacity = '0.7';
```

値を設定する際は、必ず単位（px, em, %など）を含めて文字列として指定します。数値のみで指定できるプロパティは限られています（例: zIndex, opacity, fontWeightなど）。

複数のスタイルを一度に設定する：element.style.cssText

element.style.cssTextプロパティを使うと、要素のstyle属性に設定されているCSS文字列全体をまとめて設定したり取得したりできます。これにより、複数のスタイルプロパティを一行で設定できますが、既存のインラインスタイルはすべて上書きされるという大きな注意点があります。

```javascript
const myElement = document.getElementById('myElement');

// 現在の cssText を取得 (現在のインラインスタイル文字列)
console.log('現在の cssText:', myElement.style.cssText); // 出力例: "color: blue; border: 1px solid black;"

// 新しい cssText を設定 (既存のインラインスタイルはすべて消えて、これが唯一のインラインスタイルになる)
myElement.style.cssText = 'background-color: yellow; font-weight: bold;';

console.log('設定後の cssText:', myElement.style.cssText); // 出力例: "background-color: yellow; font-weight: bold;"

// 既存のスタイルに追加しようとする (+ や += は非推奨！予期せぬ結果になる可能性が高い)
// myElement.style.cssText += ' color: green;'; // この方法はクラスリストを使うか、個別に設定する方が良い
```

cssTextを使うと記述は簡潔になりますが、既存のインラインスタイルを常にクリアしてしまうため、細かいスタイル調整や、すでにあるスタイルを維持しつつ一部だけ変更したい場合には向きません。一般的には、個別のプロパティを設定するか、後述のクラスリスト操作を使用する方が推奨されます。

element.styleの注意点と制限

• インラインスタイルのみ: element.styleは、要素のstyle属性に直接記述されたインラインスタイルのみを扱います。外部CSSファイル（<link rel="stylesheet" href="...">）や、<style>タグ内で定義されたスタイルルールは、このオブジェクトを通じて読み取ることはできません。これらのソースから適用されている最終的なスタイル値を取得したい場合は、後述のgetComputedStyleメソッドを使用する必要があります。
• CSSの優先順位: element.styleで設定されたインラインスタイルは、CSSのカスケーディングルールにおいて、通常、他のスタイルシート（外部CSS、<style>タグ）で定義されたスタイルよりも高い優先順位を持ちます（!important指定を除く）。JavaScriptでelement.styleを変更すると、CSSファイル等で定義されたスタイルが意図せず上書きされる可能性があることを理解しておきましょう。
• すべてのプロパティへのアクセス: 主要なCSSプロパティのほとんどはelement.style.propertyNameの形式でアクセス可能ですが、ブラウザのサポート状況やプロパティの特性（例: ショートハンドプロパティからの個別値の取得など）によっては、期待通りに動作しない場合や注意が必要な場合があります。

element.styleを使った直接的なスタイルの変更は、特定のプロパティだけをシンプルに変更したい場合や、動的に計算した数値をスタイルに適用したい場合に便利です。しかし、複雑なスタイル変更や、複数のスタイルルールをまとめて適用・解除したい場合は、次に説明するクラスリストの操作の方がより構造的で管理しやすくなります。

3. クラス名を使ったCSSの変更：element.classListプロパティ

ウェブサイトのスタイルは、通常、CSSファイルや<style>タグを使ってクラス名に基づいたスタイルルールとして定義されます。これは、スタイルの定義（CSS）とコンテンツや構造（HTML）を分離し、コードの管理を容易にするための基本的なプラクティスです。

```css
/ style.css /
.highlight {
background-color: yellow;
border: 2px solid orange;
padding: 5px;
}

.hidden {
display: none;
}

.active {
color: white;
background-color: navy;
font-weight: bold;
}

.error-message {
color: red;
border: 1px solid red;
padding: 8px;
margin-top: 10px;
}
```

JavaScriptからこれらのスタイルルールを要素に適用したり解除したりしたい場合、最も一般的で推奨される方法は、要素に割り当てられているクラス名をJavaScriptで操作することです。要素にクラス名を追加すると、そのクラス名に対応するCSSルールが適用され、クラス名を削除すると、そのルールが解除されます。

要素のクラス名を操作するためのプロパティとして、element.classNameとelement.classListがあります。

element.className プロパティ

element.classNameプロパティは、要素のclass属性の文字列全体を扱います。これは読み書き可能です。

```html

```

```javascript
const myElement = document.getElementById('myElement');
console.log('現在のクラス名:', myElement.className); // 出力: "item active"

// クラスを追加（既存を維持しつつ）
myElement.className += ' highlight'; // 末尾にスペースと新しいクラス名を追加
console.log('追加後のクラス名:', myElement.className); // 出力: "item active highlight"

// クラスを削除（文字列操作は非常に面倒でエラーを起こしやすい）
// 例: active クラスを削除したい場合
myElement.className = myElement.className.replace('active', '').trim();
console.log('active 削除後のクラス名:', myElement.className); // 出力: "item highlight"

// クラス名を完全に置き換える
myElement.className = 'new-class another-class';
console.log('置き換え後のクラス名:', myElement.className); // 出力: "new-class another-class"
```

classNameプロパティを使った文字列操作は、既存のクラス名の間に複数のスペースがあったり、同じクラス名が複数含まれていたりする場合に複雑になり、バグの原因となりやすいです。そのため、個別のクラス名の操作にはあまり推奨されません。

element.classList プロパティ

element.classListは、要素のクラス名リストをDOMTokenListというオブジェクトとして扱うためのプロパティです。DOMTokenListは、クラス名文字列をスペースで区切ってトークン化し、個別のクラス名を簡単に操作できる便利なメソッドを提供します。これは、classNameプロパティに比べて、より構造的で安全、そして直感的にクラス名を操作できます。

element.classListオブジェクトが提供する主なメソッド：

1. add(className1, className2, ...): 指定した一つまたは複数のクラス名を要素に追加します。指定したクラス名が既に要素に存在してもエラーにはならず、何も起こりません。
   javascript
const myElement = document.getElementById('myElement'); // 現在のクラス名: "item active"
myElement.classList.add('highlight'); // クラス名: "item active highlight"
myElement.classList.add('new-class', 'another-class'); // クラス名: "item active highlight new-class another-class"

2. remove(className1, className2, ...): 指定した一つまたは複数のクラス名を要素から削除します。指定したクラス名が要素に存在しなくてもエラーにはならず、何も起こりません。
   javascript
const myElement = document.getElementById('myElement'); // 現在のクラス名: "item active highlight"
myElement.classList.remove('active'); // クラス名: "item highlight"
myElement.classList.remove('new-class', 'non-existent-class'); // クラス名: "item highlight" (non-existent-class は無視される)

3. toggle(className, force): 指定したクラス名が要素に存在すれば削除し、存在しなければ追加します。要素の状態を切り替える際によく使われます。
   第二引数force（真偽値）を指定すると、強制的にクラスを操作できます。forceがtrueなら、クラスが存在するかどうかにかかわらず追加します。falseなら、存在するかどうかにかかわらず削除します。
   ```javascript
   const myElement = document.getElementById('myElement'); // 現在のクラス名: "item highlight"

   myElement.classList.toggle('active'); // active がないので追加 -> "item highlight active"
   myElement.classList.toggle('highlight'); // highlight があるので削除 -> "item active"

   // force 引数の例
   myElement.classList.toggle('active', true); // active が存在するので、true であっても状態変化なし
   myElement.classList.toggle('active', false); // active が存在するので、false なので削除 -> "item"
   myElement.classList.toggle('hidden', true); // hidden がないので、true なので追加 -> "item hidden"
   ```

4. contains(className): 指定したクラス名が要素に存在するかどうかをチェックします。結果は真偽値（trueまたはfalse）で返されます。
   javascript
const myElement = document.getElementById('myElement'); // 現在のクラス名: "item active"
console.log(myElement.classList.contains('item')); // 出力: true
console.log(myElement.classList.contains('hidden')); // 出力: false

5. replace(oldClassName, newClassName): 既存のoldClassNameをnewClassNameに置き換えます。oldClassNameが要素に存在しない場合は何も起こりません。
   javascript
const myElement = document.getElementById('myElement'); // 現在のクラス名: "item active"
myElement.classList.replace('active', 'inactive'); // クラス名: "item inactive"
myElement.classList.replace('non-existent', 'new'); // 変化なし

その他、classListは反復可能オブジェクトであり、forEachなどでクラス名を列挙することも可能です。

javascript
const myElement = document.getElementById('myElement'); // 現在のクラス名: "item active highlight"
myElement.classList.forEach(className => {
console.log('クラス名:', className); // "item", "active", "highlight" が順に出力される
});

element.classList を使ったスタイル変更のサンプルコード

ボタンをクリックして要素のスタイルを切り替える典型的な例です。

```html

スタイル切り替え

```

この例では、CSSで.boxと.activeクラスにそれぞれスタイルルールを定義しています。JavaScript側では、ボタンクリック時にmyBox要素にactiveクラスを付けたり外したりしているだけです。これにより、CSSで定義されたスタイルセットが要素に適用されたり解除されたりし、transitionプロパティによってその変化がスムーズにアニメーションします。

element.classListを使うアプローチは、複数のスタイルプロパティをまとめて変更したい場合や、要素の状態に応じてスタイルを切り替えたい場合に非常に強力です。スタイルの定義はCSSファイルに任せ、JavaScript側ではどのクラスを適用するかだけを制御することで、コードの可読性、保守性、再利用性が大幅に向上します。これが、JavaScriptを使ったCSS変更において最も推奨される、現代的なベストプラクティスと言えます。

4. CSS変数（カスタムプロパティ）を使ったCSSの変更

CSS変数（正式には「カスタムプロパティ」と呼ばれます）は、CSS内で値を定義し、再利用可能にする機能です。これにより、スタイルシート内で繰り返し使われる値（例: テーマカラー、共通のマージンサイズなど）を一箇所で管理し、保守性を高めることができます。さらに、これらのCSS変数はJavaScriptから読み取ったり、変更したりすることが可能です。

```css
/ style.css /
:root { / グローバルスコープで変数を定義 /
--primary-color: navy;
--secondary-color: cornflowerblue;
--spacing: 16px;
--border-style: dashed;
}

.header {
background-color: var(--primary-color); / 変数を参照 /
color: white;
padding: var(--spacing);
}

.card {
border: 2px var(--border-style) var(--secondary-color);
padding: var(--spacing);
margin-bottom: var(--spacing);
}

button {
background-color: var(--secondary-color);
color: white;
padding: calc(var(--spacing) / 2) var(--spacing); / 変数を使った計算も可能 /
}
```

CSS変数の大きな利点は、JavaScriptからその値を変更すると、その変数を参照しているすべてのCSSルールにリアルタイムで変更が反映されることです。これにより、ウェブサイト全体のテーマを動的に切り替えるといった処理を非常に効率的に実装できます。

JavaScriptからのCSS変数へのアクセス

CSS変数は、特定の要素のスタイルとして（ローカルスコープ）、または:rootのような擬似クラスを使ってドキュメント全体で利用可能に（グローバルスコープ）定義されます。JavaScriptからCSS変数を操作するには、対象となる要素のstyleプロパティ、またはgetComputedStyleメソッドを使用します。

• 変数の設定: element.style.setProperty(propertyName, value, priority) メソッドを使用します。

  • propertyName: 設定したいCSS変数名（--で始まる名前、例: '--primary-color'）。
  • value: 設定したい変数値（文字列、例: 'red', '10px', 'url(...)など）。
  • priority: オプションで、'important'を指定すると、その変数に!importantフラグを付けたことになります（通常は不要）。

  グローバルなCSS変数を変更するには、:root要素にアクセスする必要があります。:root要素は、JavaScriptではdocument.documentElement（HTMLドキュメントのルート要素、つまり<html>タグ）で表現されます。

  ```javascript
  const root = document.documentElement; // :root 要素にアクセス

  // グローバル変数 (--primary-color) の変更
  root.style.setProperty('--primary-color', 'darkgreen');

  // 特定の要素にローカル変数 (--button-padding) を設定する場合
  // const myButton = document.getElementById('myButton');
  // myButton.style.setProperty('--button-padding', '20px 30px');
  // CSS: button { padding: var(--button-padding, 10px 20px); } // フォールバック値を指定しておくとローカル変数が無い場合にも対応できる
  ```

  element.style.setProperty()で設定されたCSS変数は、要素のインラインスタイルとして追加されます。インラインスタイルとして定義されたCSS変数は、通常のCSSルールや:rootで定義された変数よりも高い優先順位を持ちます。

• 変数の取得:

  • インラインで設定された変数の取得: element.style.getPropertyValue(propertyName) メソッドを使用します。これは、その要素にインラインスタイルとして設定された変数値を返します。インラインで設定されていない場合は空文字列を返します。
    javascript
const root = document.documentElement;
const primaryColorInline = root.style.getPropertyValue('--primary-color').trim(); // 値の前後の空白を取り除くことが多い
console.log('現在のプライマリーカラー (インライン):', primaryColorInline); // 'darkgreen' または ""

  • 計算値（最終的に適用されている値）の取得: CSSファイルや:rootで定義された変数、または継承などによって最終的に要素に適用されている変数の値を正確に取得するには、window.getComputedStyle(element).getPropertyValue(propertyName) を使用する必要があります。これは、var()関数による参照解決や継承なども考慮した最終的な変数値を返します。

    javascript
const root = document.documentElement;
const computedStyle = getComputedStyle(root); // :root の計算済みスタイルを取得
const primaryColorComputed = computedStyle.getPropertyValue('--primary-color').trim();
console.log('現在のプライマリーカラー (計算値):', primaryColorComputed); // CSSで定義された値 or JavaScriptで設定したインライン値

CSS変数を使ったテーマ切り替えのサンプルコード

ダークモード/ライトモードのようなテーマ切り替えは、CSS変数を使ったJavaScriptスタイリングの典型的な強力なユースケースです。

```html

CSS変数を使ったテーマ切り替え

このページのテーマはボタンで切り替えられます。

ダークモードに切り替え

```

この例では、:rootにデフォルト（ライトモード）の変数値を定義し、body.dark-modeセレクターの中でダークモード用の変数値を再定義しています。JavaScriptでは、ボタンクリック時にbody要素にdark-modeクラスを付け外しするだけで、CSS変数の値が自動的に切り替わり、その変数を参照しているすべての要素のスタイルが変更されます。このように、CSS変数とclassListの組み合わせは、複雑なテーマ管理を効率的に行う上で非常に強力なパターンです。

CSS変数は、現代的なCSS開発において単なる定数管理ツールとしてだけでなく、JavaScriptと連携して動的なスタイル変更を実現するための重要な手段として活用されています。

5. スタイルシート全体（CSSOM）へのアクセスと変更

これまでに紹介した方法（element.style, element.classList, CSS変数）は、主に個別の要素のスタイルや、CSSファイルで定義済みのスタイルルール（クラス）を操作するものでした。しかし、JavaScriptは、CSSのスタイルシート自体にアクセスし、新たなスタイルルール（例: 特定のセレクターに対するスタイル宣言）を動的に追加したり、既存のルールを削除・変更したりすることも可能です。これを実現するのが「CSSOM（CSS Object Model）」です。

CSSOMは、ウェブページのCSSスタイルシートの構造をオブジェクトとして表現したものです。JavaScriptはdocument.styleSheetsプロパティを通じて、ページに読み込まれているすべてのスタイルシート（<link>タグで読み込まれた外部CSSファイルや、<style>タグ内のCSS）にアクセスできます。

document.styleSheetsは、ページに読み込まれているCSSStyleSheetオブジェクトのリスト（StyleSheetList）です。それぞれのCSSStyleSheetオブジェクトは、そのスタイルシート内のCSSルール（CSSRuleオブジェクト）のリスト（CSSRuleList）を持っています。

CSSOMの基本構造

• document.styleSheets: ページ上のすべてのスタイルシートを含む StyleSheetList コレクション。<link>タグや<style>タグ一つ一つに対応するCSSStyleSheetオブジェクトが含まれます。
• styleSheet.cssRules: あるCSSStyleSheetオブジェクト内のすべてのCSSルールを含む CSSRuleList コレクション。（古いブラウザでは styleSheet.rules という名前であることもあります。互換性のために両方チェックすることがあります。）
• CSSRule オブジェクト: 各CSSルール（例: .my-class { ... }, @media (...) { ... }, @keyframes ... { ... }など）を表現するオブジェクト。最も一般的なのはCSSStyleRuleで、セレクターとスタイル宣言のブロックを持ちます。
• cssRule.selectorText: CSSStyleRuleの場合、そのルールのセレクター文字列（例: '.my-class', 'h1, h2'）。
• cssRule.style: CSSStyleRuleの場合、そのルールのスタイル宣言ブロックを表現するCSSStyleDeclarationオブジェクト。これはelement.styleと似ていますが、個別の要素ではなく、ルール全体に適用されるスタイルを扱います。

CSSルールの追加と削除

CSSStyleSheetオブジェクトは、スタイルシートに新たなCSSルールを動的に追加したり、既存のルールを削除したりするためのメソッドを提供します。

• insertRule(rule, index): 指定したインデックス位置に新しいCSSルールを追加します。
  • rule: 追加したいCSSルールの文字列（例: '.new-style { color: purple; }', '@media (max-width: 600px) { .responsive-text { font-size: 14px; } }'）。
  • index: ルールを挿入したい位置（0から始まるインデックス）。既存のルールはこのインデックス以降に一つずつずれます。通常、スタイルシートの末尾に追加する場合は、styleSheet.cssRules.lengthをインデックスに指定します。
    追加されたルールのインデックスを返します。
• deleteRule(index): 指定したインデックス位置のCSSルールを削除します。

サンプルコード：動的なスタイルルールの追加

<style>タグを使って、JavaScriptから動的にCSSルールを追加する例です。

```html

新しいCSSルールを追加

```

この例では、空の<style id="dynamicStyles"></style>タグを用意し、そのsheetプロパティを通じてCSSStyleSheetオブジェクトを取得しています。ボタンをクリックすると、定義したCSSルール文字列.dynamic-styled { ... }がスタイルシートの末尾にinsertRuleメソッドで追加されます。追加されたルールは即座にブラウザによって解釈され、対応する要素（.dynamic-styledクラスを持つdiv）に新しいスタイルが適用されます。

注意点とユースケース

• クロスオリジン制約: <link>タグで読み込まれた外部CSSファイルの場合、そのCSSファイルがJavaScriptを実行しているスクリプトと同じオリジン（ドメイン、ポート、プロトコル）に存在しないと、セキュリティ上の理由からstyleSheet.cssRulesへのアクセスが拒否され、SecurityErrorが発生することがあります。これは、外部の悪意のあるCSSファイルから機密情報を読み取られるのを防ぐためです。<style>タグ内のCSSや、同じオリジンのCSSファイルであれば通常アクセス可能です。
• ブラウザ互換性: CSSOMのAPIは歴史的にブラウザ間での互換性の問題が多くありました。特にcssRulesとrulesの名前の違いや、古いIEでの挙動などに注意が必要な場合があります。しかし、主要なモダンブラウザでは標準仕様に沿った実装が進んでいます。
• 複雑さと管理: CSSOMを直接操作するのは、element.styleやelement.classListに比べて複雑です。セレクターの文字列を正確に記述したり、ルールのインデックスを管理したりする必要があります。また、追加・削除したルールを追跡し、不要になったルールをクリーンアップする責任がJavaScript側に生じます。
• セキュリティ: ユーザーからの入力値を使って動的にCSSルールを生成し、insertRuleでスタイルシートに追加する際には、XSSのリスクに十分注意が必要です。前述のセキュリティに関する考慮事項で述べたように、入力値の検証とサニタイズを徹底する必要があります。
• パフォーマンス: 大量のルールを頻繁に追加・削除すると、スタイルシートの再解析やDOMの再レンダリングのコストが高くなる可能性があります。

CSSOMの直接操作が適しているユースケース:

CSSOMの直接操作は、一般的なスタイリングタスクにはあまり使われません。ほとんどの場合はclassListやelement.styleで事足ります。CSSOMの直接操作は、より低レベルで強力な機能であり、特定の高度なニーズがある場合に検討すると良いでしょう。主なユースケースとしては、

• ユーザーの操作に基づいて、特定の条件に完全に一致するセレクターを持つスタイルルールを動的に作成・削除する必要がある場合。 例: ユーザーがカスタマイズしたセレクターとスタイルを保存し、次回アクセス時に適用する。
• JavaScriptライブラリやフレームワークが、コンポーネントのために必要なスタイルを動的に注入する場合。 例: ポップアップやツールチップなどのUIコンポーネントが、表示時に必要な位置決めやアニメーション用のスタイルルールを一時的に追加する。
• 高度なテーマシステムやCSSプリプロセッサのような機能の一部として、実行時にスタイルルールを生成・操作する場合。
• 特定のメディアクエリやフィーチャーに対応するスタイルルールを、実行時に検出して追加・変更する場合。

これらの高度なケースを除けば、通常はelement.classListを使ったクラス操作や、CSS変数を使ったテーマ管理の方が、よりシンプルで安全、そして管理しやすいアプローチとなります。CSSOMの直接操作は強力ですが、その複雑さと潜在的なリスクを理解した上で慎重に使用する必要があります。

6. スタイルの計算値（Computed Style）の取得：getComputedStyle()

JavaScriptで要素のスタイルを変更するだけでなく、現在その要素に実際に適用されているスタイル値（計算値）を知りたい場合もあります。例えば、要素の現在のサイズを取得して別の要素のサイズ計算に利用したい、あるいはCSSファイルでemや%などの相対単位で指定されたサイズをpx単位で取得したい、といったケースです。

これまでに見たelement.styleプロパティは、要素のstyle属性に直接記述されたインラインスタイルしか読み取ることができませんでした。しかし、要素に最終的に適用されるスタイルは、インラインスタイルだけでなく、外部CSSファイル、<style>タグ、ユーザーエージェント（ブラウザのデフォルト）スタイルシート、親要素からの継承、カスケーディング、スタイルの詳細度、@mediaルールなどがすべて組み合わされて決定されます。この最終的にブラウザによって計算されたスタイルの値を「計算値（Computed Style）」と呼びます。

JavaScriptから要素の計算値を取得するには、window.getComputedStyle(element, pseudoElt) メソッドを使用します。

• element: 計算値を取得したいDOM要素です。必須引数です。
• pseudoElt: オプション引数です。擬似要素（例: ::before, ::after, ::first-lineなど）の計算値を取得したい場合に、その擬似要素名の文字列を指定します（例: '::before', '::after')。通常の要素の場合は null または省略します。

getComputedStyle()は、読み取り専用のCSSStyleDeclarationオブジェクトを返します。このオブジェクトを通じて、要素に適用されているすべてのCSSプロパティの計算値にアクセスできます。返される値は、ブラウザがレンダリングのために内部的に使用する具体的な値であり、通常は絶対単位（例: px, rgb(), rgba(), degなど）に解決された形式で返されます。

```html

```

getComputedStyle() で取得した値は、JavaScriptで要素の正確なサイズ、位置、色、フォントなどの情報を取得し、それに基づいて動的な処理を行いたい場合に非常に役立ちます。例えば、要素の計算済みの幅や高さを取得して、別の要素のレイアウト計算やキャンバスへの描画に利用したり、remやemのような相対単位で指定された値をpx単位で取得してJavaScriptによるアニメーションの移動量計算に利用したりできます。

getComputedStyleの重要な注意点

• 読み取り専用: getComputedStyle()が返すオブジェクトは、その時点での計算値を表現する読み取り専用オブジェクトです。このオブジェクトのプロパティに値を代入しても、要素のスタイルは一切変更されません。スタイルを変更するには、element.styleやelement.classListを使用する必要があります。
• 最終的な計算値: 返される値は、カスケーディング、継承、初期値、var()関数の解決などがすべて計算され、ブラウザがレンダリングに使う直前の最終的な値です。CSSファイルに記述した値そのままではなく、ブラウザによって正規化された形式で返されます（例: 色名redがrgb(255, 0, 0)に、相対単位がpxに変換されるなど）。
• 単位の扱い: 数値に関連するプロパティの値は、ほとんどの場合、単位（px, degなど）を含む文字列として返されます（例: "16px"）。JavaScriptで数値として計算に使う場合は、parseFloat()などの関数を使って単位を取り除き、数値に変換する必要があります。
• 擬似要素のスタイル取得: getComputedStyleは、::beforeや::afterといった擬似要素のスタイルを取得できる唯一の標準的なJavaScript APIです。
• display: none の影響: display: none;が適用されている要素の場合、ブラウザはその要素をレイアウトツリーから除外するため、width, height, margin, paddingなどのレイアウト関連のプロパティの計算値は'auto'や'0px'といった、実際の表示サイズを反映しない値になることがほとんどです。非表示の要素のレイアウト後のサイズを知りたい場合は、visibility: hidden; や opacity: 0; を一時的に適用してgetComputedStyleでサイズを取得し、その後元のスタイルに戻す、といった工夫が必要になる場合があります。

getComputedStyle()は、要素の現在の見た目やレイアウトに関する正確な情報を取得するために非常に便利なメソッドです。動的なレイアウト調整、要素の位置計算、あるいはデバッグなどで、要素に実際に適用されているスタイルを正確に把握したい場合に不可欠なツールとなります。

7. アニメーションとトランジションの制御

JavaScriptを使って、CSSのアニメーションやトランジションの開始、停止、一時停止、再開といった制御を行うことも可能です。これは、単に要素の最終的なスタイルを変更するだけでなく、その変更過程に滑らかな動きや複雑なアニメーションを加えることで、ユーザーインターフェースに生き生きとした表現をもたらし、ユーザーエクスペリエンスを大幅に向上させるために重要です。

CSSトランジションの活用

CSSトランジションは、特定のCSSプロパティの値が変化する際に、その変化を一定時間かけて滑らかにアニメーションさせるための機能です。CSS側でどのプロパティを、どれくらいの時間をかけて、どのようなタイミング関数でアニメーションさせるかを定義しておきます。

```css
/ style.css /
.animated-box {
width: 100px;
height: 100px;
background-color: blue;
margin: 30px;
/ width, height, background-color, transform プロパティの変化を 0.5秒かけてアニメーション /
transition: width 0.5s ease, height 0.5s ease, background-color 0.5s ease, transform 0.5s ease;
}

.animated-box.large {
width: 200px;
height: 200px;
background-color: green;
}

.animated-box.shifted {
transform: translateX(150px);
}
```

JavaScriptを使って要素のスタイル（element.style）やクラス（element.classList）を変更すると、その変更がトランジションの対象プロパティであれば、ブラウザが自動的にトランジションを実行してくれます。

```html

サイズ切り替え
位置切り替え

```

この例のように、CSSでトランジションを定義しておけば、JavaScriptは単にスタイルを変更（クラスを付け外し）するだけで、アニメーションはブラウザが自動的に処理してくれます。これがCSSトランジションを使う最大のメリットであり、多くの一般的なアニメーションニーズを満たします。

CSSアニメーション (@keyframes) の制御

CSSアニメーション（@keyframesルールを使用）は、より複雑なアニメーションシーケンス、複数のスタイル変化、ループアニメーション、異なるタイミング関数などを定義するための機能です。CSS側でアニメーションの定義（@keyframes）と、それを要素に適用する設定（animationプロパティ）を行います。

```css
/ style.css /
@keyframes fadeAndScale {
0% { opacity: 1; transform: scale(1); }
50% { opacity: 0.5; transform: scale(1.1); }
100% { opacity: 1; transform: scale(1); }
}

.box-to-animate {
width: 80px;
height: 80px;
background-color: purple;
margin: 30px;
/ アニメーションを適用 /
animation-name: fadeAndScale;
animation-duration: 2s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite; / 無限ループ /
}

.paused {
animation-play-state: paused; / アニメーションを一時停止 /
}
```

JavaScriptを使って、要素にアニメーション用のクラスを付け外しすることでアニメーションを開始・停止させたり、element.style.animationPlayStateプロパティを変更してアニメーションを一時停止・再開したりすることができます。

```html

一時停止/再開
停止/開始

```

この例では、.box-to-animateクラスでアニメーションを適用し、.pausedクラスでanimation-play-state: paused;を設定しています。JavaScriptはこれらのクラスをトグルするだけでアニメーションの再生状態を制御できます。アニメーションを完全に停止するには、animation-name: none;を設定したクラスを適用するのが一般的です。

アニメーション/トランジションイベント

JavaScriptを使って、CSSアニメーションやトランジションの特定のタイミング（開始、終了、反復など）を検知し、コールバック関数を実行することができます。これは、アニメーションの完了を待って次の処理に進みたい場合などに非常に便利です。これらのタイミングは、DOMイベントとして発生します。

• トランジションイベント:
  • transitionstart: トランジションが開始したときに発生。
  • transitionend: トランジションが完了したときに発生。
  • transitioncancel: トランジションが開始前にキャンセルされたときに発生（例: トランジション中に別のスタイル変更が発生した場合など）。
• アニメーションイベント:
  • animationstart: アニメーションが開始したときに発生。
  • animationend: アニメーションが完了したときに発生（animation-iteration-count: infiniteの場合は発生しない）。
  • animationiteration: アニメーションの各反復の最後に発生。
  • animationcancel: アニメーションが開始前にキャンセルされたときに発生。

これらのイベントにイベントリスナーを追加することで、アニメーションのライフサイクルをJavaScriptから監視できます。イベントオブジェクト（TransitionEventまたはAnimationEvent）からは、影響を受けたプロパティ名 (propertyName)、アニメーション名 (animationName)、経過時間 (elapsedTime) などの情報を取得できます。

```javascript
const myAnimatedBox = document.getElementById('myAnimatedBox'); // トランジション例の要素

myAnimatedBox.addEventListener('transitionend', function(event) {
console.log('トランジションが終了しました！');
console.log('影響を受けたプロパティ:', event.propertyName);
console.log('経過時間:', event.elapsedTime); // 秒単位
// 例: トランジション終了後に何か別の処理を実行
if (event.propertyName === 'transform') {
console.log('位置のトランジションが終了しました。');
}
});

const myAnimationBox = document.getElementById('myAnimationBox'); // アニメーション例の要素

myAnimationBox.addEventListener('animationiteration', function(event) {
console.log(アニメーション "${event.animationName}" が ${event.elapsedTime} 秒で1回繰り返されました！);
});

myAnimationBox.addEventListener('animationend', function(event) {
console.log(アニメーション "${event.animationName}" が終了しました！);
});
```

これらのイベントを使うことで、アニメーションの開始・終了に連動してUIの状態を更新したり、アニメーションシーケンスを連結したり、複雑なインタラクションを実装したりすることが可能になります。

Web Animation API (element.animate())

CSSだけでは難しい、より複雑なアニメーション制御や、JavaScriptの状態と密接に連携したアニメーションを実現したい場合は、Web Animation API (WAAPI) を検討することもできます。element.animate()メソッドは、JavaScriptからCSSプロパティのアニメーションを定義し、再生、一時停止、停止、再生速度の変更、タイムライン制御などを柔軟に行えるオブジェクト（Animationオブジェクト）を返します。

```javascript
const myElement = document.getElementById('myElement');

// element.animate(keyframes, options)
const animation = myElement.animate([
// キーフレームの配列: アニメーションの各時点でのスタイルを定義
{ opacity: 1, transform: 'translateX(0)' }, // 0% の状態 (from)
{ opacity: 0.5, transform: 'translateX(50px)' }, // 中間フレーム
{ opacity: 0, transform: 'translateX(100px)' } // 100% の状態 (to)
], {
// オプションオブジェクト: アニメーションのタイミングなどを設定
duration: 2000, // アニメーション時間 (ミリ秒)
easing: 'ease-in-out', // タイミング関数
delay: 500, // アニメーション開始までの遅延時間 (ミリ秒)
iterations: 3, // 繰り返し回数 (Infinity で無限ループ)
direction: 'alternate', // 再生方向 (normal, reverse, alternate, alternate-reverse)
fill: 'forwards' // アニメーション終了後の状態 (none, forwards, backwards, both)
});

// アニメーションの制御メソッド
// animation.play(); // 再生 (animate() 呼び出しでデフォルトで開始)
// animation.pause(); // 一時停止
// animation.reverse(); // 逆再生
// animation.cancel(); // アニメーションをキャンセルし、元の状態に戻す
// animation.finish(); // アニメーションを最後の状態にスキップし、完了させる

// アニメーションの状態や進行度を取得
console.log(animation.playState); // "running", "paused", "finished", "idle"
console.log(animation.currentTime); // 現在の再生時間 (ミリ秒)
console.log(animation.effect.getTiming().duration); // アニメーションの総時間

// イベントリスナー
// animation.onfinish = function() { console.log('Web Animation API アニメーション完了'); };
// animation.oncancel = function() { console.log('Web Animation API アニメーションキャンセル'); };

// Promise インターフェース
// animation.finished.then(() => console.log('アニメーションが終了しました (Promise)'));
```

Web Animation APIは、CSSの宣言的なアプローチとJavaScriptの命令的なアプローチの良いとこ取りをしたようなAPIです。CSSで定義した@keyframesルールをelement.animate()で参照することもできます。複雑な時間軸制御や、アニメーションの途中からの再生、動的なキーフレームの生成など、JavaScriptからアニメーションをより細かく、プログラム的に制御したい場合に非常に強力です。

アニメーションとトランジションは、ウェブサイトに生命感を吹き込み、ユーザーの注目を引きつけ、操作に対するフィードバックを明確に伝えるために不可欠な要素です。シンプルなスタイルの変化にはCSSトランジションを、要素の状態変化に伴うアニメーションにはCSSアニメーションとclassListの組み合わせを、より高度で複雑な制御が必要な場合はWeb Animation APIを検討するなど、目的に応じて適切なツールを選択しましょう。

8. よくあるユースケースとサンプルコード

これまでに学んだJavaScriptによるCSS変更の様々な方法（element.style, element.classList, CSS変数, getComputedStyle, アニメーション制御）は、ウェブ開発における多岐にわたるユースケースで活用されます。ここでは、特によく遭遇するシナリオとその具体的なサンプルコードをいくつか紹介します。これらの例を通じて、各手法がどのように組み合わされ、実際の機能として実装されるかを理解しましょう。

ユースケース 1: 要素の表示/非表示切り替え

モーダルウィンドウ、ドロップダウンメニュー、トグル可能なコンテンツブロックなど、要素の表示・非表示を切り替えるのは最も基本的なインタラクションの一つです。

```html

コンテンツを表示/非表示

```

解説: classList.toggle()を使う方法が最も推奨されます。CSSでdisplay: none;を持つクラス（例: .is-hidden）を定義しておき、JavaScriptではそのクラスを要素に付け外しするだけで、スタイルの定義とロジックを分離できます。element.style.display = 'none'; や element.style.display = 'block'; といった直接的なスタイル変更も可能ですが、元のdisplayタイプ（block, flex, grid, inline-blockなど）をJavaScript側で管理する必要が生じる場合があり、少し複雑になります。

ユースケース 2: 要素のサイズや位置の動的な変更

ウィンドウのリサイズやスクロール、ドラッグ操作などに応じて要素のサイズや位置を変更する場合です。

```html

ボックスをクリックまたはドラッグしてみてください。

```

解説: サイズや位置のような数値を持つプロパティの変更は、element.styleを直接使うのが一般的です。この例では、マウスイベントを処理して要素をドラッグ移動させています。element.style.leftやelement.style.topにピクセル値を直接設定します。getBoundingClientRect()は要素の画面上での正確な位置とサイズを取得するのに便利です。サイズ変更の例では、offsetWidthとoffsetHeightを使って現在のサイズを取得し、それに基づいて新しいサイズを設定しています。CSSにトランジションを定義しておけば、これらのスタイル変更がスムーズにアニメーションします。ただし、ドラッグ中のようにリアルタイムでスムーズな追従が必要な場合は、一時的にトランジションを無効にすることが多いです。

ユースケース 3: フォーム入力検証エラーの視覚的な表示

ユーザーがフォームに入力した内容が不正だった場合に、該当する入力フィールドやメッセージのスタイルを変更してエラーを知らせます。

```html

ユーザー名 (必須):

ユーザー名は必須です。

送信

```

解説: このユースケースもclassListが最適です。CSSでエラー状態のスタイル（入力フィールドの.input-error、メッセージの.error-message.is-visible）を定義しておき、JavaScriptの検証ロジックで入力値の有効性をチェックし、結果に応じて該当要素にこれらのクラスを付け外しします。これにより、検証ロジックとエラー表示のスタイリングを明確に分離できます。

ユースケース 4: アクティブなナビゲーションリンクの強調表示

現在のページに対応するナビゲーションリンクに特別なスタイルを適用して、ユーザーに現在位置を示します。

```html

```

解説: querySelectorAllで対象となるすべてのリンク要素を取得し、forEachでループ処理を行います。そして、classList.add()とclassList.remove()を使って、条件（例: リンクのhref属性が現在のURLと一致するか）を満たすリンクにis-activeクラスを付け外しします。これにより、CSSで定義されたアクティブ状態のスタイルが適用されます。このパターンは、リストアイテムの選択状態の表示など、要素のグループの中から特定の要素だけを強調表示したい場合によく使われます。

これらのユースケースは、JavaScriptによるCSS変更のほんの一例です。要素の状態、ユーザー入力、時間経過、スクロール位置など、様々なトリガーに基づいてスタイルを動的に変更することで、よりリッチでレスポンシブなウェブインターフェースを構築することができます。

9. パフォーマンスに関する考慮事項

JavaScriptによるDOM操作、特に要素のスタイルの変更は、ウェブページのレンダリングパフォーマンスに大きな影響を与える可能性があります。スタイルを変更すると、ブラウザは変更された要素とその周辺の要素のレイアウトや描画を再計算・再実行する必要が生じます。これらのプロセスは計算コストが高く、ページの応答性を低下させたり、アニメーションをカクつかせたりする原因となります。パフォーマンスへの影響を最小限に抑えるための考慮事項を理解しておくことは非常に重要です。

ウェブブラウザのレンダリングパイプラインは、一般的に以下のステップを含みます。

1. Style: DOMツリーとCSSOM（CSS Object Model）を組み合わせて、各要素に最終的に適用されるスタイルを決定します。
2. Layout: 各要素のサイズ、位置、配置方法を計算します（リフロー）。ページのジオメトリを計算するステップです。
3. Paint: 各要素の背景、色、ボーダー、テキスト、シャドウなどをピクセルに変換します（リペイント）。要素の見た目を描画するステップです。
4. Composite: 各要素を個別のレイヤーに分割し、それらを正しい順序で重ね合わせて最終的な画像を生成します。

JavaScriptで要素のスタイルを変更すると、通常、これらのステップの一部または全部が再実行されます。

• リフロー (Reflow / Layout): 要素のサイズ、位置、構造（display, position, floatなど）に影響を与えるスタイル変更は、ブラウザにDOMツリー全体のレイアウトを再計算させることがあります。これは「リフロー」と呼ばれ、ページ上の他の要素の位置やサイズにも影響が及ぶ可能性があります。リフローはレンダリングパイプラインの中で最もコストの高いステップの一つです。
  • リフローを誘発しやすいCSSプロパティの例: width, height, padding, margin, border, display, position, top, left, right, bottom, float, clear, font-size, font-weight, text-align, overflow, line-height, vertical-align, white-space など。
• リペイント (Repaint / Paint): 要素の見た目のみに影響し、レイアウトには影響を与えないスタイル変更は、ブラウザに要素の再描画を行わせます。これは「リペイント」と呼ばれます。リペイントはリフローよりも軽い処理ですが、頻繁に発生したり、大きな領域で発生したりするとパフォーマンスに影響を与える可能性があります。
  • リペイントを誘発しやすいCSSプロパティの例: color, background-color, visibility, opacity, text-decoration, outline, box-shadow, border-radius など。
• コンポジット (Composite): transformやopacityなど、特定のプロパティの変更は、ブラウザが要素を個別のレイヤーに配置している場合、リフローやリペイントを伴わず、GPU上でレイヤーを移動したり合成したりするだけで済むことがあります。これは「コンポジット」と呼ばれ、非常にパフォーマンスが高く、スムーズなアニメーションに適しています。

JavaScriptによるスタイリングのパフォーマンス問題

• element.style による連続的な変更: JavaScriptでelement.styleを使って複数のプロパティを連続して変更すると、ブラウザは各変更の間にリフローやリペイントを試みる可能性があります。
• レイアウト情報の強制的な取得: スタイル変更の間に、要素のレイアウト情報が必要なプロパティ（例: element.offsetWidth, element.offsetHeight, element.clientTop, element.clientLeft, element.scrollWidth, element.scrollHeight, element.getClientRects(), window.getComputedStyle()) にアクセスすると、ブラウザは保留中のスタイル変更を強制的に適用してリフローを実行し、最新のレイアウト情報を取得しようとします。これを「レイアウトスラッシング (Layout Thrashing)」と呼びます。レイアウトスラッシングは、スタイル変更 -> レイアウト情報の取得 -> スタイル変更 -> レイアウト情報の取得 ... と続くループ内で発生しやすく、パフォーマンスを著しく低下させます。

```javascript
// レイアウトスラッシングの可能性がある例 (BAD)
const el = document.getElementById('myElement');

function animateBadly() {
for (let i = 0; i < 100; i++) {
// 各ループでスタイルを変更
el.style.width = (i + 10) + 'px';
// 各ループでレイアウト情報を取得 (ここでリフローが強制される可能性)
console.log(el.offsetWidth);
}
}
animateBadly(); // 非効率なアニメーションや処理になる恐れ
```

パフォーマンス最適化のための実践的なヒント

1. クラス名 (classList) を積極的に使う: 複数のスタイルプロパティを変更する場合、CSSでスタイルをクラスとして定義し、JavaScriptでelement.classList.add()やremove()を使うのが最も効率的な方法です。これにより、ブラウザはすべてのスタイル変更をまとめて一度に適用し、不要なリフローやリペイントの回数を減らすことができます。
   javascript
// 推奨される方法 (GOOD)
// CSS: .is-large { width: 200px; height: 200px; background-color: red; }
element.classList.add('is-large'); // ブラウザはこれらのスタイル変更を効率的に処理できる

2. スタイル変更とレイアウト情報の取得を分離する: やむを得ずelement.styleを使い、かつレイアウト情報（offsetWidth, getComputedStyleなど）も必要とする場合は、スタイル変更のバッチ処理とレイアウト情報の取得を分離します。まずすべての必要なレイアウト情報を取得し、その後でスタイル変更をまとめて行います。
   ```javascript
   // レイアウト情報の取得とスタイル変更を分離 (GOOD)
   const el = document.getElementById('myElement');

   // まず必要なレイアウト情報をまとめて取得 (ここで一度リフローが発生する可能性)
   const currentWidth = el.offsetWidth;
   const currentHeight = el.offsetHeight;

   // その後、スタイル変更をまとめて行う
   el.style.width = (currentWidth + 10) + 'px';
   el.style.height = (currentHeight + 10) + 'px';
   // ブラウザはこれらのスタイル変更をまとめて処理する傾向がある
   3. **リフロー/リペイントを引き起こしにくいプロパティを優先する:** アニメーションや頻繁なスタイル変更が必要な箇所では、可能であれば`transform`や`opacity`プロパティを使用します。これらのプロパティは多くの場合、GPU上で処理されるため、パフォーマンスが高いです。javascript
   // transform を使った効率的な位置変更 (GOOD)
   element.style.transform = translateX(${newX}px) translateY(${newY}px); // リフローは発生しない可能性が高い
   // element.style.left = newX + 'px'; element.style.top = newY + 'px'; // 位置指定によってはリフローを引き起こす
   4. **アニメーションには CSSアニメーション/トランジション or Web Animation API を使う:** 複雑なアニメーションや、ブラウザの描画サイクルに合わせたスムーズなアニメーションが必要な場合は、JavaScriptで直接スタイルを頻繁に変更するのではなく、CSSアニメーション/トランジションまたはWeb Animation APIを利用することを強く推奨します。これらのAPIはブラウザのネイティブ機能を活用するため、JavaScriptによる直接操作よりも一般的にパフォーマンスが高く、ブラウザが最適なレンダリングを判断してくれます。
5. **`requestAnimationFrame` を使う:** マウスの動きに追随する要素や、スクロール量に基づくアニメーションなど、連続的かつ視覚的な変化を伴うスタイル変更を行う場合は、`requestAnimationFrame`コールバック関数の中でスタイル更新を行います。`requestAnimationFrame`は、ブラウザが次の描画を行う直前に実行されるようにスケジュールされるため、不要な描画を避け、ブラウザの描画サイクルと同期したスムーズなアニメーションを実現できます。javascript
   function updateStyle(progress) {
   // progress に基づいてスタイルを計算し、更新
   element.style.opacity = 1 - progress;
   element.style.transform = translateX(${progress * 100}px);
   }

   function animationLoop(timestamp) {
   // アニメーションロジック (例: 経過時間に基づく進捗計算)
   const progress = calculateProgress(timestamp); // 実際の計算関数が必要

   updateStyle(progress);

   if (!animationFinished) { // アニメーションが続く場合
   requestAnimationFrame(animationLoop);
   }
   }

   requestAnimationFrame(animationLoop); // アニメーション開始
   ``
6. **要素を一時的に非表示にする:** 多数の要素に対して一括でスタイル変更を行う場合、まずそれらの要素を含むコンテナをdisplay: none;などで非表示にし、スタイル変更をすべて適用してから再び表示に戻すという手法が使われることがあります。これにより、スタイル変更中の不要な中間リフロー・リペイントを防ぎ、表示に戻す際に一度だけ最終的なリフロー・リペイントを行うようにできます。ただし、display: none` の要素はレイアウト情報が取得できなくなるため、注意が必要です。

これらのパフォーマンスに関する考慮事項は、JavaScriptによるスタイリングだけでなく、すべてのDOM操作において重要です。特にリッチなUIやアニメーションを実装する際には、これらの最適化手法を念頭に置いて開発を進めることで、ユーザーにとって快適な体験を提供することができます。

10. フレームワークやライブラリとの連携

現代のウェブ開発において、React、Vue、AngularといったJavaScriptフレームワークや、jQueryのようなライブラリは広く普及しています。これらのツールは、生のJavaScriptによるDOM操作を抽象化し、より宣言的で効率的、そして管理しやすい方法でUIを構築するための様々な機能を提供します。スタイリングについても、これらのフレームワークやライブラリは独自の概念やヘルパー機能を提供しており、必ずしも生のJavaScriptによるelement.styleやclassListの直接操作だけを使うわけではありません。

しかし、これらのフレームワークやライブラリが内部的に行っている処理は、結局のところDOM要素のスタイル変更であり、その根幹にはこの記事で解説してきたJavaScriptによるCSS変更の仕組みがあります。フレームワークやライブラリを使う場合でも、基礎となる技術を理解しておくことは、問題のデバッグやパフォーマンスのボトルネックの特定に役立ちます。

ここでは、主要なフレームワークやライブラリにおけるスタイリングのアプローチを簡単に紹介します。

jQuery

jQueryは、JavaScriptによるDOM操作やイベントハンドリングを簡潔に記述できる人気のライブラリです。CSS変更についても、直感的に使えるメソッドを提供しています。

• .css(propertyName, value) / .css(propertiesObject): 要素のスタイルを直接、インラインスタイルとして変更または設定します。これは生のJavaScriptのelement.styleプロパティに相当します。引数としてCSSプロパティ名と値を渡すか、プロパティ名と値のペアを含むオブジェクトを渡すことができます。キャメルケースまたはケバブケース（文字列として）のプロパティ名が使えます。スタイルの取得（計算値）も可能です。
  javascript
// 背景色を赤に変更
$('#myElement').css('background-color', 'red');
// 複数のスタイルをオブジェクトで設定
$('#myElement').css({
width: '200px',
height: '200px',
opacity: 0.5
});
// スタイルの取得 (getComputedStyle に近い計算値を取得)
const currentWidth = $('#myElement').css('width');
console.log(currentWidth); // 例: "100px"
• .addClass(className) / .removeClass(className) / .toggleClass(className): 要素にCSSクラスを追加、削除、または存在に応じて追加・削除（トグル）します。これは生のJavaScriptのelement.classListプロパティのメソッド（add, remove, toggle）に相当します。複数のクラス名をスペース区切りで指定したり、クラス名を返す関数を指定したりすることも可能です。
  javascript
// クラスを追加
$('#myElement').addClass('active');
// クラスを削除
$('#myElement').removeClass('hidden');
// クラスをトグル
$('#myElement').toggleClass('highlight');
• .hasClass(className): 要素が指定したクラスを持っているかチェックします。真偽値を返します。生のJavaScriptのelement.classList.contains()に相当します。
  javascript
if ($('#myElement').hasClass('active')) {
console.log('要素は active クラスを持っています。');
}

jQueryは、生のJavaScriptよりも簡潔でブラウザ間の差異を吸収してくれるため、CSS操作が容易になります。ただし、大規模なアプリケーション開発では、jQueryよりもモダンなフレームワークが提供するコンポーネントベースのアプローチが主流となっています。

モダンなJavaScriptフレームワーク (React, Vue, Angular)

React、Vue、Angularのようなモダンなフロントエンドフレームワークは、UIをコンポーネントとして構築するアプローチを採用しています。これらのフレームワークでは、通常、開発者が直接DOMを操作することは推奨されません。代わりに、コンポーネントの「状態（State）」を管理し、フレームワークがその状態の変化に応じてDOMを効率的に更新します。スタイリングも、この状態管理の仕組みと連携して行われます。

フレームワークにおける主なスタイリングアプローチ：

1. インラインスタイル (Template/JSX 内の style 属性): コンポーネントの状態に基づいて、動的にスタイル値を計算し、要素のインラインスタイルとして適用します。スタイルはJavaScriptオブジェクトとして定義されます。

   • React (JSX): CSSプロパティ名はキャメルケースで記述します。値は文字列（単位付き）または数値（一部プロパティ、単位なし）です。
     jsx
function MyComponent({ isActive }) {
const boxStyle = {
width: isActive ? '200px' : '100px',
height: '100px',
backgroundColor: isActive ? 'green' : 'blue',
transition: 'width 0.3s, background-color 0.3s' // CSS文字列として
};
return <div style={boxStyle}></div>;
}
   • Vue (Template): :styleバインディングを使用します。オブジェクト構文または配列構文でスタイルを指定できます。CSSプロパティ名はキャメルケースまたはケバブケース（引用符で囲む）で記述します。
     vue
<template>
<div :style="boxStyle"></div>
</template>
<script>
export default {
props: ['isActive'],
computed: {
boxStyle() {
return {
width: this.isActive ? '200px' : '100px',
height: '100px',
backgroundColor: this.isActive ? 'green' : 'blue',
transition: 'width 0.3s, background-color 0.3s'
};
}
}
}
</script>
   • Angular (Template): [style.propertyName]バインディングを使用します。ケバブケースのプロパティ名が一般的です。単位を指定する場合は、[style.width.px]="myWidth" のように単位をバインディングに含めることもできます。
     html
<div [style.width]="isActive ? '200px' : '100px'"
[style.height]="'100px'"
[style.background-color]="isActive ? 'green' : 'blue'"
[style.transition]="'width 0.3s, background-color 0.3s'">
</div>
     この方法は、動的に計算された値をスタイルに適用するのに適しています。フレームワークが効率的にDOMのインラインスタイルを更新してくれます。

2. クラスバインディング: コンポーネントの状態に基づいて、要素に適用するCSSクラス名を動的に切り替えます。スタイル定義自体はCSSファイルで行い、JavaScript（またはフレームワークのテンプレート構文）ではどのクラスを適用するかだけを制御します。これがフレームワークで最も一般的で推奨されるアプローチです。

   • React (JSX): className属性を使用します。状態に基づいてクラス名の文字列を組み立てるか、classnamesのようなヘルパーライブラリを使用します。
     jsx
function MyComponent({ isActive, isError }) {
// const classes = 'my-box ' + (isActive ? 'active ' : '') + (isError ? 'error' : '');
// または classnames ライブラリ
// import classnames from 'classnames';
// const classes = classnames('my-box', { active: isActive, error: isError });
const classes = `my-box ${isActive ? 'active' : ''} ${isError ? 'error' : ''}`.trim();
return <div className={classes}></div>;
}
   • Vue (Template): :classバインディングを使用します。オブジェクト構文でクラス名と真偽値のペアを指定するのが便利です。配列構文も使用可能です。
     vue
<template>
<!-- オブジェクト構文 -->
<div :class="{ 'my-box': true, 'active': isActive, 'error': isError }"></div>
<!-- 配列構文 -->
<!-- <div :class="['my-box', { active: isActive, error: isError }]"></div> -->
</template>
<script>
export default {
props: ['isActive', 'isError']
}
</script>
   • Angular (Template): [class.className]="condition"バインディングを使用します。複数のクラスを個別にバインディングできます。
     html
<div class="my-box" [class.active]="isActive" [class.error]="isError"></div>
     この方法は、スタイルの定義と状態管理を分離できるため、コードが整理され、再利用性が高まります。これは、生JavaScriptにおけるelement.classListを使ったアプローチのフレームワーク版と言えます。

3. CSS Modules / Styled Components / CSS-in-JS: これらは、CSSをコンポーネント単位で管理するためのモダンなスタイリング手法です。CSS Modulesはクラス名のスコープをローカルに限定し、名前の衝突を防ぎます。Styled Componentsや EmotionなどのCSS-in-JSライブラリは、JavaScriptファイル内でCSSを定義し、コンポーネントに直接関連付けます。これらの手法は、フレームワークのビルドプロセスやランタイムと密接に連携して動作します。JavaScriptからスタイルを変更するというよりは、JavaScriptの状態に基づいてスタイルを生成・適用する、というアプローチが強いです。これらの詳細はフレームワークやライブラリによって異なります。

フレームワークを使用している場合でも、基盤となるJavaScriptとDOMの仕組みを理解しておくことは、デバッグや高度なカスタマイズを行う際に必ず役立ちます。ただし、日常的な開発においては、フレームワークが推奨または提供する標準的なスタイリング方法（主にクラスバインディングやステートに基づくインラインスタイル）に従うことが、プロジェクトの規約や保守性を保つ上で重要です。

11. セキュリティに関する考慮事項

JavaScriptを使ってDOMのスタイルを変更する際には、セキュリティ、特にXSS（Cross-Site Scripting）の脆弱性について注意が必要です。もし、ユーザーからの入力や、信頼できない外部ソースから取得した文字列を直接スタイリングに利用する場合、悪意のあるコード（HTMLタグ、JavaScriptコード、またはCSSの特殊な構文）を注入されるリスクが発生します。

危険な操作の例

悪意のあるユーザーは、入力フィールドやURLパラメータなどを通じて、ウェブサイトの表示や動作を改変しようとします。スタイル変更の文脈では、以下のような操作が危険を招く可能性があります。

1. 信頼できない文字列を element.innerHTML または element.outerHTML に設定する: ユーザーが入力した文字列に<style>タグやスタイル属性、あるいは他のHTML要素を含め、それをinnerHTMLなどに設定すると、その中のコードがブラウザによって解釈・実行される可能性があります。
   javascript
// 非常に危険な例！ ユーザー入力を innerHTML に設定
// 想定される入力: "<div>ユーザーのコメント</div>"
// 悪意のある入力例: "<img src='x' onerror='alert(document.cookie)'>" または "<style>body{background-image:url(javascript:alert(1))}</style>"
const userInput = document.getElementById('userComment').value; // ユーザーからの入力
document.getElementById('commentArea').innerHTML = userInput; // 危険！ サニタイズなしで HTML として挿入
2. 信頼できない文字列を element.style.cssText に設定する: ユーザーが入力した文字列をそのままcssTextに設定すると、その中に不正なCSS構文や、url()関数を使ったCSSハック（一部のブラウザでJavaScript実行につながる可能性があった）などが含まれている場合に問題が発生するリスクがあります。閉じブレース}を注入して、後続のCSSルールを改変するような攻撃も考えられます。
   javascript
// 危険な例！ ユーザー入力を cssText に設定
// 想定される入力: "color: red; font-weight: bold;"
// 悪意のある入力例: "color: red; } script { display: none; } /*"
const userStyleInput = document.getElementById('userStyle').value; // ユーザーからの入力
document.getElementById('styledElement').style.cssText = userStyleInput; // 危険！ サニタイズなしで設定
3. 信頼できない文字列を CSSOM (insertRule) に挿入する: ユーザーが入力した文字列をCSSルールとしてdocument.styleSheets[i].insertRule()で挿入するのも同様に危険です。悪意のあるCSSルールを動的にページに追加されるリスクがあります。
   javascript
// 危険な例！ ユーザー入力を insertRule で追加
// 想定される入力: ".user-defined { color: blue; }"
// 悪意のある入力例: ".user-defined { background-image: url('javascript:alert(1)'); } /*"
const userRuleInput = document.getElementById('userRule').value; // ユーザーからの入力
try {
document.styleSheets[0].insertRule(userRuleInput, 0); // 危険！ サニタイズなしで挿入
} catch(e) {
console.error('ルールの挿入に失敗', e); // セレクター構文エラーなど
}

セキュリティ対策

ユーザーからの入力や外部から取得した信頼できないデータをスタイリングに利用する場合、以下の対策を講じる必要があります。

1. 信頼できない入力を直接HTMLやCSSとして解釈される場所に設定しない: 特にinnerHTMLやcssText、insertRuleなど、文字列をそのままHTMLやCSSとしてパース・解釈するAPIには、ユーザー入力を直接渡さないようにします。
2. 安全なAPIを優先する: スタイルを変更する場合は、プロパティ名を指定して値を設定するelement.style.propertyName = value; を使用します。この方法であれば、指定したプロパティの値のみが変更され、他のプロパティや構造に影響を与えるリスクが低減します。また、element.classList.add(), remove(), toggle()も、クラス名という比較的安全な単位で操作するため、文字列操作よりも安全です。

3. 許可リスト (Whitelist) による入力値の検証と制限: ユーザーがスタイル値を指定できるようにする場合、許可されるプロパティ名、値の形式（例: 色であればHexコード、RGB/RGBA形式、許可されたキーワードのみ）、単位などを厳密に検証します。許可リスト方式で、指定された入力値が安全な範囲内にあることを確認します。許可リストにないプロパティ名や値は拒否するか、デフォルト値に置き換えます。
   ```javascript
   // 安全な入力値検証の例 (簡略化)
   function isValidColor(colorString) {
   // 安全な色形式 (Hex, rgb, rgba, 許可された色名) をチェックする正規表現やリストを使う
   return /^#([0-9A-F]{3}){1,2}$/i.test(colorString) || /^rgb(\s(\d{1,3})\s,\s(\d{1,3})\s,\s(\d{1,3})\s)$/i.test(colorString) || ...;
   }

   const userColor = document.getElementById('userColor').value;
   if (isValidColor(userColor)) {
   element.style.color = userColor; // 検証済みなので比較的安全
   } else {
   console.error('無効な色指定です。');
   }
   ``
4. **サニタイズライブラリの利用:** ユーザーがより自由な形式でHTMLやCSSを含むコンテンツ（例: リッチテキストエディタの出力、カスタマイズ可能なウィジェットのコードなど）を入力できる機能を提供する場合、DOMPurifyのような実績のあるサニタイズライブラリを必ず使用します。これらのライブラリは、潜在的に危険なタグ、属性、CSSプロパティや値などを自動的に除去・無害化してくれます。
5. **textContentまたはinnerTextを優先する:** 要素のテキスト内容を変更する場合は、HTMLとして解釈されるinnerHTMLではなく、テキストとして安全に扱われるtextContentやinnerText`を使用します。これにより、テキスト内にHTMLタグやスクリプトが混入しても、単なる文字として表示されるだけで実行されるリスクを防げます。

ウェブアプリケーション開発において、ユーザー入力の扱いは常にセキュリティ上の重要な検討事項です。スタイル変更機能を提供する際は、入力値の検証とサニタイズを怠らず、安全なAPIを優先して使用するように心がけましょう。

12. まとめ：使い分けと今後の学習

この記事では、JavaScriptを使ってCSSスタイルを動的に変更するための様々な方法を、それぞれの特徴、メリット、デメリット、そして具体的なコード例とともに詳しく解説しました。あなたは、要素の取得方法から始まり、element.styleによるインラインスタイル操作、element.classListによるクラス操作、CSS変数を使ったテーマ管理、getComputedStyleによる計算値の取得、CSSアニメーション/トランジションの制御、そしてCSSOMへの低レベルなアクセスまで、幅広いテクニックを学びました。

これらの手法は、それぞれ異なるシナリオに適しています。適切な方法を選択することが、効率的で保守性が高く、そしてパフォーマンスの高いウェブアプリケーションを構築するための鍵となります。

各スタイリング方法の使い分けのヒント

• デフォルトとして推奨されるのは element.classList です。 複数のスタイルプロパティをまとめて変更したい場合や、要素の状態（アクティブ、無効など）に応じてスタイルを切り替えたい場合は、CSSファイルでスタイルをクラスとして定義し、JavaScriptからclassList.add()/remove()/toggle()を使ってクラスを付け外しするのが最も構造的で管理しやすく、パフォーマンスも優れている傾向があります。
• 特定のプロパティをシンプルに変更する場合や、動的に計算した数値（サイズ、位置など）を適用する場合は element.style を使用します。 ただし、頻繁な連続変更やリフローを伴うプロパティの変更には、パフォーマンスに注意が必要です。
• ウェブサイト全体のテーマ（色、フォント、間隔など）を動的に切り替えたい場合は、CSS変数（カスタムプロパティ）が非常に有効です。 :rootやテーマ用のクラスで変数を定義し、JavaScriptからroot.style.setProperty('--variable-name', 'value')や、テーマクラスの付け外しによって変数を操作します。
• 要素に実際に適用されている最終的なスタイル値（計算値）を知りたい場合は getComputedStyle() を使用します。 これは読み取り専用ですが、emや%などの相対単位をpxに変換した値や、継承された値、擬似要素のスタイルなどを取得するのに役立ちます。
• CSSOM (document.styleSheets) の直接操作は、特殊な高度なユースケースに限定されます。 JavaScriptのロジックに基づいて完全に新しいCSSルールを動的に作成・追加・削除する必要がある場合などに検討しますが、複雑さ、クロスブラウザ互換性、セキュリティリスクに注意が必要です。ほとんどの一般的なスタイリングタスクには不向きです。

パフォーマンスと保守性を意識した開発

• パフォーマンスが重要な箇所では、リフローやリペイントを引き起こしやすいプロパティの頻繁な変更を避け、transformやopacityといったコンポジットレイヤーで処理されやすいプロパティを優先的に使用します。
• 連続的なアニメーションには、JavaScriptで直接スタイルを頻繁に変更するのではなく、CSSアニメーション/トランジションまたはrequestAnimationFrame、さらにはWeb Animation APIを利用することを検討します。
• ユーザー入力や外部データをスタイリングに利用する場合は、セキュリティリスク（XSS）を十分に理解し、入力値の検証、サニタイズライブラリの利用、安全なAPI（element.style.propertyName, classListなど）の使用を徹底します。

さらなる学習へのステップ

JavaScriptを使ったCSS変更の技術は、ここで終わりではありません。さらにスキルを磨き、より高度なUIを構築するために、以下の領域を深く学んでいくことをお勧めします。

• 高度なDOMイベント: scroll, resize, mousemove, touchmove などのイベントを正確に処理し、それらに基づいてスムーズなスタイル変更を行う技術（例: スクロールアニメーション、パララックスエフェクト）。
• Intersection Observer API と Resize Observer API: 要素の可視性やサイズ変更を効率的に監視し、パフォーマンスを損なわずにスクロールやリサイズに連動したスタイル変更を実装する。
• CSS Houdini: CSSの拡張性を高めるための新しいAPIセット（Properties and Values API, Paint API, Animation Workletなど）。より低レベルでCSSエンジンにアクセスし、カスタムプロパティの型指定やカスタム描画、カスタムアニメーション補間などをJavaScriptで定義できるようになります。まだ発展途上ですが、将来のウェブ開発において重要になる可能性があります。
• ウェブアニメーションライブラリ: GreenSock (GSAP), Anime.js, Three.js (3D描画) など、高度なアニメーションやインタラクティブな表現を容易に実現するためのライブラリ。
• JavaScriptフレームワーク固有のスタイリングエコシステム: Reactの場合はStyled Components, Emotion, CSS Modulesなど、Vueの場合はScoped CSS, Vue Loaderの機能、Angularの場合はComponent Stylesなど、利用しているフレームワークが提供または推奨するスタイリング手法を深く理解する。

JavaScriptとCSSは、ウェブブラウザがウェブページを表示・操作するための二本の柱です。これらの技術を深く理解し、柔軟に組み合わせて使いこなす能力は、現代のフロントエンド開発者にとって非常に価値が高いものです。この記事が、あなたのJavaScriptによるCSS変更の技術習得と、よりクリエイティブなウェブ開発への挑戦を後押しできれば幸いです。

実際にコードを書き、様々なブラウザでテストし、パフォーマンスツールを使って測定しながら学ぶことが、理解を深める最も効果的な方法です。このガイドを参考に、ぜひあなたのウェブサイトやアプリケーションで動的なスタイリングを実装してみてください。

---