Javaの最強GUIライブラリ「JavaFX」とは?Intellijを使った導入方法も紹介。
- 投稿日:2021.06.17 最終更新日:2023.06.26
- Javaフレームワーク
- チュートリアル, IDE, 経験者向け
![Javaの最強GUIライブラリ「JavaFX」とは?Intellijを使った導入方法も紹介。](https://ugo.tokyo/wp-content/uploads/2021/06/java-javafx.webp)
この記事では、JavaのスタンダードGUIライブラリ「JavaFX」の特徴と使い方を説明していく。
JavaFXとは?
![](https://ugo.tokyo/wp-content/uploads/2021/06/javafx_logo.jpeg)
JavaFXはJavaのスタンダードなGUIライブラリ。
GUIライブラリとは、「チェックボックス」「ドロップダウンセレクト」といったスタンダードなコンポーネントがまとめられているフレームワークのことだ。
JavaFXはJavaのGUIライブラリ「Swing」の後身にあたる。Swingはいまだに人気が強く実務でも使われている例が多いが、今からJavaでGUIを制作する人はJavaFXを使用したほうがいいだろう。
JavaFXには以下のような特徴・長所がある。
- FXML・CSSを使ってWebデザインのような感覚でコンポーネントの配置やデザインのカスタマイズができる。
- デフォルトのメソッドが豊富に用意されており、自分でメソッドを加えることなく実践で使用できる。
- コミュニティが大きく情報が手に入りやすい。バグの発見・修正も活発におこなわれている。
JavaFXをインストールする前に
JavaFXのインストールを始める前に、JavaFXの現状について確認しておきたい。
OpenJFXにパッケージされている
2021年8月現在、JavaFXの安定した(LTS)リリースバージョンはJavaFX 11である。
JavaFX 8では、JavaFXはOracle JDKにパーケージされていたが、11以降は入っていない。そのためダウンロードはOpenJFXのサイトからおこなう。
JavaFXの使い方
では、JavaFXの使い方を見ていこう。
JavaFXを導入する
今回はIntellijでJavaFXを導入する方法を説明する。
まずはIntellijを開き、「Preferences」から「JavaFX」プラグインが有効になっていることを確認する。
![](https://ugo.tokyo/wp-content/uploads/2021/06/plugin_javafx.png)
Gluonのサイトから自分の環境に合ったJavaFXのSDKをダウンロードする。
![](https://ugo.tokyo/wp-content/uploads/2021/06/gluon-1024x792.png)
「File → NewProject」からプロジェクト作成ダイアログを開き「Java FX」を選択する。
![](https://ugo.tokyo/wp-content/uploads/2021/06/new_project-1024x586.png)
プロジェクト名を入力して「Finish」をクリックすると、新しいプロジェクトが作成される。
「File → Project Structure」の「Project Settings: Libraries」にて、先程ダウンロードしたSDKをインポートする。
![](https://ugo.tokyo/wp-content/uploads/2021/06/import_library-1024x845.png)
これでJavaFXを使用する準備は出来上がりだ!
GUIを表示する
IntellijではJavaFXのプロジェクトを作成した時点でmainメソッド内に最低限のコードとsample.fxmlが作成されている。Mainメソッドを実行すればすぐにHello Worldというタイトルとともに以下のようなGUIが表示されるだろう。
![](https://ugo.tokyo/wp-content/uploads/2021/06/hello.png)
- エラーが表示される場合、「module-info.java」ファイルを自分で作成して配置すれば直る可能性が高いので調べてみてほしい。
コンポーネントを配置する
JavaFXでは、FXMLというXMLのようなデータを使ってコンポーネントの追加や配置をおこなう。
sample.xmlを開きエレメントを追加してみよう。Intellijでは<を入力すれば候補となるコンポーネントが一覧で表示される。
![](https://ugo.tokyo/wp-content/uploads/2021/06/dropdown.png)
今回はもっともベーシックなコンポーネントであるTextFieldを追加してみよう。
<GridPane fx:controller="sample.Controller"
xmlns:fx="http://javafx.com/fxml" alignment="center" hgap="10" vgap="10">
<TextField>TEST</TextField>
</GridPane>
mainメソッドを実行し直すと次のようにGUIの中央に文字の入力欄が表示されるはずだ。
![](https://ugo.tokyo/wp-content/uploads/2021/06/text.png)