JavaFXでwindowsのGUIアプリを作成する

# 概要

JavaでGUIのアプリ作ってみたかったけど、
いろんなフレームワークあるし、
Javaで開発もしたことなかったので記事にまとめてみました。

# Goal

vscodeとjavafxを使い、GUIアプリを表示する！

# 環境

- Java version
    ```shell-session
    > java -version
    java version "11.0.18" 2023-01-17 LTS
    Java(TM) SE Runtime Environment 18.9 (build 11.0.18+9-LTS-195)
    Java HotSpot(TM) 64-Bit Server VM 18.9 (build 11.0.18+9-LTS-195, mixed mode)
    ```
- OS
    ```shell-session
    > powershell Get-WmiObject Win32_OperatingSystem
    Version         : 10.0.22621

    > wmic os get caption
    Microsoft Windows 11 Home
    ```
- editor
    - vscode

# Let's Go

大きくわけて、以下の流れです。
1. JavaFXの環境設定
2. 開発環境(vscode)の設定
3. GUIアプリを実行


## JavaFXをダウンロード(javaのバージョンが11以上なら必要)

https://gluonhq.com/products/javafx/

以下のSDKをダウンロードしてね。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/836b74bd-1773-0ae2-eed8-7d0d0511e68f.png)

## 指定のフォルダに配置
```
// 以下のフォルダに配置する。
C:\Program Files\Java

// 配置後のフォルダ
C:\Program Files\Java\javafx-sdk-17.0.8
```

## 環境変数の登録

<img width="400" alt="環境変数設定結果.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/9aa96cda-e1cd-61e5-3994-948f01ed4275.png">

<img width="400" alt="システム環境変数設定結果.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/f9624fc0-e2d3-3c7b-eb9f-d944fa139474.png">

## vscodeの設定
vscodeの設定画面で、javaと検索する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/0769a442-54dc-ebbb-f7f1-73917a6e059d.png)

"java.configuration.runtimes"の"path"にjavaライブラリのパスを入力する。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/e3491e22-fd00-9763-42df-0529e5e60feb.png)


## vscodeでjavaプロジェクトを作成
1. vscodeのウィンドウを開きます。
2. ctrl + shift + p
3. "Java:Create Java Project..." を選択
    <img width="400" alt="create_project" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/5c2ecfac-4e66-e1b7-8b26-91c8d23e7a70.png">

4. プロジェクトタイプを選択します。maven を選択してください。
    <img width="400" alt="select_projecttype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/1d5699d4-ff39-de75-51ee-9a7fbb397d78.png">

5. アーキタイプを選択します。More...からopenjfxを選択してください。
    <img width="400" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/bf3448b0-81c1-fb9c-eb12-2517af142799.png">

    <img width="400" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/42577239-4359-5239-63cb-19e7cd337732.png">

6. javafxのversionを選択します。最新の0.0.6を選択してください。
    <img width="400" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/0073f9b8-86e4-832b-0199-f8607ff7bfe7.png">

7. groupIdを入力します。
    <img width="400" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/41f09d0f-8c45-56ba-34ea-15f8e9de9154.png">

    :::note info
    maveの公式サイトで、groupIdとartifactIdに何を入れるか考えてください。
    artifactIdは、次の手順で入力します。
    https://maven.apache.org/guides/mini/guide-naming-conventions.html
    

8. artifactIdを入力します。
    <img width="400" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/a5e770d5-930d-2052-8c04-f1dbb8fd21fe.png">

9. folder選択画面が表示されるので、フォルダを選択してください

10. プロジェクト作成処理が走るので、待機。
    <img width="400" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/82d848fc-d23c-6c33-c6a8-475270a530b0.png">

11. プロパティのバージョンを入力します。
    <img width="400" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/f63d9081-4c5d-dd33-bf44-25c6a104f897.png">

12. 入力項目確認画面です。問題なければ、Yを入力します。
    <img width="600" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/163ca112-3775-4f08-a5a8-14876e5b1037.png">

13. 手順12の内容でプロジェクトを作成されます。待機します。
右下に出てるポップアップで、"Open"をクリックすると作成したプロジェクトをvscodeで開けます
    <img width="600" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/adcf8050-74bf-9322-e973-ed2a78357045.png">

14. 完了すると、以下のプロジェクトが作成されます！
    <img width="200" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/551b34cb-32b6-cea9-5bd5-3da164787527.png">

15. 作成されたプロジェクトからApp.javaを開き、"実行"->"デバッグの開始"をクリック
ビルドが開始されるので、少し待機
    <img width="300" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/2b06ec45-b713-f06b-124b-8050c82318f1.png">

16. 画面が表示される！！！
    <img width="300" alt="select_archetype" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/333125/d04d107c-53e2-075c-38ce-c1090e608887.png">

# あとがき
どうでしたか。
ちょっと説明足りないとところあったかもしれないですが、画面表示するところまでいけました。
あとは、自分でコーディングして好きなアプリを作るだけです！

勉強不足なところがあるので、この記事をどんどん更新していきます。
指摘や情報など、コメントお待ちしております。

# 参考サイト

https://code.visualstudio.com/docs/java/java-gui

# メモ書き

Q. mavenのgroupIdとartifactIdってよくわからん。

Q. vscodeのjavaproject作成するときに、mavenじゃなくてjavafxを選ぶと
mavenのディレクトリ構造作成されるだけなんだけどなんで？

## 画面のモジュール配置アプリ
全部コーディングで画面を作成するのは、くそだるいので以下のアプリを作成する。
ある程度の使い方は、youtubeで検索かければすぐ出てくると思います。
https://gluonhq.com/products/scene-builder/