jQuery不要！バニラJavaScriptで要素に複数のスタイルをまとめて適用する方法

バニラJavaScript（素のJavaScript）で要素に複数のスタイルを適用するのは、少し面倒に感じることがあります。最もよく見かける方法は、対象の要素を取得してから、スタイルを1つずつ追加していくやり方です。

// 対象要素を取得（ここではclass属性を使用）
const buttonAddToCart = document.querySelector(".button-add-to-cart")

// スタイルプロパティを1つずつ追加
buttonAddToCart.style.backgroundColor = "#82b97e"
buttonAddToCart.style.color = "#fff"
buttonAddToCart.style.padding = "24px"
buttonAddToCart.style.textTransform = "uppercase"
buttonAddToCart.style.letterSpacing = "0.1em"

この方法でも動作はしますが、コードが冗長で、同じような記述の繰り返しが多く、再利用もできません。無名関数ではなく名前付き関数を使うべきだ、という話に少し似ていますね。

そこで代わりに活用したいのが、スタイルオブジェクトです。

// スタイルオブジェクトを作成
const buttonPrimary = {
  backgroundColor: "#82b97e",
  color: "#fff",
  padding: "24px",
  textTransform: "uppercase",
  letterSpacing: "0.1em",
}

// buttonPrimary（スタイルオブジェクト）をボタン要素に割り当てる
Object.assign(buttonAddToCart.style, buttonPrimary)

このアプローチはコードがすっきりするだけでなく、buttonPrimaryというスタイルオブジェクトを、プライマリボタンのスタイルが必要な任意のボタン要素に使い回せるため、繰り返しのコードを書く必要がなくなります。

複数の要素にスタイルオブジェクトを適用するコード例

// プライマリボタンのクラスを持つすべての要素を取得
const primaryButtons = document.querySelectorAll(".button-primary")

// 各ボタンにスタイルオブジェクトを適用
primaryButtons.forEach((button) => {
  Object.assign(button.style, buttonPrimary)
})

querySelectorAll()とforEach()を組み合わせれば、同じスタイルオブジェクトをページ内の複数の要素に一度に適用できます。スタイルの定義が1箇所にまとまるため、後からデザインを変更する際のメンテナンスも格段に楽になります。

待ってください、HTML要素のスタイリングにCSSではなくJavaScriptを使う理由は？

ご安心ください。CSS in JS（JSS）はCSS・JS界隈で議論の絶えないテーマですが、私はどちらの陣営にも加担しません。どちらのアプローチにも良さがあると思います。大切なのは、判断の際に状況（コンテキスト）を判断材料にすることです。

ただし、JavaScriptでのスタイリングが特に役立つケースについて触れておきます。たとえば、要素のスタイルを定義しているCSSファイルに直接アクセスできない状況を想像してみてください。こうした場面では、JavaScriptでスタイルを適用したり、既存のスタイルを上書きしたりできることが、クライアントの問題をその日のうちに解決できるかどうかの分かれ目になることがあります。

このようなシナリオこそ、JavaScriptの柔軟性が真価を発揮する瞬間です。