スライドショー

【Java入門】GUIの開発フレームワークまとめ(Swing、JavaFx、AWT)

こんにちは!フリーランスの長野です。

JavaでGUIって使っていますか?

GUIとはパソコンの操作対象が画像や図形、アイコンなどで表現され、キーボードからの入力やマウスのクリックで操作するものです。Javaを開発する際に利用するEclipseなどもGUIになります。

この記事では、JavaのGUIについて

  • GUIとは
  • GUI開発のフレームワーク
  • Swingの使い方
  • JavaFxの使い方
  • GUI開発入門者へのオススメの本

など基本的な内容から、実用的な内容についても解説していきます。

今回はJavaのGUIについて、わかりやすく解説します。

GUIとは

そもそもGUIとはGraphical User Interfaceの略称で、操作対象が画像や図形、アイコンなどで表現され、キーボードからの入力やマウスのクリックなどで直感的にコンピュータを操作することができます。

これに対してCUI(Character User Interface)はコマンドを入力してコンピュータを操作します。

CUIの場合コマンドを覚える必要がありますが、GUIの場合コマンドを知らなくても画像や図形を使って直感的に操作できるのが特長です。

Javaの開発で言うと、コマンドプロンプトを使ってjavacやjavaなどのコマンドを使ってコンパイルや実行するのがCUIでの開発になります。

これに対してEclipseなどの統合開発環境(IDE)を使って開発するのがGUIでの開発になります。

GUI開発のフレームワーク

GUIを開発するには一般的にフレームワークを利用します。

フレームワークには開発を効率化してくれる機能群と、ソフトウェアの骨組みが用意されています。

あらかじめ用意されているものを取捨選択し、少しの機能追加だけで意図通り実現できるようになるので効率的に開発することができます。

JavaにもGUIを開発するためのフレームワークがいくつかあります。

Swing

SwingはJava言語で書かれたGUIフレームワークです。

このため、どのOSで動かしても同じ見栄えにできます。

後述するAWTを拡張しているためAWTに起因する限界もあり、例えば標準ではアニメーションを行うためのAPIが提供されないなどの制限もあります。

Swingはこれまでよく使われてきたGUIフレームワークでしたが、Java8以降JavaFxに置き換えられています。

JavaFx

JavaFXはJava8以降でJava SEの標準GUIフレームワークとなっています。

FXMLと呼ばれるXMLとCSSを併用してデザインを記述し、デザイン作成と処理クラスの記述とを分離できるのが大きな特徴です。

AWT

AWTはAbstract Window Toolkitの略称で、Java 1.0のころから使用されているGUIフレームワークです。

ボタンなどの部品はウインドウシステムのネイティブ部品が使われています。

このためWindows上ではネイティブなWindowsアプリにそっくりで、Mac上ではネイティブなMacintoshにそっくりな表示になり、OSに依存します。

Swingの使い方

それではSwingの使い方からみていきましょう。

Swingは先ほどお伝えしたように今ではJavaFxに置き換えられています。Java8以前のバージョンで使用可能です。

Swingを使うためにここではEclipseを使います。

Eclipseのインストールについては、こちらで詳しく解説していますので、ぜひ参考にしてください。

【Java初心者必見!】Javaの開発環境を構築する方法を解説!
更新日 : 2019年5月7日
【Mac編】Javaの開発環境を簡単に一括インストールする方法
更新日 : 2019年4月29日

Eclipseで「Swing デザイナー」をインストールする必要があります。

Eclipseの「ヘルプ」→「新規ソフトウェアのインストール」をクリックします。
java_gui01

