Java Scriptの第一歩

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

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

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

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

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つ1つ見ていけば、要素を指定し、その要素に処理を与える、という流れはCSSと通じるものがあるのではないかと思いますがいかがでしょうか?

今回のサンプルだけで、

  • 要素を取得するのに使用したquerySelector。
  • イベント登録に使ったaddEventListener。
  • クラス操作に使用したclassList

と3つ覚えられたことになります。

もちろん覚えることは山ほどありますし、今回でもかなり説明端折っていますが、触っていく内にjsがなんとなく分かってくるようになります。分かってくると楽しくなってきます。失敗しながら楽しめることが一番です。

この記事でわずかでも苦手意識が薄まったなら幸いです。

補足

イベントの種類について:「イベントリファレンス(MDN)

Author

ミフネWEBのロゴ

ネットショップ専門のWEBサイト制作事務所です(個人事務所)。

部分的なテンプレートカスタマイズから、高速化や機能追加、新規ショップ制作などECに関するいろいろを承ります。(5,500円〜)

仕事のご相談は「お問い合わせ・ご相談」より随時承っております。