【たぶ】

タブ とは?

💡 複数のコンテンツを「切り替えて表示する」UI部品、ブラウザタブが典型例
📌 このページのポイント
タブUI要素の概念 ブラウザのタブ タブ1 タブ2 タブ3 タブ1のコンテンツ 選択中のタブの内容を表示 他のタブは非表示 アプリのタブバー アプリ画面 Home 検索 通知 設定 タブのメリット 画面遷移なしで切り替え 情報の整理・分類に最適 タブの種類 上部タブ(ブラウザ・設定画面) 下部タブバー(モバイルアプリ)
タブUI要素のイメージ
ひよこ ひよこ

タブって何?

ペンギン先生 ペンギン先生

複数のコンテンツを同じ場所に重ねて、見出し(タブ)をクリックして切り替えるUIブラウザのタブ(複数のページを切り替える)・VSCodeのタブ(複数のファイルを切り替える)・設定画面の「一般」「セキュリティ」「詳細」などがタブの典型例。

ひよこ ひよこ

タブ文字ってUIのタブと別物なの?

ペンギン先生 ペンギン先生

別物。タブ文字(\t)はキーボードのTabキーで入力される空白文字の一種。インデントや、TSV(Tab-Separated Values)ファイルの区切り文字に使われる。プログラムのインデントにスペースを使うかタブ文字を使うかは歴史的な論争で、最近はspaces派が多数。

ひよこ ひよこ

ブラウザタブが重くなるのはなぜ?

ペンギン先生 ペンギン先生

各タブは独立したプロセス(またはスレッド)で動くため、タブが増えるとメモリと CPU消費が増える。Chromeは1タブあたり数十〜数百MBのメモリを使うことも。タブを閉じるとそのメモリが解放される。「タブを大量に開く癖」があるとPCが重くなる原因になる。

ひよこ ひよこ

タブキーってインデント以外に使い道あるの?

ペンギン先生 ペンギン先生

Webページのフォームでは、Tabキーで入力欄を順番に移動できるよ。これを「タブフォーカス」と言って、キーボードだけで操作する人(アクセシビリティ)にとって重要な機能なんだ。Web開発者はtabindexという属性でフォーカスの順序を制御できるよ。

ひよこ ひよこ

ブラウザのタブをグループ分けできるって聞いたけど?

ペンギン先生 ペンギン先生

Chromeにはタブグループ機能があって、色付きのラベルでタブをまとめられるよ。「仕事」「調査」「個人」のようにグループ化すると整理しやすい。さらに最近はタブを別のウィンドウに分離したり、タブグループを保存してまとめて開き直したりもできる。タブ管理は地味だけど生産性に直結するから、使いこなすと作業効率が全然違うよ。

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
タブって出てきたら「複数コンテンツを切り替えて表示するUI部品(ブラウザタブ等)」または「水平タブ文字(\t)」と思えばOK!
📖 おまけ:英語の意味
「Tab」 = つまみ・小さな突起
💬 ファイルを整理するタブ(インデックスの突起した部分)から転用。UIのタブはそのイメージ。タブ文字はタイプライターのタブストップ機能(一定間隔で文字位置を揃える)から来ている
← 用語集にもどる