【ワレコWEBプログラミング】JavaScript, jQuery, CSSクラス操作まとめ

ワテの場合、JavaScriptやjQueryを使ってWEBプログラミングを始めてから約二年になる。

そんな中で、当初はクラスと言うものが良く理解出来なかった。

ここで言っているクラスとは、HTMLの記述で使う以下の例のようなクラスである。

<button class="my_class">ボタン</button>

HTMLの記述で使うクラスの例

一方、オブジェクト指向プログラミングで登場する所謂（いわゆる）クラスがあるが、それとは全く別の概念だ。

後者のクラスの例としては、TypeScriptのクラスはこんな感じか。

class Rectangle {
     height: number;
     width: number;
     constructor(height, width) {
         this.height = height;
         this.width = width;
     }

    get area() {
         return this.calcArea();
     }

    calcArea() {
         return this.height * this.width;
     }
 }
 let rect = new Rectangle(10, 20);
 var area = rect.area;
 alert(area);  // 200と表示される

TypeScriptのクラスの例

さて、この記事では、HTMLの記述で使うクラスに関して、自分の備忘録として良く使うコマンド、手法を纏めてみた。

では、本題に入ろう。

HTMLで使うclassやidの例
HTML要素にクラスを割り当てるべき場面は？
1. クラスを使う典型的な場面
2. jQueryでクラス使って要素の属性を操作する例
まとめ

HTMLで使うclassやidの例

HTMLを記述する場合に、classやidと言うのを使ったり使わなかったりする。

classもidも使わずに単にボタンを表示するだけなら、こんな感じか。

<button>ボタン</button>

でもまあ、これだとボタンをクリックしても何も起こらないので、通常はこんな風に書く場合が多い。

<button onclick="MyFunc()">ボタン</button>

これでボタンをクリックした場合にはMyFunc()を実行する事が可能だ。

idの登場

さて、idを使ってみる。

<button id="buttonID" onclick="MyFunc()">ボタン</button>

この場合、idは何のために使うのか？

WEBプログラミングを始めた頃のワテはその辺りの理由がさっぱり分からなかった。

でも今はある程度はマスターしている。

idの特徴、用途としては、以下のものが思い付く。

idはそのHTMLファイル中で唯一無二の値を指定する。
一つのページに同じ名前のidが複数あるのは文法違反。
idを与えるとその要素（今はbutton）をidで指定して各種操作が可能。
例えば CSSファイルでそのid指定で要素の属性を設定可能
あるいはjQueryのセレクターでid指定するとその要素のjQueryオブジェクトを簡単に得られる。
同じくJavaScriptでもid指定でその要素を簡単に得られる。

などかな。

最後の三つの具体例を説明してみよう。

CSSファイルでid指定で要素の属性を設定

<button id="buttonID" onclick="MyFunc()">ボタン</button>

こう言うボタン要素に対して、CSSで属性を設定するにはHTMLに直接記述しても良い。

その場合は以下のようにstyleで囲む。

<style>
   #buttonID{
     font-size:20px;
     border:1px solid green;
     background-color: pink;
   }
</style>

idの前に#（シャープ記号）が付いているが、何で#を付けるのか？などと考えるよりも、#idを書く決まりになっていると言うのが正しい（と思う）。

あるいは、拡張子 .css のファイルに記述する場合には、styleは無しで以下のように書く。

#buttonID{
   font-size:20px;
   border:1px solid green;
   background-color: pink;
}

CSSファイルでidを使う例

このCSS設定をボタンに適用すると以下のようにフォントや色を変えるなどが可能だ。

上のCSSファイルでは、シャープ記号#に続けてボタンに割り当てたidを記述している。

つまり #buttonID のように使う。

これは上記のCSSファイルの場合だけでなく、この後説明するjQueryのセレクターの記述でも同じである。

その例を示そう。

jQueryのセレクターでid指定する例

<button id="buttonID" class="buttonClass1 buttonClass2">ボタン</button>

jQueryでは、例えば以下のようにidを使う。

var button = $('#buttonID');

このようにすると、そのボタン要素に割り当ててあるクラス文字列を取得するには以下のようにすれば良い。

var classes = $('#buttonID').attr('class');　// ='buttonClass1 buttonClass2'

これでボタンに割り当てられているクラス文字列を全部取得する事が可能だ。

もし個々のクラス名を分離して取り出したいなら、例えばこんな感じか。

var classes = $('#buttonID').attr('class').split(' ');
for(var i = 0; i < classes.length; i++) {
   alert(classes[i].trim());  // 'buttonClass1' , 'buttonClass2'
}

こんな感じで、複数のクラス文字列が割り当てて有る場合でも、それらを単語ごとに取り出せる。

JavaScriptでid指定する例

JavaScriptでidを使う場合は #は付けない。

var button = document.getElementById('buttonID');
var className = button.className;　='buttonClass1 buttonClass2'
alert(className);

このようにすると、先ほどのjQueryでクラス文字列を取得したのと同じ結果が得られる。

クラスの追加や削除

例えば以下のボタンに対して、’buttonClass2′ を削除したい。

<button id="buttonID" class="buttonClass1 buttonClass2">ボタン</button>

そのやり方は以下の通り。

jQueryでクラスの追加と削除

 var button = $('#buttonID');
 var classAll = button.attr('class');
 alert(classAll);　　　　　　　　　　　　// 'buttonClass1' , 'buttonClass2'
 button.removeClass('buttonClass2');
 var classAll = button.attr('class');
 alert(classAll);                      // 'buttonClass1'

このようにjQueryでやると簡単にクラスを削除出来る。クラスを追加したい場合にはaddClass()を使えば良い。

JavaScriptでクラスの追加と削除

