🔰JS初心者が作るGoogle extension V3 ③ -タブの切り替えの処理- #JavaScript

前回の続き　→ 🔰JS初心者が作るGoogle extension V3 ② -popup.htmlの作成-

完成した作品は　→　こちら🐕

popup.js

前回popupのHTMLを作成したので色々と動きをつけるためにjsファイルを記入します。
このjsファイルには
・タブの切り替えの処理
・タイマーを表示させる
・スタート/ストップ/リセットの各ボタン機能
・タイマー作動中の有無で表示する画面の処理
と多くの処理を行う。

この記事ではタブの切り替えの処理を記述していく。

タブの切り替えの処理

タブの切り替えはこちらの記事を参考にしました。
document.getElementsBy~の使い方や意味がなんとなくわかる程度だったので、記事を見ても理解するのに時間がかかりました。

やりたい内容はこちら↓↓
（キャラとその他の中身は省略しました）

<div class="tab-panel">
  <!--タブには共通して「tab」　のclassを持たせ、
　　　　　　　最初に表示しておきたいものに「is-active」を追加する-->
  <ul class="tab-group">
    <li class="tab tab-timer is-active">タイマー</li>
    <li class="tab tab-character">キャラ</li>
    <li class="tab tab-other">その他</li>  
 </ul>
  
  <!--タブを切り替えて表示するコンテンツ-->
　　　　<!--コンテンツもタブ同胞に、共通して「content」　のclassを持たせ、
　　　　　　　最初に表示しておきたいものに「is-show」を追加する-->
  <div class="content-group">
    <div class="content tab-timer is-show">タイマーの中身</div>
    <div class="content tab-character">キャラの中身</div>
    <div class="content tab-other">その他の中身</div>
  </div>
</div>

document.addEventListener('DOMContentLoaded', function(){
    // 「tab」を持っているクラス全てに対してクリックイベントを適用
    const tabs = document.getElementsByClassName('tab');
    for(let i = 0; i < tabs.length; i++) {
        tabs[i].addEventListener('click', tabSwitch, false);
    }

    // タブをクリックすると実行する関数
    function tabSwitch(){
        // タブのclassの値を変更
        //[0]となっているのは、'is-active'は１個しかため
        document.getElementsByClassName('is-active')[0].classList.remove('is-active');
        this.classList.add('is-active');

        // コンテンツのclassの値を変更
        //[0]となっているのは、'is-show'は１個しかないため
        document.getElementsByClassName('is-show')[0].classList.remove('is-show');
        const arrayTabs = Array.prototype.slice.call(tabs);
        const index = arrayTabs.indexOf(this);
        document.getElementsByClassName('content')[index].classList.add('is-show');
    };
}, false);

`◆classList`

class名を読み取る。
add(), remove(), replace(), toggle() の各メソッドを用いてオブジェクトを変更することができる。

`◆this`

thisは呼びだされたタイミングや状況によって参照先がコロコロと変わる。

基本的なイメージとしては
メソッド内でthisが呼び出された場合は、そのメソッドが格納されているオブジェクトへの参照となる。

格納されているオブジェクトが存在しない場合は、windowオブジェクトの参照となるという感じになります。

今回のthisはクリックしたタブのことを示しいます。

`◆const arrayTabs = Array.prototype.slice.call(tabs)`

Array.prototypeのところを[].に変えて[].slice.call(tabs)とも書けるらしい。
これは何をしているのかというと、配列風オブジェクトを配列に変換している。

配列風オブジェクトとは
「lengthを持ち、[0], [1], [2]のようにアクセスできるオブジェクト」を、配列風オブジェクトと言う

Array→ 配列

prototype→ 継承

slice→ 文字列や配列などからデータの一部分だけ取り出せるメソッド。

call→ あるオブジェクトに所属する関数やメソッドを、別のオブジェクトに割り当てて呼び出す。

１個１個メソッドを見て意味的に、class名tabを個別で取り出し配列にしていることがわかります。

`◆const index = arrayTabs.indexOf(this)`

indexOf（）→ このメソッドは引数に与えられた内容と同じ内容を持つ最初の配列要素の添字を返す。

新たにクリックされたタブ[n]番目をindexという変数に格納している。
document.getElementsByClassName('content')[index].classList.add('is-show');
のindexにあたる。

つまり、is-activeと同じ表示させたいコンテンツにis-showを追加できるような処理を行なっている。

拡張機能の記事リンク

参考記事

変数と宣言
 【JavaScript入門】sliceで文字列や配列(Array)を切り抜く方法まとめ
 thisの概要と使い方