更新日: 2022年1月5日
公開日: 2019年5月13日

Ne:Code道場～JavaScript DOM③（DOMとCSS・その②）の巻～

プログラミング学習で、漫画など視覚的なものと併用すると楽しく継続的に学んでゆける人も多いと思います。そこでこの連載では、猫の漫画を交えつつ、JavaScriptのDOMとCSS（その中でも特にDOM経由でCSSを操作する部分）の学習ポイントについて紹介します。

はじめに
JavaScriptからスタイルを変更するにはどうするニャ？
CSSのプロパティと書き方が少し違うニャ？
関数を用いていることでRGBの値を取得しているのが一目瞭然ニャ！
classを用いて変更する書き方ってどういうことニャ？
classの設定をJavaScriptから行うにはどうするニャ？
最後に

はじめに

この記事ではJavaScriptのDOMについて、概要について取り上げつつ、躓きポイントを補足しています。各節ごとに、Ne:Code道場（猫de道場）の弟子猫がポイントをまとめ、最後に師匠猫がそれらを総括して3ポイントでまとめています。それらのポイントを中心に、HTMLに引き続き、CSSとDOMについて理解を深めてゆきましょう。
今回の記事では、DOM経由でCSSを操作する部分に関してまとめています。

JavaScriptからスタイルを変更するにはどうするニャ？

前回の記事で、CSSのセレクタを用いて、DOMを取得する処理について補足しました。今回の記事では、DOM経由でCSSをJavaScriptから変更してゆく処理について取り上げてゆきます。
まずは、実行時にDOMのスタイルを動的に変える下記のサンプルコードを見てゆきましょう。
サンプルコードで実施していることを簡単に補足しますと、背景色を設定する際に、RGB(Red・Green・Blue)の値をランダムで取得し設定しています。各色の値は「0～255」が設定できる値になっているので、その中からランダムに取得するようにしているのですね。各色の「0～255」は、Red・Green・Blueのいずれでも同じ様に取得するので、関数としてまとめています。関数はこういうシーンでも活用してゆくことができるのですね。

// ここは前回と同じだニャ
// idがappになっている要素を見つけ出してDOMオブジェクトとして変数に入れているニャ
let dom = document.querySelector("#app");
　
// 赤・緑・青がそれぞれどういう値になるのかを、関数から取得しているニャ
// getRgbが実行され、その結果の値にドロンと姿を変えたものが各変数に代入されているニャ
let red = getRgb();
let green = getRgb();
let blue = getRgb(); 
　
// DOMオブジェクトはHTMLの属性をプロパティとしてもっているニャ
// dom.styleで、style属性に対して操作をしているニャ
// backgroundColor、背景色を指定するプロパティだニャ
// 前回の記事でも、色の指定の仕方は複数あるという話があったニャ。ここでは、CSSのrgb()関数表記で用いているニャ
dom.style.backgroundColor = `rgb(${red} ,${green} ,${blue})`;
　
// 引数：無しニャ
// 戻り値：0～255の範囲内のランダムな数値ニャ。色の指定に用いるニャ
function getRgb() {
    return Math.floor(Math.random() * 256);
}

実行すると、ランダムに設定された背景色になっていることを確認できるでしょう。

CSSのプロパティと書き方が少し違うニャ？

前回の記事でCSS側の記載で、背景色を指定する記載がありましたね。

body {
  background-color: yellow;
}

猫弟子は、上記のプロパティの記載だと、「-（ハイフン）」でつなげている書き方になっているけれど、今回のJavaScriptの書き方だと、「-（ハイフン）」がなくなっている点に気づいた様です。
前回も補足しましたが、JavaScriptとCSSはあくまで異なる文法で成り立っています。JavaScriptにおいて「-（ハイフン）」は、引き算に用いられる特別な記号になるのですね。なのでプロパティ名に用いることは出来ません。
用いることが出来ない「-（ハイフン）」は取り除き、そのかわり、「-（ハイフン）」のすぐあとの文字を大文字にするというルールで変換されているのですね。
　
実行後にChromeの開発者ツールを用いてHTMLの中身を見てみますと、以下のようになっています。（HTMLの内、関連するところのみ抜粋しています）

<div id="app" style="background-color: rbg(77, 77, 77);"></div>

HTMLに適用されている時には、ちゃんとCSSの文法（「-（ハイフン）」区切り）になっていることを確認できますね。
また、DOMのstyleプロパティが持っている、cssTextというプロパティを用いれば、直接CSSの記法で設定することも可能です。該当箇所のみ例として見てみましょう。

// cssTextを使うと、文字としてCSSを直接書くことができるニャ
// この書き方ならば、ただの文字になるので、CSSの書き方と全く同じでOKニャ
//「ただの文字」なので、書き間違えてしまう危険性を注意してゆきたいニャ
dom.style.cssText = `background-color: rgb(${red} ,${green} ,${blue});`;

関数を用いていることでRGBの値を取得しているのが一目瞭然ニャ！

ここで復習も兼ねて関数に関して少し補足します。タイトルの猫弟子の言葉のように、処理に名前付けをすることができるというのも関数の利点ですね。
下記のサンプルコードでは、更にbodyの背景もランダムに設定するという変更を加えています。その際に、「背景色を設定する」という処理を共通化するために、追加で関数を設けています。
戻り値なしの関数等、学習初期においてはどのように活用するのかがイメージが湧きにくいかも知れませんが、このように処理をまとめておくという用途で用いると、処理に名前をつけつつ、共通化ができるため、読みやすさが向上しますね。