一方、JavaScriptでクラスを追加、削除するには以下のようにすれば良い。

document.getElementById('buttonID').classList.add('buttonClass3');
document.getElementById('buttonID').classList.remove('buttonClass1');
if (document.getElementById('buttonID').classList.contains('buttonClass2')) {
   document.getElementById('buttonID').classList.toggle('buttonClass2');
}
 
var button = document.getElementById('buttonID');
var className = button.className;
alert(className);

上の処理を実行すると、開始時点で

class="buttonClass1 buttonClass2"

だが、そこに buttonClass3 を追加し、’buttonClass1′ を削除。

その結果、

class="buttonClass2 buttonClass3'

となる。

次に、 .classList.contains(‘buttonClass2’) の部分がtrueになるので、

.classList.toggle('buttonClass2')

の部分が実行されて buttonClass2 が削除される。

最終的に得られるのは、

class="buttonClass3'

だ。

さて、クラスの操作方法は分ったのだが、そもそもクラスはどう言う時に使うべきなのか、WEBプログラミングを始めた頃のワテはさっぱり分からなかった。

HTML要素にクラスを割り当てるべき場面は？

例えば、以下のように二つのグループのボタン群があるとする。

<div id="div_group1_ID">
	<button id="my_button1_ID">ボタン1</button>
	<button id="my_button2_ID">ボタン2</button>
	<button id="my_button3_ID">ボタン3</button>
</div>
<div id="div_group2_ID">
	<button id="my_button4_ID">ボタン4</button>
	<button id="my_button5_ID">ボタン5</button>
	<button id="my_button6_ID">ボタン6</button>
</div>

これを表示すると以下のようになる。

さて、ここで、それぞれのグループでボタンの色を変えてみよう。

クラスを使う典型的な場面

一つ目のボタングループには　class=”btn_class1″

二番目のボタングループには　class=”btn_class2″

を割り当てた。

それらのクラスを使ってstyle設定を行う。

<div id="div_group1_ID">
	<button class="btn_class1">ボタン1</button>
	<button class="btn_class1">ボタン2</button>
	<button class="btn_class1">ボタン3</button>
</div>
<div id="div_group2_ID">
	<button class="btn_class2">ボタン4</button>
	<button class="btn_class2">ボタン5</button>
	<button class="btn_class2">ボタン6</button>
</div>

<style>
	div#div_group1_ID > button.btn_class1 {
		background-color: greenyellow;
		border:1px solid black;
		border-radius: 3px;
	}
	div#div_group2_ID > button.btn_class2 {
		background-color: gold;
		border: 1px solid black;
		border-radius: 3px;
	}
</style>

その結果、以下のように二つのボタン群の色を一括で設定する事が出来る。

この例のようにクラスは同じグループの要素をまとめて処理や設定したい場合に使うのが良い。

今の場合なら、

ボタン1~ボタン3
ボタン4~ボタン6

に対して、一括で同じ属性を割り当てている。

jQueryでクラス使って要素の属性を操作する例

さて、先ほど以下のような二つのボタングループを作成した。

このボタングループに対して、jQueryのセレクターでクラスを使う例を作ってみた。

var btn_class1 = $('button.btn_class1');
var btn_class2 = $('button.btn_class2:nth-child(2)');
btn_class1.css('border-width', '3px');
btn_class2.css('background-color','hotpink');

取り敢えずこの下のボタンをクリックしてみると上のボタンの幾つかの属性が変化するデモを見る事が出来る。

上のボタンのidは ‘changeButtonAttrID’ なのだが、そのボタンに対してJavaScriptを使って以下の処理を割り当てている。

$(function () {
	var btn = document.getElementById('changeButtonAttrID');
	btn.onclick = function (e) {
		var btn_class1 = $('button.btn_class1');
		var btn_class2 = $('button.btn_class2:nth-child(2)');
		btn_class1.css('border-width', '3px');
		btn_class2.css('background-color', 'hotpink');
	}
 
	// $('#changeButtonAttrID').on('click', function (e) {
	// 	// jQUeryの場合
	// });
})

onclickイベントハンドラ関数内では、jQueryのセレクターを使って以下のようにbtn_class1やbtn_class2を持つbuttonを選択している。

var btn_class1 = $('button.btn_class1');
var btn_class2 = $('button.btn_class2:nth-child(2)');

後者の場合には btn_class2に該当する三つのbuttonのうちの二番目のものを取り出している。

jQueryのセレクターはこの例以外にも、多彩な記述方法があるので、一度に全部覚えるのは困難ではあるが、どんな記述方法が可能なのか一度は目を通しておくと良いだろう。

まとめ

この記事では、WEBプログラミングにおいてHTMLでbutton, div, input, その他各種のHTML要素を記述する場合に、idやclassの使い方を解説した。

idとclassの違いを理解出来たと思う。
idを使うべき場面はそのページに一個しかない特定の要素にはidを振ると良い
classを使うべき場面は同一種類の要素を一括で属性設定、操作したい場合に使うと良い
HTMLのclassはオブジェクト指向言語のclassとは無関係
HTMLのclassは「クラス」と言うよりも「グループ」と呼ぶ方がワテには馴染み易い
id, classは必要最低限だけ使う。無駄に沢山割り振ると後々で整理するのが手間なので
jQueryのセレクターの記述方法は多彩なので完璧にマスターすればプログラミング作業が捗る

などかな。

本を読む

日経BP

ワテの場合は、最近ではJavaScriptではなくTypeScriptを良く使う。

Visual Studioの環境でTypeScriptを使うと強力な文法チェック機能や強力なインテリセンス機能が使えるので、とても便利。

Visual Studio Codeでも多分同じかなと思うが、ワテは使った事が無い。