【JavaScript】styleプロパティの多用が推奨されない理由

Posted at 2025-11-01

はじめに

JavaScriptのstyleプロパティを使うこと自体は問題ありませんが、多用することは推奨されません。理由と背景を整理して説明します。

JavaScriptで要素のスタイルを直接操作する方法です。

document.getElementById("box").style.backgroundColor = "red";
document.getElementById("box").style.width = "200px";

このコードは、DOM要素のインラインスタイル（style="..."）を直接変更します。

スタイルをJavaScript内に直接書くと、HTML・CSS・JSが密結合になります。デザイン変更時にコードの修正箇所が分散しやすくなるため、メンテナンスが困難です。

// 推奨されない例
button.style.backgroundColor = "#2196f3";
button.style.borderRadius = "5px";

後で「ボタンの色をテーマに合わせて変更したい」となった場合、CSSではなくJSを探して修正しなければなりません。

JSではstyleを直接操作するより、クラスの追加・削除で制御するのが一般的です。

// 推奨される方法
button.classList.add("active");
button.classList.remove("hidden");

そしてCSSで見た目を定義します。

.active {
  background-color: #2196f3;
  border-radius: 5px;
}
.hidden {
  display: none;
}

これにより、見た目はCSS、動作はJSという役割分離が保てます。以下の図は、両者のアプローチの違いを示しています。

element.styleはインラインスタイルなので、CSSのセレクタ指定よりも優先度が高くなります。そのため、意図せずデザインが崩れることがあります。

ただし、以下のような場合はstyleプロパティの使用が適しています。

動的に数値を変化させるアニメーション

element.style.transform = `translateX(${x}px)`;

requestAnimationFrameやGSAPなどで動きをつける場合に有効です。

一時的なスタイル調整

ユーザー入力やレスポンスに応じて特定のプロパティだけを変更したいときに使用します。

方法	推奨度	理由
`element.style`	△	簡単だが保守性が低い
`element.classList.add/remove`	○	スタイルとロジックを分離できる
CSS変数 + JSで値変更	○	テーマ変更やアニメに便利