JavaFXの最低限 ― Stage・Scene・コントロールとFXML

導入

このコースでコードを書くのはほとんどViewModelから内側ですが、最後に接続するViewの読み方は知っておく必要があります。JavaFXの画面の骨組みと、代表的なコントロール、そして画面を宣言的に書くFXMLをざっと押さえましょう。ここは読み物です（JavaFXの画面はブラウザ内では動かせないので、手元のIDEで試してください）。

説明

JavaFXアプリの入れ物は3段構えです。

flowchart LR
    S["Stage<br/>（ウィンドウ）"] --> SC["Scene<br/>（中身1画面）"]
    SC --> N["レイアウト＋コントロール<br/>（VBox / Button / TextField …）"]

一番小さいJavaFXアプリはこれだけです。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.stage.Stage;

public class Main extends Application {
    @Override
    public void start(Stage stage) {
        stage.setTitle("タスク管理");
        stage.setScene(new Scene(new Label("Hello, JavaFX"), 400, 300));
        stage.show();
    }

    public static void main(String[] args) {
        launch(args);
    }
}

• Application を継承し、start(Stage) に画面の組み立てを書く
• Stage がウィンドウ、Scene がその中身、Scene の中に部品を1つ（普通はレイアウト）置く

よく使うコントロール

レイアウトは VBox（縦積み）・HBox（横並び）・BorderPane（上下左右＋中央）を覚えておけば、このコースの画面は組めます。

FXML ― 画面をXMLで宣言的に書く

Javaコードで画面を組み立てることもできますが、実務ではFXMLというXMLで書くのが主流です。見た目の記述とロジックが物理的に分かれるので、MVVMと相性がよいのです。

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox xmlns:fx="http://javafx.com/fxml" fx:controller="app.view.MainViewController"
      spacing="8" prefWidth="420">
    <HBox spacing="8">
        <TextField fx:id="titleField" promptText="新しいタスク" HBox.hgrow="ALWAYS" />
        <Button fx:id="addButton" text="追加" />
    </HBox>
    <ListView fx:id="taskList" prefHeight="240" />
    <Label fx:id="remainingLabel" text="残り 0 件" />
</VBox>

• タグ名がそのままクラス名（<Button> は javafx.scene.control.Button）
• fx:id を付けた部品は、Controller側の同名フィールドに @FXML で流し込まれる
• fx:controller で、この画面を担当するControllerクラスを指定する

Controller側はこう受け取ります。

package app.view;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.TextField;

public class MainViewController {
    @FXML private TextField titleField;
    @FXML private Button addButton;

    @FXML
    private void initialize() {
        // ここでViewModelと結ぶ（第7章でやります）
    }
}

この先の見通し

第7章まで、JavaFXのコードは一切書きません。ViewModelから内側を、テストだけを頼りに完成させます。第7章でようやくこのFXMLとControllerを書き、すでにテスト済みのViewModelにつなぐだけでアプリが動く、という体験をします。それがMVVMの実感しやすいご褒美です。

まとめ

• JavaFXは Stage（ウィンドウ）→ Scene（中身）→ コントロール の3段構え
• 画面はFXML（XML）で宣言的に書き、fx:id と @FXML でControllerとつなぐ
• このコースでは第7章まで画面を書かない。ViewModelから内側をテストで完成させてから接続する

次回: 第2章。アプリの核になるEntity、TaskItem を作り始めます。