― UIの状態管理とDOM制御の基本
はじめに
これまでの学習で、JavaScriptによるデータ取得、表示、検索・絞り込みの基本的な処理を習得してきました。今回はその応用として、タブ切り替えによる表示の制御を実装していきます。
タブUIは、ユーザーにとって複数の情報を整理された形で閲覧できる便利なインターフェースです。FAQページ、管理画面、プロフィール情報のセクション切り替えなど、実用シーンは非常に多く存在します。
また、JavaScriptでタブの切り替えを実装することは、「状態管理」と「DOMの動的制御」の基礎を身につけるのに非常に効果的です。
タブ切り替えの基本構造
HTMLにおいてタブUIを実装するには、大まかに以下のような構成を取ります。
- タブのリスト（ボタンやリンク）
- 対応するコンテンツ領域（セクション）
- JavaScriptで「どのタブが選択されているか」という状態を管理
構成イメージ：
[プロフィール] [投稿一覧] [フォロー中]
→ 上記のいずれかをクリックすると、対応する内容が表示される
実装：プロフィール・投稿・フォローの3タブ切り替え
HTML
<section class="tab-ui">
<div class="tabs">
<button class="tab active" data-tab="profile">プロフィール</button>
<button class="tab" data-tab="posts">投稿一覧</button>
<button class="tab" data-tab="following">フォロー中</button>
</div>
<div class="tab-content" id="profile">これはプロフィールの内容です。</div>
<div class="tab-content hidden" id="posts">投稿一覧を表示します。</div>
<div class="tab-content hidden" id="following">フォロー中のユーザーを表示します。</div>
</section>
CSS（必要最低限のスタイル）
.tab-content.hidden {
display: none;
}
.tabs {
display: flex;
gap: 8px;
margin-bottom: 16px;
}
.tab.active {
font-weight: bold;
border-bottom: 2px solid black;
}
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');
// 対応するコンテンツを表示
const targetId = tab.dataset.tab;
const targetContent = document.getElementById(targetId);
targetContent.classList.remove('hidden');
});
});
解説：状態の切り替えとDOM操作
このタブUIでは以下のような状態管理とDOM操作が行われています：
- どのタブが「現在アクティブか？」という状態を
class="active"で保持 - 表示・非表示の制御を
classList.add/remove('hidden')で行う - HTMLの属性（
data-tab）を使って、タブと表示コンテンツを対応づけ
このような設計は、VueやReactなどのコンポーネント指向フレームワークにも通じる、UI設計の基本的な考え方です。
よくあるミスと対処法
- 初期状態で「どのタブも表示されない」
→.activeまたは.hiddenクラスの初期指定漏れを確認 data-tabとidの対応が取れていない
→ HTML内の命名ミスに注意- 複数のイベントが重複して実行される
→ イベントリスナーの重複登録がないか確認
また、複雑になってきた場合は、状態（現在のタブ）を変数で管理する設計に切り替えると、より堅牢な実装になります。
発展的な応用
このようなタブ切り替えのUIは、以下のような応用にも繋がります：
- 条件によって表示を切り替えるダッシュボード
- タブ＋絞り込み＋ソートの複合UI
- モーダルやドロップダウンの表示切り替え
JavaScriptで「表示・非表示」を操作する場面は非常に多く、DOM制御と状態管理を組み合わせるこのようなUIは、どのWebアプリケーションでも重要な技術です。
まとめ
今回学んだタブ切り替えは、シンプルながら実用性が高く、UI設計の基本となる要素です。
- HTMLとCSSでタブ構造とコンテンツ領域を分離
- JavaScriptでアクティブ状態の切り替えとDOM操作
- 状態に基づいたUIの動的な制御
このようなインタラクションが作れるようになると、アプリケーションのUI設計にも幅が出てきます。
次回は、ここまでで学んだUI構築・データ取得・DOM制御の技術を活かして、ミニWebアプリをゼロから構築するプロジェクト編に入っていきます。
次回予告
ミニアプリを作ろう ― HTML/CSS/JavaScriptを使ったシンプルなWebアプリケーション開発入門
コメント