JavaFX15を導入してVSCodeでGUI開発を行う

# 目的
JavaFX(ver.15)SDKを導入してVSCodeでGUI開発を行うための環境構築メモです。

# 前提条件
VSCodeでJava開発ができることが前提です。
そのためには次の2つが必要です。

* JDK(ver.15。少なくともver.11)のインストール及びJAVA_HOME・PATHの指定
* VSCode(拡張機能Java Extension Packの導入、VSCode上のJAVA_HOMEの指定)

この環境構築の方法については別途解説していますので、こちらをご参照ください。
[Java15の導入とVSCode環境設定](https://qiita.com/kazushi47/items/58e00d0ea6513e067a02)

# JavaFX SDKの導入
では早速JavaFXのSDKを導入していきましょう。

> **SDKを導入する理由**
> 以前はJDKにJavaFXが含まれていましたが、現在はJDKから削除されています。
> 従ってJavaFXのSDKを別途導入する必要があります。

## SDKのダウンロード
こちらのページからダウンロードします。
https://gluonhq.com/products/javafx/

今回はLatestである`JavaFX SDK15.0.1`をダウンロードします。
更に筆者はWindows10 64bitの環境なので`Windows x64`のものを選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/bc0592aa-1486-d805-3264-607f2474f866.png)

## SDKの配置
ダウンロード後はzipを解凍してください。
更に解凍したフォルダごとわかりやすい場所に移します。
筆者は`C:\Program Files\`の配下に移動しました。

# VSCodeの設定
JavaFX SDKの導入が終わりましたので、続いてVSCodeの設定に入っていきます。

## 諸注意
今回紹介するVSCodeの設定はこれから作成するJavaプロジェクト毎に行う必要があります。
一回きりの設定ではないのでご留意ください。

## 動作確認用のJavaプロジェクトの作成
確認用でVSCode上でJavaプロジェクトを作成します。
あらかじめJava開発の設定が施されているVSCodeで行ってください。

`Ctrl+Shift+P`キーを同時押しで次の画面を表示させます。
続いて`Java`と入力してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/fc3a2ac2-bc35-0b0c-963b-895aac4ba167.png)
するとこのように`Java:Create Java Project...`と表示されますので選択された状態で`Enter`キーを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/fa164cc8-e951-d359-d6ba-10fb166d8cd5.png)
次にこのように使用するビルドツールについて聞かれます。
今回はビルドツールは使用しないので`No build tools`を選択し`Enter`キーを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/9d3a2d0a-f8b6-d418-8389-d23ccd1303e3.png)
最後にプロジェクト名を聞かれます。
プロジェクト名を入力して`Enter`キーです。
これでJavaプロジェクトが作成されます。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/c22965e3-d31c-47a1-fc47-a6c38685f28c.png)
このように作成されました。
srcというフォルダに初めからApp.javaというJavaファイルが入っています。
これを開いた状態で右上の▶実行ボタンを押してみましょう。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/48e348de-8446-12a9-6ed2-71b17cfe18cf.png)
下部にターミナルが出現し実行結果が出力されていれば成功です。

## JavaFXライブラリをプロジェクトに追加
作成したプロジェクトの画面で以下の「Referenced Libraries」の`+`を選択します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/6f925fb1-0cb9-d711-113b-236e4ad87ddd.png)

するとファイル選択画面になりますので、先程導入したJavaFX SDKのフォルダまで遷移します。
SDKのフォルダに`lib`というフォルダがありますのでその中のすべての.jarファイルを選択して下さい。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/d29e9e60-2539-9de3-ada4-9beb3b3193e5.png)

これでJavaFXライブラリをプロジェクトに追加することができました。
この時、**VSCodeの再起動を行うことをお勧めします**。
再起動を行うことでライブラリの追加が正確に適用されているはずです。

## ビルドの設定
> ご存じの通り、Javaの実行にVSCodeなどのエディタを使用せずコマンドラインで実行するには`javac`や`java`コマンドを用います。
> その際にJavaFXとして実行させるためには以下のコマンドを用います。
> 
> ```shell
> javac --module-path "<JavaFXのlibのパス>" --add-modules javafx.controls,javafx.fxml <.javaファイル名>.java
> ````
> 
> ```shell
> java --module-path "<JavaFXのlibのパス>" --add-modules javafx.controls,javafx.fxml <.javaファイル名>
> ```
>
> このように、単に実行するだけではなくJavaFXモジュールを一緒に呼んであげる必要があります。

なぜ実行コマンドをわざわざ紹介したのかというと、**VSCodeでも同様に実行時にJavaFXモジュールを呼んであげる必要がある**からです。

このように実行時にモジュールを呼ぶような設定は`launch.json`で行うことができます。
`launch.json`は新規で作成する必要があるので以下の画面の「create a launch.json file」で作成しておいてください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/5ced3d3d-dbad-1d0c-4e26-bac3d0de6886.png)

作成したらlaunch.jsonが開きますので続けて編集していきます。
次の位置に次の項目を追加してください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/a53a6c71-a10f-3b52-cf48-0ec67dec2d36.png)

```json
{
  "vmArgs": "--module-path \"C:\\Program Files\\javafx-sdk-15.0.1\\lib\" --add-modules javafx.controls,javafx.fxml"
}
```

JSONファイルなので項目を`,`で区切ることを忘れないようにご注意ください。
`--module-path`にはJavaFX SDKのlibフォルダのフルパスを指定します。`\`は2つ重ねて`\\`とするようにしてください。

launch.jsonの変更を保存することでビルドの設定は完了です！
これで「F5」もしくは「▶」からJavaFXを実行できるようになりました！！

# サンプルプログラム
実際にVSCodeでJavaFXプログラムを開発してみて実行してみましょう。

プログラムコードの内容は以下のコードを拝借いたします。
https://github.com/openjfx/samples/blob/master/HelloFX/CLI/hellofx/HelloFX.java

それではコーディングしてみましょう！

```java:App.java
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;

public class App extends Application {
    public static void main(String[] args) throws Exception {
        launch();
    }

    @Override
    public void start(Stage stage) throws Exception {
        String javaVersion = System.getProperty("java.version");
        String javafxVersion = System.getProperty("javafx.version");
        Label l = new Label("Hello, JavaFX " + javafxVersion + ", running on Java " + javaVersion + ".");
        Scene scene = new Scene(new StackPane(l), 640, 480);
        stage.setScene(scene);
        stage.show();
    }
}
```

では▶実行してみましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/961112/01dfe004-0b30-4705-5964-0c42105dbf65.png)
きちんと動作しました！