JavaFXで業務用デスクトップアプリを作る方法【モダンUI対応】

はじめに

業務で使えるデスクトップアプリケーションをJavaで構築したい場合、JavaFXは非常に有力な選択肢です。Swingよりも洗練されたUIが作れるうえ、FXMLやCSSを用いた設計で保守性にも優れています。

本記事では以下のポイントを押さえて、JavaFXで業務アプリを構築する手順を解説します。

JavaFXの導入方法
FXMLによるUI設計
モダンなUI構成
実用的な業務画面の例

JavaFXとは？

JavaFXは、JavaでGUIアプリケーションを開発するためのフレームワークで、次のような特徴があります。

CSSやFXMLを使ったUI構築が可能
SceneBuilderなどのGUIエディタに対応
モダンなUI部品（タブ、テーブル、グラフ等）が標準搭載

開発環境の準備

1. JDKのインストール（Java 11以上推奨）

2. JavaFX SDKのダウンロード

公式サイト（https://gluonhq.com/products/javafx/）よりOSに合わせてJavaFX SDKをダウンロードします。

3. IntelliJ IDEAやEclipseへの設定（例：IntelliJ）

プロジェクト構造 > Libraries にJavaFX SDKを追加
VMオプションに以下を指定

--module-path <JavaFXのlibパス> --add-modules javafx.controls,javafx.fxml

シンプルな画面の作成（FXML使用）

FXMLファイル（MainView.fxml）

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

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

<BorderPane xmlns:fx="http://javafx.com/fxml" fx:controller="sample.MainController">
  <top>
    <ToolBar>
      <Button text="新規" onAction="#handleNew" />
      <Button text="保存" onAction="#handleSave" />
    </ToolBar>
  </top>
  <center>
    <TableView fx:id="table">
      <columns>
        <TableColumn text="ID" fx:id="idCol"/>
        <TableColumn text="名前" fx:id="nameCol"/>
      </columns>
    </TableView>
  </center>
</BorderPane>

コントローラー（MainController.java）

package sample;

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

public class MainController {
  @FXML private TableView<?> table;
  @FXML private TableColumn<?, ?> idCol;
  @FXML private TableColumn<?, ?> nameCol;

  public void handleNew() {
    System.out.println("新規ボタンが押されました");
  }

  public void handleSave() {
    System.out.println("保存ボタンが押されました");
  }
}

起動クラス（MainApp.java）

package sample;

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

public class MainApp extends Application {
  @Override
  public void start(Stage stage) throws Exception {
    BorderPane root = FXMLLoader.load(getClass().getResource("MainView.fxml"));
    Scene scene = new Scene(root, 600, 400);
    stage.setTitle("業務アプリ例");
    stage.setScene(scene);
    stage.show();
  }

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

モダンなUI構成の工夫

JavaFXはCSSによるスタイリングにも対応しています。

CSS例（style.css）

.button {
  -fx-background-color: #1976d2;
  -fx-text-fill: white;
}

.table-view {
  -fx-border-color: #cccccc;
}

FXMLに以下を追加することでスタイル適用が可能：

<?import javafx.scene.Scene?>
<Scene stylesheets="@style.css">

よく使う業務用UI部品

部品	説明
TableView	データ表形式の表示が可能
TabPane	複数画面の切り替えに便利
DatePicker	日付入力に便利
FileChooser	ファイル選択ダイアログ