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

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

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

4日目のテーマは
「タブ切り替えアプリを“よりアプリらしく、より使いやすく”進化させる」
ことです。

1〜3日目であなたは、

• class の付け替えで見た目を変える
• active クラスで表示・非表示を切り替える
• タブとページを連動させる
• 今アクティブな要素だけを外す効率的な管理

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

4日目はここに、

• タブのデザインを整える（CSS の強化）
• ホバーやクリック時のアニメーションを追加する
• タブ数が増えても壊れないコードにする
• アクティブ管理を「より堅牢」にする

という、“UI/UX の質を上げる”ステップを加えていきます。

タブ切り替えアプリの「UI を強化する」考え方

見た目は「機能の一部」

タブ切り替えアプリは、
機能だけならすでに完成しています。

しかし、実際のアプリでは、

• タブが押しやすい
• どのタブが選択中か一目で分かる
• 切り替えがスムーズで気持ちいい

こうした UI/UX がとても重要です。

4日目は、
「見た目と操作感をアプリレベルに引き上げる」
ことを目指します。

タブのデザインを整える（CSS 強化）

基本デザインを“アプリ風”にする

まずはタブの見た目を整えます。

.tabs {
  display: flex;
  border-bottom: 2px solid #ccc;
}

.tab {
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  border-bottom: 2px solid transparent;
}

.tab:hover {
  background-color: #f0f0f0;
}

.tab.active {
  background-color: #4caf50;
  color: white;
  border-bottom: 2px solid #4caf50;
}

深掘り：transition が UX を変える

transition: 0.3s; を入れると、
色の変化が「ふわっ」と滑らかになります。

• 急に色が変わる → 安っぽい
• なめらかに変わる → アプリっぽい

この違いは、ユーザー体験に大きく影響します。

ページの表示切替も“アニメーション”で滑らかにする

フェードインを追加する

.page {
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.page.active {
  display: block;
  opacity: 1;
}

深掘り：display と opacity の合わせ技

display: none → block
opacity: 0 → 1

この2つを組み合わせることで、

• 非表示のときは完全に消える
• 表示するときはふわっと現れる

という自然なアニメーションになります。

JavaScript を「タブ数が増えても壊れない」形にする

3日目の switchPage を復習

function switchPage(targetId, clickedTab) {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

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

  clickedTab.classList.add("active");

  const targetPage = document.getElementById(targetId);
  targetPage.classList.add("active");
}

function switchPage(targetId, clickedTab) {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

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

  clickedTab.classList.add("active");

  const targetPage = document.getElementById(targetId);
  targetPage.classList.add("active");
}

これはすでに効率的ですが、
4日目では「安全性」をさらに高めます。

アクティブ管理を“堅牢”にする

万が一 active がついていない場合に備える

UI が複雑になると、
「active がついていない状態」が起こる可能性があります。

そこで、
active が見つからなかった場合の処理を追加します。

function switchPage(targetId, clickedTab) {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

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

  clickedTab.classList.add("active");

  const targetPage = document.getElementById(targetId);
  if (targetPage) targetPage.classList.add("active");
}

function switchPage(targetId, clickedTab) {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

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

  clickedTab.classList.add("active");

  const targetPage = document.getElementById(targetId);
  if (targetPage) targetPage.classList.add("active");
}

深掘り：UI は「想定外の状態」が起こりやすい

• HTML の変更
• タブの追加
• 読み込み順の違い

こうした要因で、
active がついていない状態が起こることがあります。

if (currentTab) のように
“存在チェック”を入れることで、
アプリが壊れにくくなります。

タブ数が増えても自動で動く仕組みを確認する

data-target の強みを再確認

タブに data-target を書いておけば、

<div class="tab" data-target="page10">タブ10</div>

JavaScript は自動で対応ページを探します。

const targetId = tab.dataset.target;

const targetId = tab.dataset.target;

深掘り：HTML と JS の分離が美しい

• HTML → 何を表示するか
• CSS → どう見せるか
• JS → どう動かすか

この分離ができていると、
アプリが壊れにくく、拡張しやすくなります。

4日目の完成コード（UI 強化版）

CSS（アプリ風デザイン）

.tabs {
  display: flex;
  border-bottom: 2px solid #ccc;
}

.tab {
  padding: 12px 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  border-bottom: 2px solid transparent;
}

.tab:hover {
  background-color: #f0f0f0;
}

.tab.active {
  background-color: #4caf50;
  color: white;
  border-bottom: 2px solid #4caf50;
}

.page {
  display: none;
  opacity: 0;
  transition: opacity 0.3s;
  padding: 20px;
}

.page.active {
  display: block;
  opacity: 1;
}

JavaScript（堅牢版）

const tabs = document.querySelectorAll(".tab");

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

function switchPage(targetId, clickedTab) {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

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

  clickedTab.classList.add("active");

  const targetPage = document.getElementById(targetId);
  if (targetPage) targetPage.classList.add("active");
}

const tabs = document.querySelectorAll(".tab");

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

function switchPage(targetId, clickedTab) {
  const currentTab = document.querySelector(".tab.active");
  const currentPage = document.querySelector(".page.active");

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

  clickedTab.classList.add("active");

  const targetPage = document.getElementById(targetId);
  if (targetPage) targetPage.classList.add("active");
}

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

UI の質は「class の付け替え」で決まる

タブ切り替えアプリは、
class を付け替えるだけで

• 色
• アニメーション
• 表示・非表示

すべてをコントロールしています。

class 操作を理解することは、
UI アプリの“基礎言語”を理解することです。

アクティブ管理は「状態管理」

タブ切り替えは、
「どのタブがアクティブか」という状態を持っています。

この状態を正しく管理できると、
UI アプリ全般が理解しやすくなります。

5日目へのつなぎ

5日目からは、

• コードを関数化してもっと読みやすくする
• タブを動的に追加しても動く仕組みを作る
• アプリとしての完成度をさらに上げる

という、“設計力”のステップに入ります。

今日の内容を理解できたあなたなら、
もう UI アプリの「見た目と動き」を自在に操れる段階に来ています。