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

はじめに

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

CSSについて教えてニャ？

前回の記事で、「枠組みのHTMLと装飾のCSS」という流れで補足したCSS、DOMの学習にあたって、CSSについてもとりあげてゆきましょう。特にCSSで登場してくる「セレクタ」はDOM操作において活用することができ、より柔軟なDOMの操作が可能になります。
ここで注意するポイントとしましては、HTMLもCSSも、もちろんJavaScriptも、それぞれが異なる文法で記載されるという点です。CSSにはCSSの文法があります。まずはそこから見てゆきましょう。

セレクタ {
  プロパティ: プロパティの値;
}

とってもシンプルですね。枠組みはシンプルですが、「セレクタ」・「プロパティ」・「プロパティの値」そのそれぞれに沢山の種類があります。例えば、bodyの背景色を黄色にしたい場合は、以下のように書きます。

body {
  background-color: yellow;
}

では、一つづつ、猫師匠のコメントと併せてみてゆきましょう。まずは、セレクタからです。

/* 「セレクタ」のところにbodyと書いてあるニャ */
/* 「セレクタ」ではスタイルを適用したい場所を指定できるニャ */
body {
  background-color: yellow;
}

bodyは前回の記事のHTMLでも触れた、HTMLの要素の一つですね。セレクタの書き方の1つで、「要素セレクタ」と呼ばれる書き方になります。要素名をそのまま書くことで、対象の要素すべてに対してスタイルを適用します。
次にプロパティをみてゆきましょう。

body {
  /* 「プロパティ」のところに背景色に当たる「background-color」と書いてあるニャ */
  /* どういうスタイルを指定したいかによって、適切なプロパティを選択してゆくことがキモニャ */
  background-color: yellow;
}

JavaScriptでは変数名に用いることがNGになっている「-」、CSSは別の文法なのでそういう名前のプロパティはザクザクあります。最後にプロパティ値ですね。

body {
  /* 「プロパティ値」のところには「yellow」。これはわかりやすいと思うニャ。背景色の色を指定しているニャ */
  /* JavaScriptを学んでいると、文字としてyellowを指定するから""とかで括りたくなるかもしれないけれど、あくまで文法は別々なのがポイントニャ */
  /* ここで「yellow」と書けるのは、色を指定するプロパティだからだニャ。色の指定の仕方一つとっても、他の書き方が複数あったりするところが、CSSのシンプルだけれど奥が深いポイントニャ */
  background-color: yellow;
}

HTMLで取り上げた属性の様に、そのプロパティだからこそ設定できるプロパティ値というものがあります。なので、「別のプロパティで書けていたから・・」という理由だけを根拠にプロパティ値を設定しても正しく適用されません。これも、都度都度で手間になってもリファレンスなどを参照し、着実に正しい知識をストックしてゆくことが重要になってきますね。

セレクタをJavaScriptで活用するってどういうことニャ？

前回の記事では、「documet.getElementById("id属性の値")」でDOMを取得するJavaScriptの便利機能についてとりあげましたね。この際に利用したのは、その名前の通り、「idから要素を取得する」のに特化した機能になります。
なので、引数にはid属性の値しか指定出来ないのが特徴です。でも、id以外でも柔軟にHTMLの要素を取得してゆきたいですよね。そんな時に、CSSの文法にあった「セレクタ」が輝きます。セレクタは、「スタイルを適用したい場所」、つまり、HTMLのドコドコにスタイルを適用するために用いるエリアでしたね。なので、そのセレクタの書き方をそのまま活用することで、同じ場所をDOMとしてJavaScriptから操作してゆくことが可能です。
ここでは、その流れで、「document.querySelector("CSSのセレクタ")」を見てゆきましょう。
　
「document.querySelector」、「セレクタで問い合わせる」という名前のこの便利機能で指定できる引数は、文字として記載するCSSのセレクタになります。そこに記載されたセレクタで問い合わせを行い、該当する要素を一つ抽出します。
「要素を一つ」とあえて言いましたが、この「document.querySelector」では、複数の抽出結果があったとしても、先頭の1つだけが抽出されるのが特徴です。複数のものを抽出してきたい場合は、別の便利機能を活用してゆくというように、用途によって利用を切り分けていかなければならないというのもポイントですね。

前回のコードをquerySelectorで書き換えるとどうなるニャ

前回の記事では、「documet.getElementById」を用いていましたね。ユニークな値が設定されるid属性の値で要素を見つけ出すこの書き方を「documet.querySelector」で書き換えるとどうなるかを見てゆきましょう。
JavaScriptを見る前に、まずは、CSSのセレクタでid属性の値でスタイル設定する場合の書き方を補足します。とてもシンプルです。

/* 先頭に「#」をつけることで、その後の文字をid属性の値だとCSSに伝えられるニャ */
/* 「idセレクタ」と呼ばれる書き方になるニャ */
#app {
  background-color: yellow;
}

前準備をサクッと終えたところで、前回のコードを書き換えてみましょう。
コメントにも書いてありますが、ほとんど修正することなく同じ様に動いているのを確認できるかと思います。

// 比較用に前回のコードはコメントで残しているニャ
// let dom = document.getElementById("app");
　
// 違いはほとんど無いニャ。呼び出しているメソッドが変わり、引数の書き方が変わっているぐらいだニャ
let dom = document.querySelector("#app");
　
// ここからさきは全く修正していないニャ。でも前回のコードと同じ動きになるニャ
// 呼び出すメソッドが「getElementById」が「querySelector」に変わっても、その結果取得できるものはDOMだから、同じ操作が可能というのが特徴ニャ！
console.log(dom.textContent);
　
dom.textContent = "JavaScriptで書き変えたニャ！";

「documet.getElementById」は引数として指定できるものがidのみですが、「documet.querySelector」では、それ以外にも柔軟に指定できることが特徴です。その柔軟に指定する範囲には、id指定のものも含まれているため、CSSを知っていればサッと「documet.querySelector」で書き換えることも可能ですね。

最後に

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

1. 装飾担当のCSSは「どこに」スタイルを適用するかを「セレクタ」で指定しているニャ
   1. 「セレクタ」には沢山の種類が存在しているニャ
   2. 「セレクタ」の知識を地道に着実に増やしてゆくと、JavaScriptでも活用でき、一粒で二倍美味しいニャ
2. CSSで登場した上記の「セレクタ」に併せて、「プロパティ」「プロパティの値」もしっかり抑えておきたいポイントニャ
   1. JavaScriptで用いているセレクタも、ただの文字として用いているため、あくまで文法は別物とし、それぞれ覚えてゆく必要があるニャ
   2. この次の記事では、JavaScript側からスタイルを変更する観点でDOMとCSSについても学ぶ予定ニャ
3. DOMを取得するという用途でも複数の書き方が可能ニャ。状況によって使い分けてゆきたいところだニャ
   1. CSSのセレクタについて引き出しが多い場合は、querySelectorや、この記事では取り上げなかった複数のものを抽出するquerySelectorAllなどは柔軟にDOMを抽出でき重宝するニャ
   2. CSSのセレクタも、DOMの操作も、引き出しを多くもっていると、状況に適したものを活用できて幅が広がると思うニャ

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