JavaFX 22 と Scene Builder 23 の最新情報と開発環境構築ガイド

2026年6月21日

スポンサードリンク

JavaFX の概要と最新情報

JavaFX は モジュール化された GUI フレームワーク で、JDK 21 以降とシームレスに連携します。モジュール単位で必要な機能だけを選んで組み込めるため、ランタイムサイズが小さく、保守性の高いデスクトップアプリを構築できます。

モジュール化：javafx.controls, javafx.fxml など個別に追加可能
JDK との互換性：OpenJFX は JDK のリリースサイクルに合わせて更新され、主要 OS（Windows, macOS, Linux）で同一の動作を保証
最新機能（JavaFX 22）
マルチスレッド描画最適化による滑らかなアニメーション
CSS カスタムプロパティ -fx-var-* の導入でテーマ管理が容易に
新しいコンテナ FlowPaneEx（Scene Builder と併用するとレスポンシブレイアウトが簡単）

注：バージョン番号は執筆時点の情報です。リリースノートを必ず確認してください。

開発環境の構築

必要なツール

このセクションでは、JavaFX アプリ開発に最低限必要なツールとそのインストール手順を示します。全て JDK 21 以上 が前提です。

ツール	用途	推奨バージョン（2026 年）
JDK (OpenJDK/Oracle)	Java 実行環境・コンパイル	21
ビルドツール	依存管理と自動ビルド	Maven 3.9 系、Gradle 8 系
IDE	コーディング・デバッグ支援	IntelliJ IDEA 2024, Eclipse 2025‑09 (e(fx)clipse)
Scene Builder	FXML の視覚的設計ツール	最新版（2026 年現在 23）

プロジェクト雛形の作成（Maven と Gradle）

以下では、Maven と Gradle の両方で JavaFX 22 を利用する最小構成を示します。javafx.version プロパティは一元管理し、バージョン変更が容易になるようにしています。

Maven 用 `pom.xml`

&lt;!-- pom.xml --&gt;
&lt;project xmlns=&quot;http://maven.apache.org/POM/4.0.0&quot;
         xmlns:xsi=&quot;http://www.w3.org/2001/XMLSchema-instance&quot;
         xsi:schemaLocation=&quot;http://maven.apache.org/POM/4.0.0
                             https://maven.apache.org/xsd/maven-4.0.0.xsd&quot;&gt;
    &lt;modelVersion&gt;4.0.0&lt;/modelVersion&gt;

    &lt;groupId&gt;com.example&lt;/groupId&gt;
    &lt;artifactId&gt;javafx-sample&lt;/artifactId&gt;
    &lt;version&gt;1.0.0&lt;/version&gt;

    &lt;!-- JavaFX のバージョンをプロパティで管理 --&gt;
    &lt;properties&gt;
        &lt;java.version&gt;21&lt;/java.version&gt;
        &lt;javafx.version&gt;22&lt;/javafx.version&gt;
        &lt;javafx.maven.plugin.version&gt;0.0.13&lt;/javafx.maven.plugin.version&gt;
    &lt;/properties&gt;

    &lt;dependencies&gt;
        &lt;!-- 必要モジュールだけを列挙 --&gt;
        &lt;dependency&gt;
            &lt;groupId&gt;org.openjfx&lt;/groupId&gt;
            &lt;artifactId&gt;javafx-controls&lt;/artifactId&gt;
            &lt;version&gt;${javafx.version}&lt;/version&gt;
        &lt;/dependency&gt;
        &lt;dependency&gt;
            &lt;groupId&gt;org.openjfx&lt;/groupId&gt;
            &lt;artifactId&gt;javafx-fxml&lt;/artifactId&gt;
            &lt;version&gt;${javafx.version}&lt;/version&gt;
        &lt;/dependency&gt;
    &lt;/dependencies&gt;

    &lt;build&gt;
        &lt;plugins&gt;
            &lt;!-- JavaFX アプリ実行用プラグイン --&gt;
            &lt;plugin&gt;
                &lt;groupId&gt;org.openjfx&lt;/groupId&gt;
                &lt;artifactId&gt;javafx-maven-plugin&lt;/artifactId&gt;
                &lt;version&gt;${javafx.maven.plugin.version}&lt;/version&gt;
                &lt;configuration&gt;
                    &lt;mainClass&gt;com.example.MainApp&lt;/mainClass&gt;
                &lt;/configuration&gt;
            &lt;/plugin&gt;
        &lt;/plugins&gt;
    &lt;/build&gt;
