【フロントエンド開発の基礎力】モーダル・ドロップダウン・タブをゼロから実装して理解を深める

1. はじめに〜「なんとなく使う」から「理解して使う」へ〜

現代のWebアプリケーションにおいて、「モーダル」「ドロップダウン」「タブ」は当たり前のように登場するUIコンポーネントです。しかし、

ライブラリを使えば一瞬で実装できるけど、実は仕組みが分かっていない
スタイリングやイベントの扱いでバグが出やすい
という経験はないでしょうか？

本記事では、これらのUIをゼロから実装し、
「仕組みを理解した上で応用できる力」＝基礎力を養うことを目的としています。

ReactやVueなどのフレームワークを使わず、プレーンなHTML/CSS/JavaScriptだけで実装し、挙動と構造の本質を掴みましょう。

2. 各UIコンポーネントの概要と実装の難所

2.1 モーダル（Modal）

定義：
画面上にオーバーレイとして表示されるダイアログ。背景の操作を無効化し、ユーザーに特定のアクションを促す。

実装時の課題：

背景スクロールの無効化
ESCキーで閉じる処理
アニメーションの扱い

2.2 ドロップダウン（Dropdown）

定義：
クリック時に表示される選択肢リスト。ナビゲーションやフォームで多用される。

実装時の課題：

外側クリックで閉じる挙動
フォーカス管理
レイアウトとの整合性（z-indexやoverflow）

2.3 タブ（Tab）

定義：
複数のセクションを切り替えるためのUI。SPAや管理画面でよく使われる。

実装時の課題：

アクティブ状態の管理
ARIA属性などアクセシビリティ考慮

3. 実装例：プレーンJSで作るミニUIコンポーネント

💡 前提：HTML構造とCSSはシンプルに保つ

以下のコードは基本形。まずはモーダルを例に説明し、次に他のUIも順に解説します。

3.1 モーダルの実装

HTML

<button id="openModal">Open Modal</button>
<div id="modal" class="modal hidden">
  <div class="modal-content">
    <span id="closeModal" class="close">&times;</span>
    <p>Hello, this is a modal!</p>
  </div>
</div>

CSS

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal.hidden {
  display: none;
}
.modal-content {
  background: white;
  padding: 20px;
  border-radius: 8px;
}

JavaScript

const modal = document.getElementById('modal');
const openBtn = document.getElementById('openModal');
const closeBtn = document.getElementById('closeModal');

openBtn.addEventListener('click', () => {
  modal.classList.remove('hidden');
  document.body.style.overflow = 'hidden'; // 背景スクロール無効
});

closeBtn.addEventListener('click', closeModal);
window.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') closeModal();
});

function closeModal() {
  modal.classList.add('hidden');
  document.body.style.overflow = '';
}

3.2 ドロップダウンの実装

HTML

<div class="dropdown">
  <button id="dropdownToggle">Menu</button>
  <ul id="dropdownMenu" class="menu hidden">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
</div>

JavaScript

const toggle = document.getElementById('dropdownToggle');
const menu = document.getElementById('dropdownMenu');

toggle.addEventListener('click', () => {
  menu.classList.toggle('hidden');
});

document.addEventListener('click', (e) => {
  if (!toggle.contains(e.target) && !menu.contains(e.target)) {
    menu.classList.add('hidden');
  }
});

3.3 タブの実装

HTML

<div class="tabs">
  <button data-tab="1" class="tab active">Tab 1</button>
  <button data-tab="2" class="tab">Tab 2</button>
</div>
<div id="content-1" class="tab-content">Content 1</div>
<div id="content-2" class="tab-content hidden">Content 2</div>

JavaScript

const tabs = document.querySelectorAll('.tab');
const contents = document.querySelectorAll('.tab-content');

tabs.forEach(tab => {
  tab.addEventListener('click', () => {
    tabs.forEach(t => t.classList.remove('active'));
    contents.forEach(c => c.classList.add('hidden'));

    tab.classList.add('active');
    document.getElementById(`content-${tab.dataset.tab}`).classList.remove('hidden');
  });
});

4. 実務で役立つTipsと落とし穴

z-index地獄：UIが重なるとき、z-indexの値が中途半端だと表示されない。
CSSのresetやnormalizeを導入することで、ブラウザ間の差異を防ぐ。
レスポンシブ対応：モバイルではモーダルは画面全体にするなど、UI調整が必須。
アクセシビリティの考慮：ARIA属性やキーボード操作の対応も将来的に必要。

5. 応用編：コンポーネント化と状態管理の導入

上記コードをWeb Component化して再利用性を高める
状態を**State Management（例：ReduxやContext API）**で統一的に管理する
React/Next.jsなどでリファクタリングし、実際のアプリで活用

6. まとめ：自分の手で作ることが最強の学び

項目	メリット	注意点
モーダル	明確な操作を促す	スクロール制御やフォーカス移動
ドロップダウン	UIの整理に役立つ	z-indexや外部クリック検知
タブ	情報の整理に適している	状態管理とアクセシビリティ

本記事で紹介したのは、UIコンポーネントの「基礎中の基礎」です。しかし、この地味な基礎力が、将来的にライブラリやフレームワークを使いこなす際の大きな武器になります。

🚀 次回予告：「画面遷移とシングルページアプリ」

📎 参考リンク

MDN Web Docs: https://developer.mozilla.org/ja/
A11yガイドライン: https://www.w3.org/WAI/