6日目のゴールと今日やること
引用元は。なし（本教材はオリジナル解説です）
6日目のテーマは
「タブ切り替えアプリを“データで管理できるアプリ”に進化させる」
ことです。
1〜5日目であなたは、
- class の付け替えで UI を切り替える
- active クラスで表示・非表示を管理する
- 今アクティブなタブだけを外す効率的な方法
- 関数化でコードを整理する
- イベント委譲でタブ追加に強い構造を作る
ここまで理解できています。
6日目はここに、
- タブとページを「データ構造」で管理する
- JavaScript でタブを動的に生成する
- 複数画面を“コードだけで増やせる”仕組みを作る
- アクティブ管理をより抽象化する
という、“アプリとしての拡張性”を加えていきます。
タブ切り替えアプリを「データで管理する」発想
HTML にタブを書き続けるのは限界がある
これまでのタブは、HTML にこう書いていました。
<div class="tab" data-target="page1">タブ1</div>
タブが3つならいいですが、
10個、20個と増えると管理が大変です。
そこで登場するのが
「データ構造でタブを管理する」
という考え方です。
タブ情報を「配列」で持つ
まずはタブの情報を JavaScript に書く
const tabData = [
{ id: "page1", label: "タブ1" },
{ id: "page2", label: "タブ2" },
{ id: "page3", label: "タブ3" }
];
ここで重要なのは、
- id → 対応するページの ID
- label → タブに表示する文字
という構造になっていることです。
深掘り：データ構造で管理するメリット
- タブを増やすとき HTML を触らなくていい
- データを変更するだけで UI が変わる
- コードの再利用性が高まる
- 大規模アプリの基本構造に近づく
UI を「データで管理する」発想は、
React や Vue などのフレームワークにも通じる重要な考え方です。
タブとページを「JavaScript で自動生成」する
HTML を最小限にする
HTML は空のコンテナだけにします。
<div class="tabs"></div>
<div class="pages"></div>
JavaScript でタブを生成する
const tabsContainer = document.querySelector(".tabs");
tabData.forEach(item => {
const tab = document.createElement("div");
tab.classList.add("tab");
tab.dataset.target = item.id;
tab.textContent = item.label;
tabsContainer.appendChild(tab);
});
ページも生成する
const pagesContainer = document.querySelector(".pages");
tabData.forEach(item => {
const page = document.createElement("div");
page.classList.add("page");
page.id = item.id;
page.textContent = `${item.label} の内容です`;
pagesContainer.appendChild(page);
});
深掘り：createElement の重要性
document.createElement() は
「JavaScript で HTML を作る」ための基本技術です。
これを使えるようになると、
- タブ
- ページ
- リスト
- カード
- モーダル
など、あらゆる UI を動的に生成できます。
アクティブ管理を「データに基づいて」行う
初期状態を設定する
最初のタブをアクティブにします。
document.querySelector(".tab").classList.add("active");
document.querySelector(".page").classList.add("active");
イベント委譲で切り替え
tabsContainer.addEventListener("click", (e) => {
const clickedTab = e.target.closest(".tab");
if (!clickedTab) return;
switchPage(clickedTab);
});
switchPage は昨日の関数をそのまま使える
function switchPage(tab) {
const targetId = tab.dataset.target;
clearActive();
setActive(tab, targetId);
}
6日目の完成コード（動的生成＋データ管理）
JavaScript
const tabData = [
{ id: "page1", label: "タブ1" },
{ id: "page2", label: "タブ2" },
{ id: "page3", label: "タブ3" }
];
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");
// イベント委譲
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);
}
今日いちばん深く理解してほしいこと
UI を「データで管理する」発想がアプリ開発の本質
タブ切り替えアプリは、
データ構造（配列）を使うことで、
- タブ追加が簡単
- コードが短くなる
- HTML を汚さない
- 拡張性が高い
という“アプリらしい構造”になります。
これは、
React / Vue / Svelte などの
モダンフロントエンドの基礎そのものです。
JavaScript で HTML を生成できると世界が広がる
createElement
appendChild
dataset
classList
これらを使いこなせると、
あなたはもう「UI を自分で作れる人」です。
7日目へのつなぎ
7日目は最終日。
- コード全体を整理して「自分の言葉で説明できる」ようにする
- コメントをつけて「他人に渡せるコード」にする
- 自分なりのアレンジ（アイコン、アニメーション、テーマカラー）を追加する
という、“作品として仕上げる”段階に入ります。
ここまで来たあなたは、
もう立派に「UI アプリを作れる人」です。
