Java Scriptの第一歩 | WEB制作の備忘録めもミフネWEB

WEB制作を独学でやっていると、HTMLとCSSは理解できてもJava Scriptでつまづくケースは非常に多いと思います。

私もかつて同じようにJSで絶望し、一度学ぶことを諦めたタイプなのでとてもよく分かります。

この記事では、「HTMLとCSSなら分かるけどJSはちょっと、、、」と苦手意識を持っている方が受け入れやすいことを第一に、実際に簡単なコードを書いて説明してみます。

説明は簡略化するので説明不足になる点も出てきますが、気になったところは各自で調べてください。

INDEX

JSを使うとサイトに動的な変化を与えることができる
要素を指定する
クリックイベントを登録する
やること（処理）を書く
1. cssクラスの操作はclassList
補足

JSを使うとサイトに動的な変化を与えることができる

面倒な前置きは抜きにして、すでにHTMLとCSSを学んだあなたは、以下のコードを見れば文字が赤色で表示されることが理解できると思います。

<div>
  <p id="test">My color is black</p>
</div>

<style>
 #test{
  color: red;
 }
</style

上のCSSはtestというID属性をもつ要素に対して、colorというプロパティに赤を指定しています。

では同じように、testというID属性をもつ要素をJava Scriptで指定して動きを与えてみたいと思います。

要素を指定する

いくつか手段はありますが、document.querySelector()を使います。詳しく知りたい人は各自ぐぐっていただくとして、これで要素を指定します。

document.querySelector(‘#test’)が、CSSでいう #test の部分です。しかし、呼び出すたびにこんな長々と書きたくないので、分かりやすい名前をつけてみます。

const test = document.querySelector('#test');

constを雑に説明すると何かを定義しておきたいときの宣言です。

「test はdocument.querySelector(‘#test’) のことだ!」と宣言します。（変数というやつです。）これで、今後はtestと書くだけでtest属性をもつ要素を指定できます。

ではtestに対して動きを与える部分を書いていきます。

クリックイベントを登録する

Webブラウザ上で起こるクリックやマウスホバー、inputに何かが入力されたとき、スマホでタッチされたときなどなど。

これらを「イベント」と呼び、「そのイベントが発生したときに何をするか」を登録しておくことができます。（利用できるイベントについては文末）

 addEventListener('イベントの種類', ()=>{ 何かすること }, オプション);

今回はtestにクリックイベントを登録したいので、

test.addEventListener('click' , ()=>{クリックされたときにやること }, オプション);

となります。

オプションについては説明しませんが、オプションを指定しないときはfalse と書きます。

やること（処理）を書く

最後に処理の部分です。例として、#testをクリックで親要素のdivタグのcssクラスを付け外しするプログラムとしてみます。

先にHTMLとCSSを書いておきましょう。divにcloseクラスが付与されるとtransformで小さくなっていく仕掛けです。

<div>
  <p id="test">My color is black</p>
</div>

<style>
 #test{
   color: red;
 }
 div.close{
   transform-origin:bottom left;
   transform:rotateY(85deg) scale(.5);
   transition: 1s; 
 }
</style>

cssクラスの操作はclassList

クラスの操作は「classList」で行います。

classList.add(‘クラス名’)　クラス名を付与
classList.remove(‘クラス名’)　クラス名を除去
classList.toggle(‘クラス名’)　クラス名があれば除去、なければ付与

toggleはInternetExplorerとoperaが非対応ですが、そんなことは無視してtoggleでいきます。

const test = document.querySelector('#test');
const div = document.querySelector('div');

test.addEventListener('click' , ()=>{
  div.classList.toggle('close')
}, false);

できあがり。処理の部分を改行していますが、先ほどまでの｛クリックされたときにやること｝の部分です。実際のサンプルが以下。

See the Pen Untitled by Takashi Abe (@TakeshiAbe) on CodePen.

1つ１つ見ていけば、要素を指定し、その要素に処理を与える、という流れはCSSと通じるものがあるのではないかと思いますがいかがでしょうか？

今回のサンプルだけで、