JavaScriptの第一歩

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

私もかつて同じようにJavaScriptを学ぼうとして盛大に挫折し、一度JSに関わることを諦めたタイプなのでとてもよく分かります。

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

この記事に関しては感覚重視で細かい説明は省くので全体的に説明不足になります。ご了承ください。気になったところは各自で調べてください。

TOC

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属性をもつ要素をJavaScriptで指定して動きを与えてみたいと思います。

要素を指定する

ほかにも手段はありますが、document.getElementById()を使います。読めば意味がわかる素敵な名前ですね。これでID要素を指定します。

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

const TEST = document.getElementById('test');

constで定義を宣言です。「TEST はdocument.getELementById(‘test’) のことだ!」といいう意味です。

これで、今後はTESTと書くだけで#test 要素を指定できます。

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

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

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

これらを「イベント」と呼び、「そのイベントが発生したときに●●する」を登録しておくことができます。

 .addEventListener('イベントの種類', ()=> { イベントが発生したときに行うこと }, オプション（省略可）);

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

TEST.addEventListener('click' , ()=>{
  qlert("テストがクリックされた！")
});

のように書きます。

やること（処理）を書く

最後にJavaScriptで処理内容を記述する例として、「#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

JavaScriptでクラス属性を操作するには「classList」を使います。

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

const TEST = document.getElementById('test');
const div = document.querySelector('div');

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

できあがり。

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

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

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

今回のサンプルだけで、