作業対象からEclipseのバージョン(ここでは「Oxygen - http://download.eclipse.org/releases/oxygen」)を選択し、「一般用ツール」→「Swing デザイナー」とそれに関連する項目にチェックを入れ、「次へ」ボタンをクリックします。
java_gui02

インストール詳細はそのままで「次へ」ボタンをクリックします。
java_gui03

ライセンスのレビューで「使用条件の条項に同意します」のラジオボタンにチェックを入れ、「完了」ボタンをクリックしてインストールが始まります。
java_gui04

インストールが終了するとEclipseの再起動を求められるので、「今すぐ再起動」ボタンをクリックします。
java_gui05

Eclipseが再起動したらプロジェクトを作成してSwingを使っていきましょう。

「Javaプロジェクト」を新規で作成します。
java_gui06

プロジェクト名を入力して、「完了」ボタンをクリックします。

SwingはJavaSE-1.8以前で使用可能ですので、注意しましょう。
java_gui07

作成したプロジェクトを右クリックして「新規」→「その他」を選択クリックします。
java_gui08

ウィザードの選択で「WindowBuilder」→「Swing デザイナー」→「JFrame」を選択し、「次へ」ボタンをクリックします。
java_gui09

名前を入力し、「完了」ボタンをクリックします。
java_gui10

自動でコードが記述されて表示されます。

下のタブに「ソース」と「デザイン」があるので、「デザイン」を選択クリックします。
java_gui11

GUIの開発環境が表示されます。
java_gui12

ボタンをクリックすると、「Hello Swing!」と表示される簡単なGUIを作ってみましょう。

「パレット」の「Components」から「JLabel」を選択クリックし、フレームの中の配置する場所をクリックします。

また「JButton」を選択クリックし、これもフレームの中の配置する場所をクリックします。

配置したボタンをダブルクリックすると、「ソース」が表示され自動でコードが記述されています。
java_gui13

「ソース」にはJLabelクラスのオブジェクトlblNewLabelとJButtonクラスのオブジェクトbtnNewButtonがインスタンス化されています。

btnNewButtonオブジェクトからaddActionListenerメソッドが呼び出され、actionPerformedメソッドのブロック内に処理を記述しています。

ここでは、lblNewLabelオブジェクトのテキストが「Hello Swing!」となるように記述しています。

実行結果:
java_gui14

JavaFxの使い方

それではJavaFXの使い方もみていきましょう。

JavaFXでのGUI開発もEclipseを使います。

JavaFXではEclipse以外にも「Scene Builder」を使います。

Scene Builderでウィンドウやテキストボックス、ボタンなどのレイアウトを行います。
java_gui16
Scene Builder

まずはEclipseのインストールから行います。

Eclipseの「ヘルプ」→「Eclipse マーケットプレイス」をクリックします。

「e(fx)clipse」で検索し、「インストール」ボタンをクリックします。
java_gui15

ライセンスのレビューで「使用条件の条項に同意します」のラジオボタンをチェックし、「完了」ボタンをクリックします。

インストールが終了するとEclipseの再起動を求められるので、「今すぐ再起動」ボタンをクリックします。

次にScene Builderをインストールしましょう。

OSに合わせてダウンロード、インストールします。
java_gui17

Scene Builderを起動して表示が文字化けしているようであれば、「SceneBuilder.cfg」ファイルに追記して、英語表示にします。
java_gui19

EclipseにScene Builderの設定をします。

メニューの「ウィンドウ」→「設定」を選択クリックします。

「JavaFx」を選択し、「SceneBuilder 実行可能ファイル」にSceneBuilder.exeファイルの絶対パスを指定します。

「適用して閉じる」ボタンをクリックします。
java_gui20

プロジェクトを作成してJavaFxを使っていきましょう。

「Javaプロジェクト」を新規で作成します。

ウィザードの選択で「JavaFx」→「JavaFx プロジェクト」を選択し、「次へ」ボタンをクリックします。
java_gui21

プロジェクト名を入力して、「次へ」ボタンをクリックします。
java_gui22

そのまま「次へ」ボタンをクリックします。
java_gui23

言語で「FXML」を選択して「完了」ボタンをクリックします。
java_gui24

「Main.java」ファイルをクリックして確認しましょう。
java_gui25

それでは先ほどと同じようにボタンをクリックすると、「Hello JavaFx!」と表示される簡単なGUIを作ってみましょう。

Scene BuilderでGUIをデザインしましょう。

Eclipseのfxmlファイルを右クリックして、「SceneBuilder で開く」をクリックします。

Scene Builderが起動します。パーツを選んでドラッグ&ドロップで配置します。パーツを配置したらfxidを入力します。

ボタンの場合、イベント発生のメソッド名を「On Action」に入力します。
java_gui30

イベントの処理は「Controller.java」クラスに記述します。

javafx.fxml.FXMLをインポートし、アノテーション@FXMLを付与すると、fxmlファイル上のコンポーネントとControllerクラスのメンバが紐付けされます。

package application;

import javafx.event.ActionEvent;
import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;

public class SampleController {
    @FXML
    private Button ClickBtn;
    @FXML
    private Label lbl;

    @FXML
    public void onClickBtnClicked(ActionEvent e) {
        lbl.setText("Hello JavaFx!");
    }
}

実行結果:
java_gui29

GUI開発入門者へのオススメの本

この記事では、ごく簡単な内容しかご紹介できませんでした。

ですので、JavaのGUI開発についてより深く学びたい方にオススメの本をご紹介します。

Swing

SwingによるJava-GUIプログラミング

初心者から中級者向けで丁寧に解説されており、サンプルプログラムが豊富でオススメです。

Javaアプリケーション作成講座―Swingプログラミング徹底攻略

初心者用向けの内容で、基本的なことが網羅的かつていねいに解説されてます。

Swingについての基本的な内容を理解することができます。

JavaFx

JavaFX & Java8プログラミング―Javaによる新しいGUIプログラミング入門

主要なGUI部品やGUIアプリケーションの作り方について、豊富なサンプルプログラムを用いて丁寧に解説されています。

まとめ

ここではJavaのGUIについて説明しました。

JavaでのGUI開発にはJava8まではこれまでずっとSwingが使われてきました。Java8以降は新たにJavaFxが標準GUIフレームワークとして統合されています。

使いこなすことができるように、この記事を何度も参考にして下さいね!

LINEで送る
Pocket

無料でSEからWebエンジニアへ転職しませんか?



侍エンジニア塾では、完全未経験の方から現在SEだけどプログラミングはやっていないという経験者まで、幅広い方々の人生を好転させるプログラミング指導を行ってきました。SEの方とお話していくなかで、

  • システムエンジニアという職業だけどコードが書けない
  • 事務作業が多くスキルがないため将来が不安
  • スクールに通うと完全未経験者と同じスタートになるからレベルが合わない
という、すでに知識があるSEならではのお悩みがあることに気づきました。そんな方におすすめなのが、弊社の「転職コース 」です。

弊社では、マンツーマンでレッスンを行いますので、現在お持ちの知識レベルからカリキュラムを作成いたします。さらにこちらの転職コースは無料で受講を始められて転職成功でそのまま卒業できるというとてもお得なコースとなっています。

既に知識のあるSEといっても転職は年齢が若いほど受かりやすいため、まずは無料体験レッスンで今の現状や理想の働き方について一緒に考えていきましょう。

まずは無料体験レッスンを予約する

書いた人

長野 透

長野 透

熊本在住のフリープログラマ兼ライターです。C/C++/C#、Java、Python、HTML/CSS、PHPを使ってプログラミングをしています。専門は画像処理で最近は機械学習、ディープラーニングにはまっています。幅広くやってきた経験を活かしてポイントをわかりやすくお伝えしようと思います。
お問合せはこちらでも受け付けています。
[email protected]

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説