const tab = ()=>{
    
    // 要素取得（引数の値をセレクターに使用）
    let tabMenuItems = document.querySelectorAll('.tab-menu__item');
    let tabContentItems = document.querySelectorAll('.tab-content__item');
    
    // アクティブクラス名を指定
    let tabMenuItemActiveClass = 'tab-menu__item--active';
    let tabContentItemActiveClass = 'tab-content__item--active';
    
    // タブメニューアイテム、タブコンテンツアイテムの全アクティブクラスを削除する関数
    let removeAllActiveClass = ()=>{
        tabMenuItems.forEach(item => item.classList.remove(tabMenuItemActiveClass));
        tabContentItems.forEach(item => item.classList.remove(tabContentItemActiveClass));
    };

    // タブメニューアイテム分ループする
    tabMenuItems.forEach((item)=>{
        
        // 各タブメニューアイテムにクリックイベントを設定する
        item.addEventListener('click', (e)=>{
            
            // 関数実行
            removeAllActiveClass();
            
            // クリックされたタブメニューアイテムにアクティブクラスを付加する
            e.target.classList.add(tabMenuItemActiveClass);
            
            // クリックされたタブメニューアイテムのdata属性の値の順番にあるタブコンテンツアイテムにアクティブクラスを付加する
            tabContentItems[e.target.dataset.tabMenuItem].classList.add(tabContentItemActiveClass);
            
        });
    });
}

// 関数実行
tab();