Twitter風 タブの切り替え

railsでjsによるツイッターのようnタブの切り替えを実装しました。

<div class="tab-container">
    <ul class="tabs">
      <li class="tab tab-active" data-tab="reviews">レビュー</li>
      <li class="tab" data-tab="favorites">お気に入り</li>
      <li class="tab" data-tab="visited-places">行ってみたいリスト</li>
    </ul>
    <div class="tab-content">
      <div id="reviews" class="tabbox box-show">
        <div class="review-content">
          <ul>
            <% @user_reviews.each do |user_review| %>
            　<li class="post-item">
                <div class="post-content">
                    <div class="post-place-name">
                      <%= link_to user_review.name, facilities_index_path(place_name: user_review.name), class: "post-place-name" %>
                    </div>
                    <h3 class="post-title"><%= user_review.title %></h3>
                    <p class="post-review"><%= user_review.review %></p>
                    <div class="post-time"><%= time_ago_in_words(user_review.created_at) %>前</div>
                </div>
            </li>
            <% end %>
          </ul>
        </div>
      </div>
      <div id="favorites" class="tabbox">
        <div class="favorite-content">
            <ul>
            <% @favorites.each do |favorite| %>
                <li><h5><%= favorite.facility.name %></h5></li>
                <li><p><%= favorite.facility.address %></p></li>
            <% end %>
            </ul>
        </div>
      </div>
      <div id="visited-places" class="tabbox">
        <div class="visited-place-content">
            <ul>
            <% @visited_places.each do |visited_place| %>
                <li><h5><%= visited_place.facility.name %></h5></li>
                <li><p><%= visited_place.facility.address %></p></li>
            <% end %>
            </ul>
        </div>
      </div>
    </div>
  </div>

document.addEventListener('DOMContentLoaded', function() {
initializeTabSwitching();
});

document.addEventListener('turbolinks:load', function() {
initializeTabSwitching();
});

function initializeTabSwitching(){
const tabs = document.querySelectorAll('.tab');
const tabBoxes = document.querySelectorAll('.tabbox');

if (tabs.length && tabBoxes.length){
  tabs.forEach((tab, index) => {
    tab.addEventListener('click', function() {

      const activeTab = document.querySelector('.tab-active');
      const activeBox = document.querySelector('.box-show');

      if (activeTab){
        activeTab.classList.remove('tab-active');
      }
      if (activeBox){
        activeBox.classList.remove('box-show');
      }

      tab.classList.add('tab-active');
      tabBoxes[index].classList.add('box-show');
    });
  });
 }
}

if (tabs.length && tabBoxes.length)

この条件文は、tabsとtabBoxesの両方が存在し、
かつそれぞれに要素が含まれているかどうかを確認しています。

「tabs」は .tab クラスを持つすべての要素のリストです。
「tabBoxes」は .tabbox クラスを持つすべての要素のリストです。

条件が true の場合、つまり両方のリストに要素が
存在する場合にのみ、内部の処理を実行します。

tabs.forEach((tab, index) => { ... })

ここでは、tabsリストの各要素に対してループを実行しています。
forEachメソッドを使用して、各タブ要素に対してイベントリスナーを追加します。

tab は現在のループのタブ要素です。
index は現在のタブのインデックス（0から始まる）です。

tab.addEventListener('click', function() { ... })

tab 要素に click イベントリスナーを追加しています。
これにより、タブがクリックされたときに特定の処理が実行されます。