脱jQueryの第一歩!JavaScriptでDOM操作してみよう【10分】

jQuery

こんにちは、現在フリーのweb系エンジニアとして活動しているしょーご(@samuraibrass)です。

最近はJavaScriptの勉強をしており、カウントダウンタイマーを作ったりしてます。

https://samuraibrass.github.io/countTimer/countTimer/

このページに来てくれたみなさんは、現在バリバリjQueryを使って実装されているデザイナーさん、コーダーさんでしょうか。

私もweb系エンジニアと言いつつも、jQueryでメインにDOM操作を行なっています。

しかし、最近こんな声を聞くようになりました。

モダンエンジニアAさん
モダンエンジニアAさん
jQueryとかおじいちゃんなんだよなぁ
モダンエンジニアBさん
モダンエンジニアBさん
まだ、jQueryで消耗してるの?ブームすぎたよ?

jQueryをバリバリ使うコーダー、マークアップエンジニアには耳の痛い話ですが、どんな技術もいずれは陳腐化するので、次のムーブに備えて学び続けなくてはなりません。

そこで一旦JavaScriptに立ち返るわけです。

流行りのReactやVueをやるにも、JavaScriptの基本ができないと歯が立たないので。

今回は、とにかく簡単なことをJavaScriptで実装してみようと思います。

しょーご
しょーご
全然難しくないよ!エディタ立ち上げて一緒にやってみよう!

HTML、CSSと、プログラミングの定数の役割は何か思い浮かぶ程度で大丈夫です。

一回も生のJavaScriptを書いたことのない人向けに解説していきます。

完成形の確認


基本機能を解説すると、上はクリックすると、transitionかけつつborder-radiusが50%になる感じで、

下はダブルクリックすると、widthとheightが100pxから300pxになります。

かなりシンプルです。

それではコードをみていきましょう。

用意するのはHTMLとCSSとJSファイルです。

まずHTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box" id="target1"></div>
    <div class="box" id="target2"></div>

<script src="script.js"></script>
</body>
</html>

まずboxはcssで青い四角を表現するため、idのtargetはjavascriptで要素を取得するために用います。

めんどくさいので、ディレクトリ構成はhtmlファイルとcss、js共に同階層に配置して読み込ませています。

.box {
    width: 100px;
    height: 100px;
    background: #84adf9;
    cursor: pointer;
    transition: 0.5s;
    margin-top: 30px;
    margin-left: auto;
    margin-right: auto;

}
.circle {
    transform: rotate(360deg);
    background: pink;
    border-radius: 50%;
}
.scale {
    width: 300px;
    height: 300px;
}

boxにtransitionを当てて、四角から丸になる時、アニメーションになるようにしてます。

circleクラスはhtmlに記載されていませんが、クリック時に付与して、円にします。

transformで360度回して、border-radiusで円にします。

scaleは二個目の要素にjavascriptでつけます。

const target1 = document.getElementById('target1');
const target2 = document.getElementById('target2');
target1.addEventListener('click',function() {
    target1.classList.toggle('circle');
});
target2.addEventListener('dblclick',function(){
    target2.classList.toggle('scale');
});

最後にjsですが、1つ1つ解説していきます。

javascriptによる要素の取得

DOM操作とは基本的に、htmlのclassやid、タグを指定して取得し、javascriptで変化を与えることです。

今回はidのtargetを取得します。

document.getElementById('target1');

documentはhtmlの文章全体を表します。そのdocumentからgetElementById(‘target1’);で、target1というidのついた要素を取得します。

ただ、この書き方だと長くて面倒なので、定数に入れてやります。

const target1 = document.getElementById('target1');

クリックイベントの使用

もう一度コード全体をみてみましょう。

const target1 = document.getElementById('target1');
const target2 = document.getElementById('target2');
target1.addEventListener('click',function() {
    target1.classList.toggle('circle');
});
target2.addEventListener('dblclick',function(){
    target2.classList.toggle('scale');
});

3行目のaddEventListenerは、

何かイベントが起きた時に処理を実行するという働きをする

というもので、よくクリックイベントと一緒に使います。

なので、3行めの意味は

target1をクリックしたら、〜というイベントが起こる

ということを意味します。

〜の部分が4行目に当たります。

重要なのはclassList.toggleの部分ですね。

よくclassList.addやclassList.removeも使うのですが、少しまとめてみます。

  • classList.addは、classを与える
  • classList.removeはclassを外す
  • classList.toggleはclassがなければ付与し、あれば外す
target1.addEventListener('click',function() {
    target1.classList.toggle('circle');
});

今回はclassList.toggleでcircleクラスが付いていないときは、付与、付いているときは外しています。
それにより、クリックするたびに円になったり四角に戻ったりしているのです。

もし仮にclassList.addの場合だと、クリックして円になってもクラスを外すことができないので、もう一度クリックしても四角に戻ることはありません。

removeも併記してやる必要があり、面倒です。

toggleは1つでadd、remove両方の効果が欲しいときに使えます。

2つ目はダブルクリックでwidthを変更

target2.addEventListener('dblclick',function(){
    target2.classList.toggle('scale');
});

2つ目の要素ですが、今度はdblclickイベントを用い、ダブルクリックでscaleクラスをtarget2に付与したり外したりします。

scaleには

.scale {
    width: 300px;
    height: 300px;
}

このようなcssを当てているので、大きさが変わります。

基礎の基礎だけど…

やっていることはかなり単純だったかと思います。

簡単な処理から少しづつJavaScriptで書いていき、徐々に慣らしていくのが良いのかなと思います。

jQueryはオワコンなの?

一通り解説が終わったので話をそらしますが、個人的にはjQueryはまだまだ数年は使われると思っています。

学習コストが低いのと、代替となるフレームワーク、ライブラリがほとんどの企業(特に地方)には浸透していないからです。

JavaScriptでかくより時間短縮になるのも間違い無いです。

とは言えjQueryオワコン説は半ば煽りのような論調ですが、数年以内に廃れていく可能性は割とあるので、

時代に取り残されないように、JavaScriptにも少しづつ慣れていこうという趣旨でした。