7日目のゴールと今日やること
引用元は。なし（本教材はオリジナル解説です）
7日目のテーマは
「タブ切り替えアプリを“自分の作品”として完成させる」
ことです。
今日やることは次の3つです。
- これまで学んだ class 操作・表示切替・アクティブ管理を“全体として理解する”
- コードにコメントをつけて「説明できるコード」にする
- 自分なりのアレンジ（テーマカラー変更・アニメーション追加など）を加えて完成度を上げる
ここまで来たあなたは、もう「UI アプリを作れる人」です。
7日目はその実感を形にしていきます。
タブ切り替えアプリの「全体像」を言葉で説明できるようにする
タブ切り替えのストーリーを頭の中で再生する
あなたが作ってきたタブ切り替えアプリは、
ざっくり言うとこう動いています。
タブをクリックする
→ 今アクティブなタブとページを探して active を外す
→ クリックされたタブに active を付ける
→ 対応するページに active を付ける
→ CSS が active の有無で表示・非表示を切り替える
この流れを「コードを見ずに説明できる」ようになると、
あなたは UI アプリの仕組みを理解できています。
class 操作の本質をもう一度深掘りする
class は「見た目のスイッチ」
タブ切り替えアプリは、
JavaScript がやっていることはたったこれだけです。
- active を外す
- active を付ける
見た目の変化はすべて CSS が担当しています。
.page {
display: none;
opacity: 0;
}
.page.active {
display: block;
opacity: 1;
}
JavaScript は「どのスイッチを ON にするか」を決めているだけ。
この役割分担を理解すると、UI が一気に分かりやすくなります。
表示切替の仕組みを「CSS と JS の連携」で理解する
表示切替は CSS が担当している
JavaScript はページを消したり出したりしていません。
やっているのは「class を付け替える」だけです。
表示・非表示は CSS のルールで決まります。
.page→ 非表示.page.active→ 表示
つまり、
JavaScript は“どのページに active を付けるか”を決めているだけ
ということです。
深掘り：UI の本質は「状態管理」
タブ切り替えアプリは、
- どのタブがアクティブか
- どのページがアクティブか
という“状態”を持っています。
JavaScript はこの状態を管理し、
CSS がその状態に応じて見た目を変えています。
複数画面を「データで管理する」考え方を整理する
6日目で作ったデータ構造を振り返る
const tabData = [
{ id: "page1", label: "タブ1" },
{ id: "page2", label: "タブ2" },
{ id: "page3", label: "タブ3" }
];
この配列があることで、
- タブを増やすとき HTML を書き換えなくていい
- JavaScript だけで UI を生成できる
- アプリの拡張が簡単になる
というメリットが生まれました。
深掘り：データ駆動 UI の基礎
React や Vue などのフレームワークは、
すべて「データを元に UI を作る」仕組みです。
あなたが今学んでいるのは、
その“基礎の基礎”です。
アクティブ管理を「関数」で整理する
clearActive と setActive の役割を理解する
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");
}
この2つの関数は、
- clearActive → リセット
- setActive → セット
という役割を持っています。
深掘り：責務を分けるとコードが壊れにくい
1つの関数が複数の役割を持つと、
修正するときにバグが起きやすくなります。
clearActive と setActive のように
「1つの関数は1つの役割だけ」にすると、
コードが読みやすく、壊れにくくなります。
7日目の完成コード（コメント付き・説明できるコード）
JavaScript
// タブとページのデータ
const tabData = [
{ id: "page1", label: "タブ1" },
{ id: "page2", label: "タブ2" },
{ id: "page3", label: "タブ3" }
];
// HTML のコンテナを取得
const tabsContainer = document.querySelector(".tabs");
const pagesContainer = document.querySelector(".pages");
// タブを生成
tabData.forEach(item => {
const tab = document.createElement("div");
tab.classList.add("tab");
tab.dataset.target = item.id;
tab.textContent = item.label;
tabsContainer.appendChild(tab);
});
// ページを生成
tabData.forEach(item => {
const page = document.createElement("div");
page.classList.add("page");
page.id = item.id;
page.textContent = `${item.label} の内容です`;
pagesContainer.appendChild(page);
});
// 最初のタブとページをアクティブにする
document.querySelector(".tab").classList.add("active");
document.querySelector(".page").classList.add("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");
}
// アクティブを付ける関数
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);
}
// イベント委譲でタブクリックを処理
tabsContainer.addEventListener("click", (e) => {
const clickedTab = e.target.closest(".tab");
if (!clickedTab) return;
switchPage(clickedTab);
});
今日いちばん深く理解してほしいこと
UI アプリは「状態管理 × class 操作」でできている
タブ切り替えアプリは、
次の2つで成り立っています。
- どのタブがアクティブか（状態管理）
- active クラスを付け替える（class 操作）
この2つを理解できれば、
モーダル、アコーディオン、スライダーなど
ほとんどの UI が作れるようになります。
データで UI を作るとアプリが強くなる
タブを配列で管理し、
JavaScript で生成する構造は、
現代のフロントエンド開発の基礎です。
あなたはすでにその入り口に立っています。
7日間の学習を終えて
この1週間であなたは、
- class 操作
- 表示切替
- 複数画面の管理
- アクティブ管理
- 関数化
- イベント委譲
- データ駆動 UI
ここまで理解し、
タブ切り替えアプリを“自分で作れる”ようになりました。
最後にひとつだけ。
このタブ切り替えアプリ、
あなたならどんなテーマカラーやアニメーションを加えてみたいでしょう。
その「自分の色を足したくなる感覚」が、
もう立派な“アプリ開発者の感性”です。
