こんにちは、現在フリーのweb系エンジニアとして活動しているしょーご（@samuraibrass）です。
最近はJavaScriptの勉強をしており、カウントダウンタイマーを作ったりしてます。
https://samuraibrass.github.io/countTimer/countTimer/
このページに来てくれたみなさんは、現在バリバリjQueryを使って実装されているデザイナーさん、コーダーさんでしょうか。
私もweb系エンジニアと言いつつも、jQueryでメインにDOM操作を行なっています。
しかし、最近こんな声を聞くようになりました。
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ですが、１つ１つ解説していきます。
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');
});３行目の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は１つでadd、remove両方の効果が欲しいときに使えます。
２つ目はダブルクリックでwidthを変更
target2.addEventListener('dblclick',function(){
target2.classList.toggle('scale');
});２つ目の要素ですが、今度はdblclickイベントを用い、ダブルクリックでscaleクラスをtarget2に付与したり外したりします。
scaleには
.scale {
width: 300px;
height: 300px;
}このようなcssを当てているので、大きさが変わります。
基礎の基礎だけど…
やっていることはかなり単純だったかと思います。
簡単な処理から少しづつJavaScriptで書いていき、徐々に慣らしていくのが良いのかなと思います。
jQueryはオワコンなの？
一通り解説が終わったので話をそらしますが、個人的にはjQueryはまだまだ数年は使われると思っています。
学習コストが低いのと、代替となるフレームワーク、ライブラリがほとんどの企業（特に地方）には浸透していないからです。
JavaScriptでかくより時間短縮になるのも間違い無いです。
とは言えjQueryオワコン説は半ば煽りのような論調ですが、数年以内に廃れていく可能性は割とあるので、
時代に取り残されないように、JavaScriptにも少しづつ慣れていこうという趣旨でした。
ご寄付を頂けると今後の更新の励みになります！
