1日目のゴールと今日やること
引用元は。なし（本教材はオリジナル解説です）
1日目のテーマは
「タブ切り替えアプリの“いちばん小さな仕組み”を理解する」
ことです。
タブ切り替えアプリとは、
「ボタン（タブ）を押すと、対応する画面だけが表示される」
という、Webアプリでよく見る仕組みです。
今日の目標は次の5つです。
- class（クラス）の付け替えで見た目を変える
- 表示・非表示を切り替える
- 複数画面を管理する
- どのタブがアクティブかを管理する
- JavaScript で HTML を操作する感覚をつかむ
ここを押さえると、2日目以降が一気に楽になります。
タブ切り替えアプリの「全体像」をイメージする
まずは日本語で動きを理解する
タブ切り替えアプリは、
ざっくり言うとこう動きます。
タブをクリックする
→ すべての画面を非表示にする
→ クリックされたタブに対応する画面だけを表示する
→ タブの見た目も「選択中」に変える
この「見た目の切り替え」を実現するのが
class の付け替え です。
class を使った「見た目の切り替え」を理解する
class は「見た目のラベル」
HTML の class は、
「この要素はこういう見た目にするよ」というラベルです。
例として、
アクティブなタブにだけ色をつけたい場合、
.tab {
padding: 10px;
cursor: pointer;
}
.active {
background-color: #4caf50;
color: white;
}
このように CSS を書いておき、
JavaScript で class を付け替えることで、
タブの見た目を変えられます。
classList を使うと付け替えが簡単
JavaScript では、
class の操作に classList を使います。
element.classList.add("active"); // active を追加
element.classList.remove("active"); // active を削除
この2つを使いこなすだけで、
タブ切り替えの仕組みが作れます。
表示・非表示の切り替えを理解する
CSS の display を使う
画面の表示・非表示は、
CSS の display を使います。
.page {
display: none;
}
.page.active {
display: block;
}
つまり、
- ふだんは非表示（display: none）
- active がついたときだけ表示（display: block）
という仕組みです。
深掘り：なぜ display を使うのか？
display を使うと、
- 完全に見えなくなる
- 画面上のスペースも消える
- レイアウトが崩れない
というメリットがあります。
opacity や visibility では
「見えないけど場所はある」状態になるので、
タブ切り替えには display が最適です。
HTML を作って「複数画面」を用意する
タブと画面をセットで作る
まずは HTML を用意します。
<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>
ここで重要なのは、
- タブには
data-targetで「どのページを開くか」を書く - ページには id をつけておく
- 最初はタブ1とページ1に active をつけておく
という3点です。
JavaScript で「タブをクリックしたら画面を切り替える」
まずはタブを全部取得する
const tabs = document.querySelectorAll(".tab");
const pages = document.querySelectorAll(".page");
これで、
タブとページをまとめて扱えるようになります。
タブにクリックイベントをつける
tabs.forEach(tab => {
tab.addEventListener("click", () => {
const target = tab.dataset.target;
switchPage(target, tab);
});
});
ここでのポイントは、
dataset.targetで data-target の値を取得できる- クリックされたタブと、開くべきページを switchPage に渡す
という流れです。
ページ切り替えの本体 switchPage を作る
すべてのタブとページから active を外す
function switchPage(targetId, clickedTab) {
tabs.forEach(t => t.classList.remove("active"));
pages.forEach(p => p.classList.remove("active"));
これで、
「いったん全部リセット」できます。
クリックされたタブに active をつける
clickedTab.classList.add("active");
対応するページに active をつける
const page = document.getElementById(targetId);
page.classList.add("active");
}
これで、
タブとページが連動して切り替わります。
1日目のミニ完成版コード
HTML
<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
.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 target = tab.dataset.target;
switchPage(target, tab);
});
});
function switchPage(targetId, clickedTab) {
tabs.forEach(t => t.classList.remove("active"));
pages.forEach(p => p.classList.remove("active"));
clickedTab.classList.add("active");
const page = document.getElementById(targetId);
page.classList.add("active");
}
今日いちばん深く理解してほしいこと
class の付け替えが UI の基本
タブ切り替えに限らず、
Webアプリの UI はほとんどが
「class を付ける → 見た目が変わる」
という仕組みで動いています。
アニメーション
モーダル表示
メニューの開閉
全部この考え方です。
「いったん全部リセットして、必要なものだけ active にする」
タブ切り替えの本質はこれです。
- すべてのタブから active を外す
- すべてのページから active を外す
- クリックされたタブとページだけ active をつける
この3ステップを理解すると、
複雑な UI も怖くなくなります。
2日目へのつなぎ
2日目からは、
- タブのデザインを整える
- アニメーションをつける
- タブの数を増やしても動くようにする
- コードを関数化して読みやすくする
という、“アプリとしての完成度”を上げていきます。
今日の内容は、
タブ切り替えアプリの「心臓部分」です。
ここを理解できたあなたなら、
もう UI アプリの世界に踏み込んでいます。
