UI Toolkit 基本4要素まとめチュートリアル（Unity 6対応）

2025年11月14日

（Label / TextField / Button / ListView を1つの記事で学ぶ）

Unity 6 では、UI Toolkit が新しい標準 UI として正式採用されました。

UI Builder を使うことで、コードを書かずに UI を視覚的に作成でき、uGUI より軽く、Flexbox によるレイアウトが圧倒的に扱いやすくなっています。

この記事では、実務・学習ともに使用頻度の高い 4つの基本UI要素 を1つのサンプルにまとめて解説します。

• Label（テキスト表示）
• TextField（ユーザー入力）
• Button（クリックで動作）
• ListView（リスト表示）

UI Toolkit を初めて学ぶ方向けに、UI Builder と C# の連携を中心に整理しています。

最初に学習してほしい記事

---

1. UXML に UI を配置する（UI Builder）

UI Builder のプレビュー領域（Viewport）に配置します。

---

① Label（name=“messageLabel”）

• 初期メッセージ：「ここにメッセージが表示されます」
• テキストをあとで C# から変更します。

---

② TextField（name=“inputField”）

• プレースホルダ：「名前を入力」
• ユーザー入力を取得します。

---

③ Button（name=“addButton”）

• text：「リストに追加」
• クリックイベントで ListView に項目を追加します。

---

④ ListView（name=“itemList”）

配置しただけでは「空のListView」なので、

C# から ItemsSource を設定して動的に表示させます。

---

2. UIController.cs を作成する（C# で動かす）

using UnityEngine;
using UnityEngine.UIElements;
using System.Collections.Generic;

public class UIController : MonoBehaviour
{
    Label messageLabel;
    TextField inputField;
    Button addButton;
    ListView itemList;

    // ListView に表示するデータ
    List<string> items = new List<string>();

    void OnEnable()
    {
        var doc = GetComponent<UIDocument>();
        var root = doc.rootVisualElement;

        // UXML の UI 要素を取得
        messageLabel = root.Q<Label>("messageLabel");
        inputField    = root.Q<TextField>("inputField");
        addButton     = root.Q<Button>("addButton");
        itemList      = root.Q<ListView>("itemList");

        // Button のクリックイベント登録
        addButton.clicked += OnAddButtonClicked;

        // ListView セットアップ
        itemList.makeItem  = () => new Label();
        itemList.bindItem  = (el, i) => (el as Label).text = items[i];
        itemList.itemsSource = items;
    }

    void OnAddButtonClicked()
    {
        var text = inputField.value;

        if (string.IsNullOrWhiteSpace(text))
        {
            messageLabel.text = "入力が空です。文字を入力してください。";
            return;
        }

        items.Add(text);
        itemList.Rebuild();

        messageLabel.text = $"追加しました：{text}";
        inputField.value = "";
    }
}

---

3. ListView の仕組み（簡単に理解する）

UI Toolkit の ListView は データバインディング式 です。

1. itemsSource … リストの中身（データ）
2. makeItem … UI の1行分を作る
3. bindItem … 1行にデータを紐づける

という構造になっています。

Unity 6 の ListView は軽量で高速なため、uGUI の ScrollView より快適に扱えます。

---

4. 実行して動作確認

Play を押すと：

1. TextField に入力
2. ボタンを押す
3. ListView に追加される
4. Label にメッセージが表示される

という流れになります。

---

5. 構成図

[UI Builder]
   main.uxml
      ├─ Label        (messageLabel)
      ├─ TextField    (inputField)
      ├─ Button       (addButton)
      └─ ListView     (itemList)

[Unity Scene]
   GameObject
      ├─ UIDocument (main.uxml)
      └─ UIController.cs

PanelSettings は前回のものを同じく使用します。

---

6. まとめ

• Label は label.text = “文字列" で更新可能
• TextField は inputField.value で取得
• Button は clicked += でイベント登録
• ListView は makeItem / bindItem / itemsSource の3要素で構築
• UI Toolkit は最初から日本語対応しやすく、デザインも調整しやすい
• uGUI より軽く、Flex レイアウトで複雑な画面も作りやすい

---