&lt;/project&gt;

<project xmlns="http://maven.apache.org/POM/4.0.0"

xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0

https://maven.apache.org/xsd/maven-4.0.0.xsd">

<groupId>com.example</groupId>

<artifactId>javafx-sample</artifactId>

<java.version>21</java.version>

<javafx.version>22</javafx.version>

<javafx.maven.plugin.version>0.0.13</javafx.maven.plugin.version>

</properties>

<groupId>org.openjfx</groupId>

<artifactId>javafx-controls</artifactId>

<version>${javafx.version}</version>

</dependency>

<groupId>org.openjfx</groupId>

<artifactId>javafx-fxml</artifactId>

<version>${javafx.version}</version>

</dependency>

</dependencies>

<build>

<groupId>org.openjfx</groupId>

<artifactId>javafx-maven-plugin</artifactId>

<version>${javafx.maven.plugin.version}</version>

<mainClass>com.example.MainApp</mainClass>

</configuration>

</plugin>

</plugins>

</build>

</project>

Gradle 用 `build.gradle`（Groovy DSL）

plugins {
    id 'application'
    id 'org.openjfx.javafxplugin' version '0.0.13'
}

repositories {
    mavenCentral()
}

java {
    toolchain {
        languageVersion = JavaLanguageVersion.of(21)
    }
}

// JavaFX のバージョンはプロパティで一元管理
def javafxVersion = '22'

javafx {
    version = javafxVersion
    modules = [ 'javafx.controls', 'javafx.fxml' ]
}

application {
    // エントリーポイントのクラスを指定
    mainClass = 'com.example.MainApp'
}

plugins {

id 'application'

id 'org.openjfx.javafxplugin' version '0.0.13'

}

repositories {

mavenCentral()

}

