GUIアプリを作ってみよう！JavaFXで動くボタン

みんなが普段触っているような「グラフィック」のあるアプリケーション、つまりGUI（Graphical User Interface）アプリをJavaで作ってみるよ！難しそうに聞こえるけど、JavaFXを使えば意外と簡単に作れちゃうんだ。

GUIってなに？なんで作るの？

普段パソコンやスマホを触っていると、ボタンを押したり、文字を入力したりするよね。ああいう絵や文字で操作できる画面がGUIだよ。コマンドを打ち込むCUI（Character User Interface）に比べて、直感的に操作できるのが特徴だね。

なんでGUIアプリを作るかって？それはもちろん、ユーザーにとって使いやすいアプリを提供するため！例えば、電卓アプリを考えてみて。数字をキーボードで打ち込んで計算するより、画面上のボタンをポチポチ押して計算できる方が便利だよね。

JavaFXってなに？

JavaFXは、JavaでGUIアプリを作るための強力なツールキットなんだ。昔は「Swing」っていうのが主流だったんだけど、JavaFXはもっとリッチな見た目のアプリを簡単に作れるように進化してるんだよ。アニメーションとか、CSSを使ったデザインなんかも得意だから、見た目にもこだわったアプリが作れるようになるよ！

とりあえず作ってみよう！

難しい話はこれくらいにして、さっそく簡単なGUIアプリを作ってみよう！今回は「ボタンを押すと文字が変わる」という、超シンプルなアプリを作るよ。

1. プロジェクトの準備

Eclipseを起動したら、まずはJavaFXプロジェクトを作ろう。

「File」→「New」→「Other…」を選択。
検索窓に「JavaFX」と入力して、「JavaFX Project」を選んで「Next」。
プロジェクト名は「MyFirstFXApp」とか、好きな名前にしてね。「Next」。
「Module-info.javaの作成」は今回はチェックしなくてOK。「Finish」をクリック。

これでJavaFXプロジェクトができたはず！「src」フォルダの下に「application」パッケージと、その中に「Main.java」っていうファイルが自動的に作られてるはずだよ。

2. コードを書いてみよう！

「Main.java」を開いてみて。すでに何やらゴチャゴチャ書いてあるけど、気にしなくて大丈夫。今回は最低限のコードで動かしてみるよ。

Java

package application;

import javafx.application.Application;
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.control.Button; // 追加！
import javafx.scene.layout.VBox;    // 追加！
import javafx.scene.text.Text;      // 追加！

public class Main extends Application {

    // アプリケーション起動時に最初に呼ばれるメソッド
    @Override
    public void start(Stage primaryStage) {
        try {
            // 画面に表示するテキスト
            Text message = new Text("ボタンを押してね！");

            // ボタンを作成
            Button button = new Button("押す");

            // ボタンがクリックされた時の処理を設定
            button.setOnAction(event -> {
                message.setText("ありがとう！"); // テキストを「ありがとう！」に変える
            });

            // 画面の部品を縦に並べるためのコンテナ
            VBox root = new VBox(10); // 10は部品間のスペース
            root.getChildren().addAll(message, button); // テキストとボタンを追加

            // シーンを作成（画面の大きさや背景など）
            Scene scene = new Scene(root, 300, 200); // rootを配置し、幅300、高さ200の画面

            // CSSを適用することもできるけど、今回はスキップ！
            // scene.getStylesheets().add(getClass().getResource("application.css").toExternalForm());

            // ステージにシーンを設定して表示
            primaryStage.setTitle("はじめてのJavaFXアプリ"); // ウィンドウのタイトル
            primaryStage.setScene(scene);
            primaryStage.show();

        } catch(Exception e) {
            e.printStackTrace();
        }
    }

    // メインメソッド：ここからアプリが起動するよ
    public static void main(String[] args) {
        launch(args); // JavaFXアプリケーションを起動
    }
}

コードの中に「追加！」ってコメントがあるところは、元々ないから手動で追加してね。

コードの解説