// 背景色を設定する用の関数が呼び出されているニャ！
// ここではidがappになっているDOMを渡しているニャ
setBackgroundColor(document.querySelector("#app"));
// ここではbodyを渡しているニャ！
setBackgroundColor(document.body);
// ここは変わっていないニャ
function getRgb() {
    return Math.floor(Math.random() * 256);
}
// 新たに追加された関数だニャ
// 引数：dom 背景色を設定したいDOMオブジェクトを渡すニャ
// 戻り値：なしニャ
function setBackgroundColor(dom) {
    // 関数を直接呼び出してrgb()の記載を作っているニャ
    dom.style.backgroundColor = `rgb(${getRgb()} ,${getRgb()} ,${getRgb()})`;
}

　
まずは、style属性を直接変更することで、CSSを動的に変える書き方をみてゆきましたが、次にclassを用いて変更する書き方をみてゆきましょう。

classを用いて変更する書き方ってどういうことニャ？

前回の記事でとりあげた「セレクタ」、その中に「classセレクタ」というものがあります。id属性の値に設定されたものを用いてスタイルを適用する「idセレクタ」のように、こちらは、class属性の値に設定されたものを用いてスタイルを適用してゆくことができます。この2つの違いは、idはユニークなものなので、同じidがHTML内に複数登場することはありませんが、classは複数登場することもあります。idが学籍番号ならば、classはクラブの様に1つのクラブの中には複数の生徒（要素）がいたり、生徒が複数のクラブを掛け持ちしたり等の利用方法が可能なのが特徴ですね。
上記の例の様に、style属性に対して直接CSSを書くことも出来ますが、存在しているスタイルをつけたり消したり、切り替えたりすることでスタイル設定をしてゆくことができるのですね。
まずは、cssのclassセレクタの記載を見てゆきましょう。

.happy {
  background-color: yellow;
}
.impact {
  color: red;
}
.sad {
  background-color: blue;
}

idの時には「#」でしたが、こちらは先頭に「.（ドット）」がついているのが特徴ですね。
HTML側で直接用いる場合の書き方も簡単に見ておきましょう。

<div class="happy">幸せだニャ！</div>
<div class="happy impact">幸せ、おかわりだニャ♪</div>
<div class="sad">しょんぼりだニャ・・・</div>

happyというclassが複数回用いられているますね。そのclassを用いている要素は黄色い背景で表示されるのを確認できるかと思います。
そのうち2行目は文字の色が赤に変わっていますね。classはこのように複数重ねがけすることも可能です。
では、classを設定することでスタイルをJavaScript側から変更するサンプルコードを見てゆきましょう。

classの設定をJavaScriptから行うにはどうするニャ？

上記で取り上げた3つのclassが定義されていることを前提に、そのうちのどれかをclass属性に指定しているサンプルコードがこちらです。

let dom = document.querySelector("#app");
　
// せっかくだから決め打ちのclassではなく、ランダムでclassを取得しているニャ
let className = getClass();
// DOMオブジェクトのclassNameを用いることで、class属性に値を設定できるニャ
// 複数設定する場合には、classListのほうが制御しやすいニャ。それは別のタイミングでみてゆくニャ
dom.className = className;
// せっかくなのでどのclassが選択されたのかわかるように文言を変えているニャ
dom.textContent += `選択されたclassは${className}だったニャ`;
　
// 引数：無しニャ
// 戻り値：取り上げたclassの内、ランダムでクラスを取得しているニャ
function getClass() {
    let list = ["happy", "sad", "impact"];
    let index = Math.floor(Math.random() * list.length);
    return list[index];
}

以上で見てきたように、スタイルの設定もstyle属性を用いて直に指定する方法も、class属性を用いて定義済のものを適用してゆく方法も、JavaScriptで柔軟に行ってゆくことができるのですね。

最後に

HTMLとCSSについて、猫弟子がいくつか上げたポイントを、猫師匠が厳選3ポイントでまとめたのがこちらです。

JavaScriptからダイレクトにstyle属性を操作すると、直接CSSを追加してゆくことも可能ニャ
1. 実行すると要素のstyle属性にCSSの記法でスタイルが追加されているのを確認できるニャ
2. DOMのプロパティとして用いるCSSのプロパティ名はJavaScriptのルールにそって変更されているニャ
3. cssTextの場合は直接CSSを書けるけれど、その際のプロパティ名間違いに気をつけてゆきたいところニャ
classを用いることで、柔軟にスタイルを設定してゆくことができるニャ
1. classセレクタは、idセレクタの様に自分で好きな名前がつけられて、その同じスタイルを複数要素に適用できる、CSSの要にもなるセレクタだニャ
2. 要素のstyle属性を直接設定する方法は、枠組みと装飾が密結合になってしまう点を注意してゆきたいニャ。圧倒的にclassでのスタイル設定に軍配が上がるニャ
classを付け替えるのもJavaScriptのお手のものだニャ
1. classとしてスタイルを定義しておき、その付替えでスタイルを変えられるならば、枠組みと装飾はバッチリ役割分担できているニャ
2. 可能な限り役割分担のほうでスタイルを変更しつつ、サンプルコードのように動的に生成したスタイルを適用したい場合に、style属性の方を活用してゆくというのも、良いと思うニャ

DOMに関連して、3つ目の記事として、JavaScriptからCSSを変更するベーシックな方法について学びました。JavaScriptの本領発揮としてのDOM関連の処理を学ぶことで、JavaScriptとしてできることがぐっと高まってゆくと思います。
するとコードへの理解も深まり、プログラミングが更に楽しくなってくるでしょう。
DOMに関連する知識をしっかり身につけつつ、今後の学習に繋げてゆきましょう。