JavaScript 自分用

JavaScript
この記事はセイト先生の「【JavaScript超入門講座】定番UIの"タブ"を実装しよう！【初心者でも◯】」という動画内容を自分用にまとめたものです。
URL:https://youtu.be/OSQ1LnU9SCw

グローバル変数（全てをスコープ対象する変数）を汚染しないように、即時関数で書く

(()=>{

//ここに処理を書くことによってこの関数の中でしか意味を成さなくなる。

})();

JavaScriptの変数名の頭に$をつけると、その変数はDOM要素だと明示的に表すことになる。

documentとは、WebページのDOM全体（HTMLページを構成する要素など）を取得するもの

JavaScriptとhtmlをつなげるとき、idタグで繋げる

querySelectorAllとは
DOM要素の中から条件に当てはまるDOMを取得する。属性の名前を入れるとその属性の名前を持っているDOM要素を取得することになる。
例）［HTML側］

デカヌチャン

[JS側]querySelectorAll('[data-nav]')
とすると
HTML側のDOM要素を取ってくれる。
今回ではp.Dekanuchan クラスであることを取得してくれる。

初期化(JavaScriptで一番最初に実行させたいコードの名前を"init"や"initiazize"にすることが多い)

tab.js

const init = () => {
  $content[0].style.display = 'block'
};

（style.display、blockはCSSの表記方法？）contentの要素0番目のstyle.displayをblockにすることによって、一つ目の要素（要素0番目）だけを見えるようにする。

クリックしたら起こるイベント

handleClick.js

{(()
const handleClick = (e) => {
  //ここにクリックされたときの処理を書く
　　e.preventDefault();
};

 $nav[0]addEventListener('click',?(e)=> handleClick(e));
})();

handleClickにあてている'e'とはクリックされた時にイベント自体のオブジェクトを取得する（クリックイベントはクリックされたところがブラウザの座標のxがいくつなのか、yがいくつなのかや、どの要素がクリックされたのかなどたくさん情報を持っている）

例えばe.preventDefaultはそのクリックイベントを一回無しにするものである。
例えばHTML側でリンク（a href）を入れている場合、その実行（クリックした時リンクに飛ばす動き）を止めることができる。

while.js

//全nav要素に対して関数を適用させる
let index = 0;
while(index < $nav.length) {
 $nav[index].addEventListener('click', (e) => handleClick(e));
index++;
}

$nav.lengthはnav要素の数を取得するプロパティ
これをすることによって$navの数だけクリックイベントを起こすことができる。

次にTab-0がクリックされたら、コンテンツ0を、Tab-2がクリックされたら、コンテンツ2を表示するものをかく

exmaple.js

    const handleClick = (e) => {
    e.preventDefault();
    //targetは、クリックされたらDOM要素を取得するプロパティ
    const $ this = e.target;
    //dataset.navはHTMLで設定したdata-navの数字を取得することができる。
    //dataset.(属性名)と入れるとデータ属性の値を取得することができる。
    const targetVal = $this.dataset.nav;

    //対象のコンテンツをアクティブ化する
    //これによってtargetValが1なら1のdata-content(HTMLのDOM要素)を取得してくれる＝動的にコンテンツを取得してくれる。
    //上のコードと連動して、クリックされたdata-contentを取得するようになっている。
    $tab.querySelectorAll('[data-content="'+ targetval +'"]')[0].style.display = 'block'

    //クリックされた時、スタイルも変える
    //classListとはDOM属性についているclass属性の一覧を取得する。DOM要素が持っているクラスをすべて表示させる
    //addで文字列を追加
    %nav[targetVal].classList.add('is-active');
    //↑によってクリックされた際、タブの色が変わるようになる。
    };

このままではクリックされた際、押されていないタブの色が変わらない(非アクティブにならない)のでそれも変える。

remove.js

//nav, contentを全て一旦リセットする
    let index = 0;
    while(index < $nav.length) {
        //contentエリアを全て非表示にする
        $content[index].style.display='none';
        //classの'is-active'を排除する
        $nav[index].classList.remove('is-active');
        index++;
       }

これがあることによって
e.preventDefault()でクリックイベントをすべて消す⇒content[index].style.display='none'ですべてのコンテンツを一度非表示に
⇒$tab.querySelectorAll(省略)と$nav[targetVal].classList.add('is-active')で対象のコンテンツ、今回ではクリックされたコンテンツをアクティブ化
するという流れを作ることができる。

最後にリファクタリングを行う。
同じコードを省略してわかりやすくする。
グローバル変数に

refactoring.js

const ACTIVE_CLASS = 'is-active';
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
$nav[index].classList.remove('is-active');
//これを上で定義したACTIVE_CLASSに変えると、
$nav[index].classList.remove(ACTIVE_CLASS);
//変数名を変えたいとき、ACTIVE_CLASSの内容を変えるだけでOKになる。

大文字で書くと定数という意味になる。