ちょっとだけコードの中身を見ていこうか。

import javafx.application.Application; など:
- これはJavaFXを使うために必要な「部品」を読み込んでるんだ。車の部品を工場に運んでくるイメージだね。
public class Main extends Application
- JavaFXのアプリを作る時は、Applicationっていうクラスを継承するお約束なんだ。
@Override public void start(Stage primaryStage)
- これがJavaFXアプリが起動した時に最初に動く場所だよ。
- Stageっていうのは、アプリ全体の「舞台」みたいなものだと思ってね。ウィンドウそのものだよ。
Text message = new Text("ボタンを押してね！");
- 画面に表示するテキストを作成してるよ。初期値は「ボタンを押してね！」だね。
Button button = new Button("押す");
- 「押す」って書かれたボタンを作成してるよ。
button.setOnAction(event -> { ... });
- これがめちゃくちゃ大事！「ボタンがクリックされたら、こういう処理をしてね」っていうのを設定してるんだ。
- message.setText("ありがとう！"); で、テキストの内容を「ありがとう！」に変えてるね。
VBox root = new VBox(10);
- VBoxは、部品を縦に並べてくれるレイアウトの部品だよ。他にも横に並べるHBoxとか、グリッド状に並べるGridPaneとか色々あるんだ。10は、部品と部品の間のスペースだよ。
root.getChildren().addAll(message, button);
- VBoxの中に、さっき作ったテキストとボタンを追加してるよ。
Scene scene = new Scene(root, 300, 200);
- Sceneは、画面の「場面」だね。どの部品を配置して、画面の大きさはどうするか、なんかを設定するよ。ここではrootを配置して、幅300、高さ200の画面にしてるね。
primaryStage.setScene(scene);
- 舞台（Stage）に場面（Scene）を設定してるよ。
primaryStage.show();
- これで画面が表示されるよ！
public static void main(String[] args) { launch(args); }
- これはJavaのプログラムが動く時に一番最初に呼ばれる「メインメソッド」ってやつ。JavaFXアプリを起動するためのおまじないだと思っておけばOK！

3. 実行してみよう！

コードが書けたら、いよいよ実行！Eclipseの上部にある緑色の再生ボタン（Runボタン）をクリックしてみて。

どうかな？「ボタンを押してね！」と書かれたウィンドウが表示されて、真ん中に「押す」ボタンがあるはず！そのボタンをポチッと押してみてごらん。

「ありがとう！」って表示が変わったかな？おめでとう！これで君は立派なGUIアプリ開発者の一歩を踏み出したよ！

もっと色々やってみよう！

今のままだとちょっとシンプルすぎるよね。いくつかカスタマイズのアイデアを教えるね。

・ボタンの数を増やしてみる

もう一つボタンを追加して、違うメッセージを表示させてみたり、色を変えてみたりするのも面白いよ。
例: 「こんにちは！」ボタン、「さようなら！」ボタン

・テキストボックスを追加してみる

Java

// ... importの追加 
import javafx.scene.control.TextField; // 追加！ 

// ... startメソッドの中 
TextField inputField = new TextField(); // テキスト入力欄を作成 
inputField.setPromptText("ここに名前を入力してね"); // ガイドテキストを設定 
Button greetButton = new Button("挨拶する"); 

greetButton.setOnAction(event -> { 
  String name = inputField.getText(); // テキスト入力欄から文字を取得 
  message.setText("こんにちは、" + name + "さん！");
}); 
root.getChildren().addAll(message, inputField, greetButton); // 追加

・ボタンの配置を変えてみる

HBoxを使えば横に並べられるし、BorderPaneとかGridPaneを使えばもっと複雑なレイアウトもできるよ。

CSSで見た目を変更してみる
- ウェブサイトを作る時みたいに、CSS（Cascading Style Sheets）を使ってボタンの色や文字のフォントを変えることもできるんだ。scene.getStylesheets().add(...)のコメントアウトを外して、application.cssをいじってみるのもいい経験になるよ。