【初心者向け】jQueryを使わず生のJavascriptでタブメニューを作成する

タブメニューを作成する際、JavascriptのライブラリのjQueryを使用して実装する場面もありますが、今回はJavascriptの勉強を始めたばかりの方や初心者向けに、jQueryを使わないタブメニューの実装方法をご紹介します。

タブメニューの基本的な仕組みとは？

タブメニューは、ウェブサイトやアプリケーションでよく使用されるナビゲーションの一種です。

複数のタブをクリックすることで、対応するコンテンツを表示・非表示にすることができ、ユーザーから見てもコンテンツを閲覧しやすいデザインになります。

タブは、通常はボタンやリンクとして表現され、それぞれのタブに対応するコンテンツは、隠れている状態に設定します。タブをクリックすると、JavaScriptでイベントが実行され、選択したタブに対応するコンテンツを表示するように、スタイルを調整していきます。

Javascriptでタブメニューを作成する

HTMLとCSS、Javascriptを使用してシンプルなタブメニューを作成することができます。

以下で簡単に記述方法を説明します。まずは、HTMLとCSSでタブの大元の部分を作っていきます。

・HTML

<!-- タブのボタン -->
<div class="tabs">
    <button class="tablink" onclick="openTab('tab1')">Tab 1</button>
    <button class="tablink" onclick="openTab('tab2')">Tab 2</button>
    <button class="tablink" onclick="openTab('tab3')">Tab 3</button>
</div>

<!-- タブのコンテンツ -->
<div id="tab1" class="tabcontent">
    <h3>Tab 1 Content</h3>
    <p>Some text..</p>
</div>
      
<div id="tab2" class="tabcontent">
    <h3>Tab 2 Content</h3>
    <p>Some more text..</p>
</div>
      
<div id="tab3" class="tabcontent">
    <h3>Tab 3 Content</h3>
    <p>Even more text..</p>
</div>

タブボタン×3とタブコンテンツ×3をHTMLで記述します。

各ボタンはtablinkというクラスを持ちます。各タブのコンテンツは、それぞれ固有のIDを持ち、tabcontentというクラスを持ちます

・CSS

/* タブのスタイル */
.tabs {
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
}

/* タブリンクのスタイル */
.tablink {
  background-color: #ddd;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  font-size: 17px;
}

/* 選択されたタブリンクのスタイル */
.tablink.active {
  background-color: #ccc;
}

/* タブコンテンツのスタイル */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  border-top: none;
}

CSSでは、タブやタブリンク、タブコンテンツのスタイルを定義しています。選択されたタブのリンクに対してactiveクラスが適用され、それによって異なる色で表示されます。

・Javascript

function openTab(tabName) {
  let i, tabcontent, tablinks;
  tabcontent = document.getElementsByClassName("tabcontent");//コンテンツのDOM取得
  //全コンテンツを一度見えなくする
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }
  tablinks = document.getElementsByClassName("tablink");//ボタンのDOM取得
  //全タブのボタンのフォーカスを除去する
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }
  document.getElementById(tabName).style.display = "block";//選択されたIDを持つコンテンツを表示
  event.currentTarget.className += " active";//選択されたボタンにactiveクラスを付与する
}

先ほど、HTMLで記述したonclickにより、タブボタンが押された時に、openTab関数が呼び出されます。引数tabnameに’tab1’、’tab2’、’tab3’の何れかが渡されます。

tabcontentクラスを持つ要素のDOMを取得し、繰り返し処理で、一度全て非表示にします。（表示されているものを無くす（リセット））

同様に、tablinkクラスの要素を取得して、繰り返し処理で、一度全てのボタンからactiveクラスを除去します。（activeクラスのスタイルが適用されなくなる（リセット））

最後に、引数tabnameのIDを持つタブコンテンツに表示スタイルを設定し、タブボタン側にもactiveクラスを付与してあげます

タブメニューのスタイリング

タブメニューのスタイリングにおいては、CSSを使用して多くの効果を実現することができます。以下にいくつかのCSSテクニックを紹介します。

タブの幅を均等にする

タブの幅を均等にするには、display: tableを使用します。

.tabs {
  display: table;
  table-layout: fixed;
  width: 100%;
}
.tablink {
  display: table-cell;
  width: 1%;
  white-space: nowrap;
}

上記のコードでは、tabsクラスをテーブルとして表示し、tablinkクラスをテーブルセルとして表示します。table-layout: fixedを使用することで、幅を均等にすることができます。

アニメーションを追加する

タブの切り替えにアニメーションを追加することで、ユーザーエクスペリエンスを向上させることができます。以下は、フェードイン/アウトアニメーションを追加する方法です。

/* タブコンテンツのアニメーション */
.tabcontent.fade {
  animation-name: fade;
  animation-duration: 0.5s;
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

上記のCSSコードでは、tabcontentクラスを非表示にし、fadeクラスが付与された場合に、fadeアニメーションが適用されるようにしています。fadeアニメーションは、opacityプロパティを使用して、徐々に表示されるように設定されています。

jQueryを使わないメリットとデメリット

jQueryを使用しないタブメニューの実装には、いくつかのメリットとデメリットがあります。

・メリット

・軽量: jQueryを使用しない場合、ページの読み込み速度が速くなり、パフォーマンスが向上します。

・カスタマイズ: jQueryを使用しない場合、コードを自由に編集でき、タブメニューのカスタマイズが容易になります。

・学習コストの低減: jQueryを学ぶ必要がないため、初心者にとっては学習コストが低くなります。

・デメリット

・クロスブラウザの問題: jQueryを使用しない場合、ブラウザの互換性によっては、コードの動作が異なることがあります。

・コードの複雑性: jQueryを使用しない場合、コードを手動で記述する必要があるため、コードの複雑性が高くなる可能性があります。

まとめ

この記事では、JavascriptライブラリのjQueryを使わずに、Javascriptのみでタブメニューを作成する方法をご紹介しました。Javascriptの初学者にとって、あえてライブラリを使わないでタブメニューを作ることは、Javascriptのスキルアップにつながると思います。実務の際には、メリット・デメリットを考慮したうえで実装してみてください。