JavaScript | 1 日 90 分 × 7 日アプリ学習：タブ切り替えアプリ（初級編）

5日目のゴールと今日やること

引用元は。なし（本教材はオリジナル解説です）

5日目のテーマは
「タブ切り替えアプリを“より整理されたコード”に進化させ、機能追加に強い構造を作る」
ことです。

1〜4日目であなたは、

• class の付け替えで UI を切り替える
• active クラスで表示・非表示を管理する
• 今アクティブなタブだけを外す効率的な方法
• CSS でアニメーションやデザインを整える

ここまで理解できています。

5日目はここに、

• コードを関数化して読みやすくする
• タブを追加しても壊れない構造にする
• イベント委譲（Event Delegation）を学ぶ
• アクティブ管理を“より抽象化”して扱う

という、“アプリとしての設計力”を加えていきます。

コードを「関数化」して読みやすくする

なぜ関数化が必要なのか？

4日目までのコードは動きますが、
タブが増えたり、機能を追加したりすると
「どこを直せばいいのか分かりにくい」
という問題が出てきます。

そこで必要なのが「関数化」です。

関数化の目的は、

• コードを意味ごとに分ける
• 再利用しやすくする
• 修正箇所を最小限にする

という“設計の基本”です。

タブ切り替えの処理を「3つの関数」に分ける

1つ目：アクティブを外す関数

function clearActive() {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

  if (currentTab) currentTab.classList.remove("active");
  if (currentPage) currentPage.classList.remove("active");
}

function clearActive() {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

  if (currentTab) currentTab.classList.remove("active");
  if (currentPage) currentPage.classList.remove("active");
}

深掘り：責務を1つにする

この関数の役割は
「今のアクティブを外す」だけ
です。

こうして責務を1つにすると、
コードが壊れにくく、読みやすくなります。

2つ目：アクティブを付ける関数

function setActive(tab, pageId) {
  tab.classList.add("active");
  const page = document.getElementById(pageId);
  if (page) page.classList.add("active");
}

function setActive(tab, pageId) {
  tab.classList.add("active");
  const page = document.getElementById(pageId);
  if (page) page.classList.add("active");
}

深掘り：抽象化の第一歩

「タブとページに active を付ける」という処理を
ひとまとめにすることで、

• どこからでも呼べる
• コードの重複がなくなる
• 修正が1箇所で済む

というメリットが生まれます。

3つ目：タブ切り替えの本体

function switchPage(tab) {
  const targetId = tab.dataset.target;

  clearActive();
  setActive(tab, targetId);
}

function switchPage(tab) {
  const targetId = tab.dataset.target;

  clearActive();
  setActive(tab, targetId);
}

深掘り：switchPage が“司令塔”になる

switchPage は、

• まずアクティブを外す
• 次に新しいアクティブを付ける

という「流れ」を管理する関数です。

このように
“流れを管理する関数”と“作業をする関数”を分ける
のが、設計の基本です。

イベント委譲（Event Delegation）でタブ追加に強くする

今までの書き方の問題点

4日目まではこう書いていました。

tabs.forEach(tab => {
  tab.addEventListener("click", () => {
    switchPage(tab);
  });
});

tabs.forEach(tab => {
  tab.addEventListener("click", () => {
    switchPage(tab);
  });
});

これは正しいのですが、
タブが増えるたびにイベントを付け直す必要があります。

そこで登場するのが イベント委譲 です。

イベント委譲とは？

親要素にイベントをまとめて登録する方法

タブの親要素 .tabs にイベントを登録し、
クリックされた要素がタブかどうかを判定します。

const tabsContainer = document.querySelector(".tabs");

tabsContainer.addEventListener("click", (e) => {
  const clickedTab = e.target.closest(".tab");
  if (!clickedTab) return;

  switchPage(clickedTab);
});

const tabsContainer = document.querySelector(".tabs");

tabsContainer.addEventListener("click", (e) => {
  const clickedTab = e.target.closest(".tab");
  if (!clickedTab) return;

  switchPage(clickedTab);
});

深掘り：イベント委譲のメリット

• タブが増えてもイベントを追加しなくていい
• 動的にタブを追加しても自動で動く
• コードが短くなる
• パフォーマンスが良い

UI アプリでは必須のテクニックです。

5日目の完成コード（関数化＋イベント委譲）

JavaScript

function clearActive() {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

  if (currentTab) currentTab.classList.remove("active");
  if (currentPage) currentPage.classList.remove("active");
}

function setActive(tab, pageId) {
  tab.classList.add("active");
  const page = document.getElementById(pageId);
  if (page) page.classList.add("active");
}

function switchPage(tab) {
  const targetId = tab.dataset.target;

  clearActive();
  setActive(tab, targetId);
}

const tabsContainer = document.querySelector(".tabs");

tabsContainer.addEventListener("click", (e) => {
  const clickedTab = e.target.closest(".tab");
  if (!clickedTab) return;

  switchPage(clickedTab);
});

function clearActive() {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

  if (currentTab) currentTab.classList.remove("active");
  if (currentPage) currentPage.classList.remove("active");
}

function setActive(tab, pageId) {
  tab.classList.add("active");
  const page = document.getElementById(pageId);
  if (page) page.classList.add("active");
}

function switchPage(tab) {
  const targetId = tab.dataset.target;

  clearActive();
  setActive(tab, targetId);
}

const tabsContainer = document.querySelector(".tabs");

tabsContainer.addEventListener("click", (e) => {
  const clickedTab = e.target.closest(".tab");
  if (!clickedTab) return;

  switchPage(clickedTab);
});

今日いちばん深く理解してほしいこと

関数化は「設計の第一歩」

clearActive
setActive
switchPage

この3つの関数は、
それぞれ役割が明確です。

• clearActive → リセット
• setActive → セット
• switchPage → 流れの管理

このように責務を分けることで、
アプリが壊れにくく、拡張しやすくなります。

イベント委譲は「動的 UI の必須テクニック」

タブが増えても、
JavaScript を書き換える必要がありません。

これは、
「HTML を変えるだけで UI が増える」
という強力な構造です。

6日目へのつなぎ

6日目からは、

• タブを JavaScript で動的に生成する
• ページも自動生成して管理する
• データ構造（配列・オブジェクト）でタブを管理する
• アプリとしての完成度をさらに上げる

という、“本格的なアプリ設計”に入ります。

今日の内容を理解できたあなたなら、
もう UI アプリの「設計者」としての視点を持ち始めています。