Godot入門：TabContainerの使い方と活用法

はじめに
TabContainerとは？
このノードを使うべき場面
主なプロパティと機能
もっと使いこなす：カスタマイズできるパラメータ
1. タブにアイコンを設定するコード例
2. タブを動的に無効化・有効化する例
まとめ
シリーズ：Godot 4 ノード解説

はじめに

設定画面やキャラクターステータス画面など、複数のカテゴリにわかれた情報を1つの画面にまとめたい場面があります。TabContainer（タブコンテナ）を使えば、タブを切り替えるだけで関連する情報をすっきり整理できます。

この記事では、TabContainerの役割と基本的な使い方、よく触るプロパティの調整方法を紹介します。

TabContainerとは？

TabContainer は 複数のタブを持つUIコンテナです。タブのヘッダーをクリックすると、対応する子ノードだけが表示される仕組みになっています。

ブラウザのタブをイメージするとわかりやすいです。複数のページを開きながら、見たいタブをクリックして切り替えるあの感覚です。

TabContainer は Container → Control → CanvasItem → Node という継承ツリーを持ちます。直接の親クラスは Container で、子ノードのレイアウトを自動的に管理します。追加した子ノードの名前がそのままタブのラベルになる点が特徴的です。

このノードを使うべき場面

設定画面：「グラフィック」「サウンド」「操作」などのカテゴリ別に設定項目を分けて整理したいとき
キャラクターステータス画面：「ステータス」「スキル」「装備」を1画面にまとめてタブで切り替えるとき
インベントリ・アイテム管理：「武器」「防具」「道具」などのカテゴリを分けて表示するとき
マルチページのチュートリアル：説明をページごとにまとめてタブナビゲーションで進めるとき
デバッグ・開発ツール用UI：複数の情報パネルをコンパクトにまとめて素早く切り替えたいとき

別のノードが適切な場面：

シンプルなページ切り替えでタブヘッダーが不要 → Control + 表示切り替えスクリプト
横スクロールで切り替えたい → SwipeContainer や独自実装

主なプロパティと機能

プロパティ / メソッド	役割	使用例
`current_tab`	現在選択されているタブのインデックス（0始まり）	スクリプトからタブを切り替える
`tab_alignment`	タブヘッダーの配置（左・中央・右）	デザインに合わせて調整
`tabs_visible`	タブヘッダーの表示/非表示	スクリプトのみで切り替える場合に非表示にする
`clip_tabs`	タブが多い場合に省略表示するか	タブが多いUIで見た目を整える
`get_tab_count()`	タブ（子ノード）の数を返す	動的なタブ操作の前に件数確認
`set_tab_title(tab_idx, title)`	指定インデックスのタブタイトルを変更	子ノード名と別のラベルにしたいとき
`set_tab_disabled(tab_idx, disabled)`	タブを無効化（グレーアウト）する	条件に応じてタブをロックするとき

スクリプトからタブを切り替える基本例：

@onready var tab_container = $TabContainer

func _ready():
    # 最初から2番目のタブ（インデックス1）を表示する
    tab_container.current_tab = 1

func switch_to_settings():
    # "Settings" という名前の子ノードのタブへ移動
    for i in tab_container.get_tab_count():
        if tab_container.get_tab_title(i) == "Settings":
            tab_container.current_tab = i
            break

タブが切り替わったときに処理を実行するシグナル：

func _ready():
    tab_container.tab_changed.connect(_on_tab_changed)

func _on_tab_changed(tab_index: int):
    print("タブが切り替わりました: ", tab_index)
    # 切り替え時に各タブのコンテンツを更新するなど

もっと使いこなす：カスタマイズできるパラメータ

まずは基本を動かしてみてから、余裕が出たら試してみてください。

パラメータ	変更すると何が変わるか	設定場所
`current_tab`	アプリ起動時に最初に表示するタブを指定できる。インスペクターで変更可能	インスペクター / スクリプト
`tab_alignment`	`LEFT`・`CENTER`・`RIGHT` の3種類。デザインに合わせてタブを揃える	インスペクター
`tabs_visible`	`false` にするとタブヘッダーが消え、スクリプトだけで切り替えを制御できる。独自タブUIを作りたいときに便利	インスペクター / スクリプト
`set_tab_icon()`	タブにアイコン画像を追加。テキストだけでなく視覚的なわかりやすさが増す	スクリプト
テーマ（Theme）	タブヘッダーの色・フォント・パディングをThemeリソースでまとめて変更できる。ゲーム全体のUIと統一するときに活用	インスペクター → Theme

タブにアイコンを設定するコード例

func _ready():
    var icon = preload("res://assets/icons/settings_icon.png")
    # インデックス0のタブにアイコンを設定
    $TabContainer.set_tab_icon(0, icon)

タブを動的に無効化・有効化する例

func lock_skill_tab():
    # プレイヤーが条件を満たすまでスキルタブをロック
    $TabContainer.set_tab_disabled(1, true)

func unlock_skill_tab():
    $TabContainer.set_tab_disabled(1, false)