3日目のゴールと今日やること
引用元は。なし（本教材はオリジナル解説です）
3日目のテーマは
「タブ切り替えアプリを“より実用的で拡張しやすい形”に進化させる」
ことです。
1日目でタブ切り替えの仕組みを理解し、
2日目で class 操作やアクティブ管理の基礎を固めました。
3日目はここに、
- class 操作をさらに効率化する
- 表示切替のコードを整理する
- 複数画面を“自動で”扱えるようにする
- アクティブ管理を「データ構造」として理解する
という、アプリとしての“拡張性”を加えていきます。
タブ切り替えの「本質」をもう一度整理する
タブ切り替えの本質は「状態の切り替え」
タブ切り替えアプリは、
見た目は派手ですが、やっていることはとてもシンプルです。
1つのタブをクリックする
→ すべてのタブを非アクティブにする
→ クリックされたタブだけアクティブにする
→ 対応するページだけ表示する
この「状態の切り替え」を
JavaScript が担当し、
「見た目の変化」を CSS が担当しています。
この役割分担を理解すると、
UI アプリの構造が一気に分かりやすくなります。
class 操作を“まとめて扱う”という考え方
2日目までのコードは「正しいけど手作業」
2日目までのコードはこうでした。
tabs.forEach(tab => tab.classList.remove("active"));
pages.forEach(page => page.classList.remove("active"));
これは正しいのですが、
タブやページが増えると、
「毎回全部 remove する」のは少し効率が悪いです。
3日目はここを改善していきます。
「今アクティブな要素」を探して外す
classList.contains を使う
実は、
「全部外す」のではなく、
“今 active がついている要素だけ”を外す
という方法もあります。
const currentTab = document.querySelector(".tab.active");
const currentPage = document.querySelector(".page.active");
currentTab.classList.remove("active");
currentPage.classList.remove("active");
これで、
- active がついているタブ
- active がついているページ
だけを外せます。
深掘り：なぜこの方法が良いのか？
- タブが100個あっても、remove するのは1つだけ
- ページが100個あっても、remove するのは1つだけ
- 無駄なループが減る
- コードが読みやすくなる
UI が複雑になるほど、この差が効いてきます。
表示切替のコードを「関数化」して整理する
switchPage をより賢くする
昨日までの switchPage はこうでした。
function switchPage(targetId, clickedTab) {
tabs.forEach(tab => tab.classList.remove("active"));
pages.forEach(page => page.classList.remove("active"));
clickedTab.classList.add("active");
document.getElementById(targetId).classList.add("active");
}
これを、
「今の 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");
}
深掘り：関数の責務が明確になる
switchPage の役割は、
- 今のアクティブを外す
- 新しいアクティブをつける
という「状態の切り替え」だけになります。
こうして責務が明確になると、
コードが壊れにくく、読みやすくなります。
複数画面を“自動で”扱う仕組みを作る
data-target を使う理由を深掘りする
タブにはこう書いていました。
<div class="tab" data-target="page2">タブ2</div>
この data-target は、
「このタブはどのページを開くべきか」
という情報を持っています。
JavaScript ではこう取得できます。
const targetId = tab.dataset.target;
深掘り：data-* 属性は「HTML と JS の橋渡し」
data-* 属性は、
- HTML に“意味のある情報”を持たせる
- JavaScript がそれを読み取って動く
という、UI アプリでは欠かせない仕組みです。
タブが増えても、
data-target を書くだけで自動で動くようになります。
3日目の改良版コード（読みやすく・効率的）
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（3日目の改良版）
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");
currentTab.classList.remove("active");
currentPage.classList.remove("active");
clickedTab.classList.add("active");
const targetPage = document.getElementById(targetId);
targetPage.classList.add("active");
}
今日いちばん深く理解してほしいこと
「状態を持つ UI」は“アクティブ管理”がすべて
タブ切り替えアプリは、
「どのタブがアクティブか」
「どのページがアクティブか」
という“状態”を持っています。
この状態を正しく管理することが、
UI アプリの本質です。
「今の状態を探して外す」という発想が強い
- すべて remove する
よりも - 今 active のものだけ remove する
の方が効率的で、拡張性があります。
この発想は、
タブ切り替え以外の UI でも使われます。
4日目へのつなぎ
4日目からは、
- タブのデザインをもっとアプリらしくする
- アニメーションをつけて“切り替え感”を出す
- タブの数が増えても壊れないコードにする
- switchPage をさらに汎用的にする
という、“見た目と使いやすさ”を強化していきます。
今日の内容を理解できたあなたなら、
もう UI アプリの「状態管理」を扱えるレベルに来ています。
