Twitter風　タブの切り替え

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

```html
<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>
  ```

  ```js
  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 イベントリスナーを追加しています。
これにより、タブがクリックされたときに特定の処理が実行されます。