java {

toolchain {

languageVersion = JavaLanguageVersion.of(21)

}

// JavaFX のバージョンはプロパティで一元管理

def javafxVersion = '22'

javafx {

version = javafxVersion

modules = [ 'javafx.controls', 'javafx.fxml' ]

}

application {

// エントリーポイントのクラスを指定

mainClass = 'com.example.MainApp'

}

パス表記の統一ポイント
FXML や CSS のリソースは、ファイルが配置された classpath 上の位置から相対的に指定します。@ プレフィックスを付けると FXML がロードされているクラスローダーのルート からの相対パスになるため、以下のように書くと安全です。

&lt;VBox stylesheets=&quot;@/css/style.css&quot; ...&gt;

1 2	<VBox stylesheets="@/css/style.css" ...>

Scene Builder の導入と基本操作

ダウンロードとインストール

公式サイト（https://openjfx.io/）の「Scene Builder」セクションから OS に合わせたインストーラを取得します。表は主要プラットフォーム向けファイル名の例です。

OS	ダウンロードファイル
Windows	`scene-builder-23-windows-x64.exe`
macOS	`SceneBuilder-23.dmg`
Linux	`scene-builder-23-linux.tar.gz`

インストール手順は OS ごとに次の通りです。

Windows：実行ファイルをダブルクリックし、ウィザードに従うだけで完了。
macOS：.dmg を開き、Scene Builder.app を Applications フォルダへドラッグ。
Linux：tar -xzf scene-builder-23-linux.tar.gz → chmod +x bin/scene-builder → パスに追加すればターミナルから scene-builder と起動可能。

基本的なレイアウト作成手順

新規 FXML 作成 – File > New で空の FXML を生成。
コンテナ配置 – 左側パレットから AnchorPane, VBox, HBox などをドラッグ＆ドロップ。
子要素追加 – ボタンやラベル、テキストフィールドを必要に応じて配置。
プロパティ編集 – 右側の「Properties」タブで幅・高さ・ID・CSS クラスを設定。
リアルタイムプレビュー – 画面上部の Preview ボタンを押すと、実行時に近い UI が即座に表示されます。

Scene Builder は FXML を保存するたびに自動で更新されるため、IDE のビルドプロセスと併せて ホットリロード 的な体験が可能です。

FXML と CSS の基礎と連携手法

FXML の構文とコントローラの結びつけ方

FXML は XML 形式で UI 構造を記述し、fx:controller 属性で Java クラス（コントローラ）を紐付けます。以下は最小構成の例です。

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;?import javafx.scene.layout.VBox?&gt;
&lt;?import javafx.scene.control.Button?&gt;
&lt;?import javafx.scene.control.Label?&gt;

&lt;VBox xmlns=&quot;http://javafx.com/javafx/22&quot;
      xmlns:fx=&quot;http://javafx.com/fxml/22&quot;
      fx:controller=&quot;com.example.MainController&quot;
      spacing=&quot;12&quot; padding=&quot;20&quot;&gt;

    &lt;Label fx:id=&quot;msgLabel&quot; text=&quot;Hello, JavaFX!&quot;/&gt;
    &lt;Button text=&quot;クリック&quot; onAction=&quot;#handleClick&quot;/&gt;
&lt;/VBox&gt;

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.VBox?>

<?import javafx.scene.control.Button?>

<?import javafx.scene.control.Label?>

<VBox xmlns="http://javafx.com/javafx/22"

xmlns:fx="http://javafx.com/fxml/22"

fx:controller="com.example.MainController"

spacing="12" padding="20">

</VBox>

xmlns と xmlns:fx のバージョン番号は JavaFX 22 に合わせていますが、実行時に使用している JDK がサポートすれば自動的に適合します。
@ プレフィックスを付けたリソース指定（例：stylesheets="@/css/style.css"）は、FXML の場所から クラスパスルート への相対パスになるので、プロジェクト構成が変わっても安定します。

コントローラ側の実装例

package com.example;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class MainController {

    @FXML private Label msgLabel;   // FXML の fx:id と一致させる

    @FXML
    private void handleClick() {
        msgLabel.setText(&quot;ボタンがクリックされました&quot;);
    }
}

package com.example;

import javafx.fxml.FXML;

import javafx.scene.control.Label;

public class MainController {

@FXML private Label msgLabel; // FXML の fx:id と一致させる

@FXML

private void handleClick() {

msgLabel.setText("ボタンがクリックされました");

}

JavaFX 専用 CSS プロパティとカスタム変数

JavaFX は Web の CSS に似た構文を採用していますが、独自のプロパティが多数用意されています。代表的なものは以下です。

カテゴリ	プロパティ例	効果
背景・色	`-fx-background-color`	背景色を指定
文字	`-fx-font-size`, `-fx-text-fill`	フォントサイズ・文字色
ボーダー	`-fx-border-radius`, `-fx-border-width`	角丸・幅
カスタム変数（JavaFX 22）	`-fx-var-primary-color: #2196F3;`	後続のプロパティで `var(--primary-color)` のように参照可能

カスタム変数の使い方例

/* style.css */
.root {
    -fx-var-primary: #4CAF50;
    -fx-background-color: var(--primary);
}

.my-button {
    -fx-background-color: var(--primary);
    -fx-text-fill: white;
}

/* style.css */

.root {

-fx-var-primary: #4CAF50;

-fx-background-color: var(--primary);

}

.my-button {

-fx-background-color: var(--primary);

-fx-text-fill: white;

}

この機能により、テーマの切り替えや全体配色の統一がコード変更だけで簡単になります。

ハンズオン：シンプルな UI アプリを作る

プロジェクト構成例

src/
 └─ main/
     ├─ java/com/example/
     │   ├─ MainApp.java
     │   └─ MainController.java
     └─ resources/
         ├─ fxml/
         │   └─ sample.fxml
         └─ css/
             └─ style.css

src/

└─ main/

├─ java/com/example/

│ ├─ MainApp.java

│ └─ MainController.java

└─ resources/

├─ fxml/

│ └─ sample.fxml

└─ css/

└─ style.css

MainApp：Application.launch() でアプリを起動するエントリーポイント。
sample.fxml：Scene Builder で作成した UI 定義ファイル。
style.css：UI の外観を定義するスタイルシート。

MainApp.java

package com.example;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class MainApp extends Application {

    @Override
    public void start(Stage stage) throws Exception {
        var fxml = getClass().getResource(&quot;/fxml/sample.fxml&quot;);
        var root = FXMLLoader.load(fxml);
        stage.setScene(new Scene(root));
        stage.setTitle(&quot;JavaFX ハンズオンサンプル&quot;);
        stage.show();
    }

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

package com.example;

import javafx.application.Application;

import javafx.fxml.FXMLLoader;

import javafx.scene.Scene;

import javafx.stage.Stage;

public class MainApp extends Application {

@Override

public void start(Stage stage) throws Exception {

var fxml = getClass().getResource("/fxml/sample.fxml");

var root = FXMLLoader.load(fxml);

stage.setScene(new Scene(root));

stage.setTitle("JavaFX ハンズオンサンプル");

stage.show();

}

public static void main(String[] args) {

launch(args);

}

sample.fxml（Scene Builder で作成、手動編集例）

&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;
&lt;?import javafx.scene.layout.VBox?&gt;
&lt;?import javafx.scene.control.*?&gt;

&lt;VBox xmlns=&quot;http://javafx.com/javafx/22&quot;
      xmlns:fx=&quot;http://javafx.com/fxml/22&quot;
      fx:controller=&quot;com.example.MainController&quot;
      stylesheets=&quot;@/css/style.css&quot;
      spacing=&quot;12&quot; padding=&quot;20&quot;&gt;

    &lt;Label fx:id=&quot;msgLabel&quot; text=&quot;ようこそ！&quot;/&gt;
    &lt;TextField fx:id=&quot;nameField&quot; promptText=&quot;名前を入力してください&quot;/&gt;
    &lt;Button text=&quot;挨拶する&quot;
            styleClass=&quot;my-button&quot;
            onAction=&quot;#sayHello&quot;/&gt;
&lt;/VBox&gt;

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.VBox?>

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

<VBox xmlns="http://javafx.com/javafx/22"

xmlns:fx="http://javafx.com/fxml/22"

fx:controller="com.example.MainController"

stylesheets="@/css/style.css"

spacing="12" padding="20">

<Button text="挨拶する"

styleClass="my-button"

onAction="#sayHello"/>

</VBox>

style.css（カスタムテーマ例）

/* style.css */
.my-button {
    -fx-background-color: #2196F3;
    -fx-text-fill: white;
    -fx-font-weight: bold;
    -fx-padding: 8 16;
}
#msgLabel {
    -fx-font-size: 1.4em;
    -fx-text-fill: #555;
}
.text-field {
    -fx-border-color: #CCCCCC;
    -fx-padding: 6;
}

/* style.css */

.my-button {

-fx-background-color: #2196F3;

-fx-text-fill: white;

-fx-font-weight: bold;

-fx-padding: 8 16;

}

#msgLabel {

-fx-font-size: 1.4em;

-fx-text-fill: #555;

}

.text-field {

-fx-border-color: #CCCCCC;

-fx-padding: 6;

}

MainController.java

package com.example;

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

public class MainController {

    @FXML private Label msgLabel;
    @FXML private TextField nameField;

    /** 「挨拶する」ボタンがクリックされたときに呼び出される */
    @FXML
    private void sayHello() {
        String name = nameField.getText().trim();
        if (name.isEmpty()) {
            msgLabel.setText(&quot;名前を入力してください&quot;);
        } else {
            msgLabel.setText(name + &quot; さん、こんにちは！&quot;);
        }
    }
}

package com.example;

import javafx.fxml.FXML;

import javafx.scene.control.Label;

import javafx.scene.control.TextField;

public class MainController {

@FXML private Label msgLabel;

@FXML private TextField nameField;

/** 「挨拶する」ボタンがクリックされたときに呼び出される */

@FXML

private void sayHello() {

String name = nameField.getText().trim();

if (name.isEmpty()) {

msgLabel.setText("名前を入力してください");

} else {

msgLabel.setText(name + " さん、こんにちは！");

}

開発サイクルとデバッグのコツ

作業	推奨設定・操作
FXML の変更	Scene Builder で保存 → IDE が自動ビルド（IntelliJ: `Ctrl+F9`、Eclipse: 「自動ビルド」有効）
CSS の調整	`style.css` を編集後、アプリを再起動せずに FXML のプレビューで即時反映を確認
実行エラー対策	「FXML ローディング例外」：クラス名・パッケージが正しいか、`@FXML` フィールドが存在するか確認 `stylesheets` のパスミス：`@/css/style.css` のように先頭スラッシュを付けて classpath ルートから参照
ホットリロード	`--add-modules=javafx.controls,javafx.fxml` オプションでモジュールを明示し、IntelliJ の「Make Project」だけで UI が再描画されることがあります

まとめ

JavaFX 22 は JDK 21+ と完全互換で、モジュール単位の依存管理が可能です。
Maven または Gradle を使えば数行の設定で開発環境を整えられます。
Scene Builder による視覚的レイアウト設計と、FXML・CSS の組み合わせでロジックとデザインをきれいに分離できます。
本稿のハンズオン例をベースに、自分好みの UI コンポーネントやテーマを追加してみてください。

次のステップ：公式サンプル（https://github.com/openjfx/samples）をクローンし、独自機能（テーブルビュー、グラフ、マルチスレッドタスク）に挑戦すると、実務で使えるスキルがさらに磨かれます。

スポンサードリンク

-JavaFX

comment コメントをキャンセル

: JavaFX

JavaFX 2026新機能とOpenJFX/SDK比較ガイド

JavaFX 2026年の3Dエンジン強化やCSS拡張機能、OpenJFXとJavaFX SDKの技術的違いを解説。Red Hatサポート状況や最新SDK導入手順も紹介。

SwiftUI カスタムコンポーネントの設計・実装方法 | 実践ガイド

Tauri v2でモバイルアプリ開発を始める手順と設定ガイド

JavaFX 22 と Scene Builder 23 の最新情報と開発環境構築ガイド

JavaFX の概要と最新情報

開発環境の構築

必要なツール

プロジェクト雛形の作成（Maven と Gradle）

Maven 用 pom.xml

Gradle 用 build.gradle（Groovy DSL）

Scene Builder の導入と基本操作

ダウンロードとインストール

基本的なレイアウト作成手順

FXML と CSS の基礎と連携手法

FXML の構文とコントローラの結びつけ方

コントローラ側の実装例

JavaFX 専用 CSS プロパティとカスタム変数

ハンズオン：シンプルな UI アプリを作る

プロジェクト構成例

MainApp.java

sample.fxml（Scene Builder で作成、手動編集例）

style.css（カスタムテーマ例）

MainController.java

開発サイクルとデバッグのコツ

まとめ

JavaFX 22 と Scene Builder 23 の最新情報と開発環境構築ガイド

Maven 用 `pom.xml`

Gradle 用 `build.gradle`（Groovy DSL）