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

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

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

2日目のテーマは
「タブ切り替えアプリを“よりアプリらしく”するための基礎強化」
です。

1日目であなたは、

• class の付け替えで見た目を変える
• active クラスで表示・非表示を切り替える
• タブとページを連動させる

という“タブ切り替えの心臓部”を理解しました。

2日目はここに、

• class 操作をより深く理解する
• 表示切替の仕組みを整理する
• 複数画面を扱うときの「管理の考え方」を学ぶ
• アクティブ状態をより安全に扱う

という、アプリとしての“安定性”と“拡張性”を加えていきます。

class 操作をもっと深く理解する

classList は「見た目のスイッチ集」

1日目では classList.add() と classList.remove() を使いました。

今日はさらに、
「classList が何をしているのか」 を深掘りします。

HTML の class は、
「この要素はこういう見た目にするよ」という“ラベル”です。

<div class="tab active">タブ1</div>

この要素は、

• tab という基本デザイン
• active という「選択中デザイン」

の2つを持っています。

JavaScript で class を操作すると、
このラベルを付けたり外したりできます。

classList の主な操作

element.classList.add("active");      // active を追加
element.classList.remove("active");   // active を削除
element.classList.toggle("active");   // active の ON/OFF を切り替え
element.classList.contains("active"); // active を持っているか確認

element.classList.add("active");      // active を追加
element.classList.remove("active");   // active を削除
element.classList.toggle("active");   // active の ON/OFF を切り替え
element.classList.contains("active"); // active を持っているか確認

深掘り：toggle が便利な場面

toggle は「ついていなければ付ける、ついていれば外す」という動作です。

例えば、
メニューの開閉やアコーディオン UI などでよく使います。

ただし、タブ切り替えでは
「必ず1つだけ active にする」
というルールがあるため、toggle より add/remove の方が安全です。

表示切替の仕組みを整理する

active クラスが「表示の鍵」になっている

CSS ではこう書いていました。

.page {
  display: none;
}

.page.active {
  display: block;
}

つまり、

• page だけ → 非表示
• page active → 表示

というルールです。

JavaScript がやっているのは、
「どのページに active をつけるか」 を決めているだけ。

表示切替の本体は CSS です。

深掘り：CSS と JS の役割分担

• CSS → 見た目のルール
• JS → どのルールを適用するか決める

この分担を理解すると、
UI アプリがどう動いているかが一気に分かります。

複数画面を扱うときの「管理の考え方」

すべてのタブとページを“配列として扱う”

1日目ではこう書きました。

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

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

これは、

• タブをまとめて扱う
• ページをまとめて扱う

という意味です。

タブが3つでも10個でも、
この書き方なら全部まとめて処理できます。

深掘り：配列として扱うメリット

• タブが増えてもコードを変えなくていい
• ループで一括処理できる
• 管理がシンプルになる

UI アプリでは、
「複数の要素をまとめて扱う」ことがとても重要です。

アクティブ管理をより安全にする

1日目の切り替え処理を振り返る

tabs.forEach(t => t.classList.remove("active"));
pages.forEach(p => p.classList.remove("active"));

clickedTab.classList.add("active");
document.getElementById(targetId).classList.add("active");

tabs.forEach(t => t.classList.remove("active"));
pages.forEach(p => p.classList.remove("active"));

clickedTab.classList.add("active");
document.getElementById(targetId).classList.add("active");

これは正しいのですが、
2日目では「なぜこの順番なのか」を理解しましょう。

深掘り：なぜ“全部外してから付ける”のか？

タブ切り替えでは、

• active が複数ついてはいけない
• active がゼロでもいけない

というルールがあります。

だから、

1. まず全部外す（リセット）
2. 必要なものだけ付ける（セット）

という順番が安全です。

toggle を使うと、
「複数 active がつく」「active が消える」などの事故が起きます。

2日目の改良版 switchPage を作る

より読みやすく、安全な書き方

function switchPage(targetId, clickedTab) {
  // すべてのタブから active を外す
  tabs.forEach(tab => {
    tab.classList.remove("active");
  });

  // すべてのページから active を外す
  pages.forEach(page => {
    page.classList.remove("active");
  });

  // クリックされたタブに active を付ける
  clickedTab.classList.add("active");

  // 対応するページに active を付ける
  const targetPage = document.getElementById(targetId);
  targetPage.classList.add("active");
}

function switchPage(targetId, clickedTab) {
  // すべてのタブから active を外す
  tabs.forEach(tab => {
    tab.classList.remove("active");
  });

  // すべてのページから active を外す
  pages.forEach(page => {
    page.classList.remove("active");
  });

  // クリックされたタブに active を付ける
  clickedTab.classList.add("active");

  // 対応するページに active を付ける
  const targetPage = document.getElementById(targetId);
  targetPage.classList.add("active");
}

深掘り：変数名を丁寧にする理由

• tab
• page
• targetPage

のように、
「何を表しているか」が分かる名前にすると、
コードが読みやすくなります。

プログラミングは「書く」より「読む」時間の方が長いので、
読みやすさはとても大事です。

2日目のミニ完成版コード

HTML（1日目と同じ）

<div class="tabs">
  <div class="tab active" data-target="page1">タブ1</div>
  <div class="tab" data-target="page2">タブ2</div>
  <div class="tab" data-target="page3">タブ3</div>
</div>

<div class="pages">
  <div id="page1" class="page active">ページ1の内容</div>
  <div id="page2" class="page">ページ2の内容</div>
  <div id="page3" class="page">ページ3の内容</div>
</div>

CSS（1日目と同じ）

.tab {
  padding: 10px;
  cursor: pointer;
  display: inline-block;
}

.active {
  background-color: #4caf50;
  color: white;
}

.page {
  display: none;
  padding: 20px;
  border: 1px solid #ccc;
}

.page.active {
  display: block;
}

JavaScript（改良版）

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

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

function switchPage(targetId, clickedTab) {
  tabs.forEach(tab => tab.classList.remove("active"));
  pages.forEach(page => page.classList.remove("active"));

  clickedTab.classList.add("active");

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

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

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

function switchPage(targetId, clickedTab) {
  tabs.forEach(tab => tab.classList.remove("active"));
  pages.forEach(page => page.classList.remove("active"));

  clickedTab.classList.add("active");

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

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

class 操作は UI の“言語”

タブ切り替え
モーダル表示
アコーディオン
ドロップダウンメニュー

これらはすべて、

「class を付ける → 見た目が変わる」

という仕組みで動いています。

classList を理解することは、
UI を作るための“基礎言語”を覚えることと同じです。

複数画面は「配列として扱う」

タブやページをまとめて扱うことで、

• 数が増えてもコードを変えなくていい
• 一括処理ができる
• 管理がシンプルになる

というメリットがあります。

3日目へのつなぎ

3日目からは、

• タブのデザインをもっとアプリっぽくする
• アニメーションをつける
• タブの数が増えても自動で動くようにする
• コードを関数化してさらに読みやすくする

という、“アプリとしての完成度”を上げる段階に入ります。

今日の内容は、
タブ切り替えアプリの「安定性と拡張性」を支える基礎です。

ここまで理解できたあなたなら、
もう UI アプリの設計者としての一歩を踏み出しています。