Java道｜はじめてのGUIアプリ作成

Java道｜はじめてのGUIアプリ作成

キーボードだけの世界から、見て触れるウィンドウの世界へ。
GUIアプリを学ぶと、Javaプログラムは「文字で動く処理」から「画面を持つアプリ」へ大きく広がります。

これまでのJava学習では、主に文字を使ったプログラムを学んできました。

たとえば、画面にメッセージを表示する場合は、System.out.println を使いました。

System.out.println("修行を開始します。");

また、キーボードから値を入力し、その値を使って計算したり、条件分岐したり、ファイルへ保存したりする処理も学んできました。

このようなプログラムは、文字を中心に操作するため、CUIのプログラムとして考えられます。
CUIは、キーボード入力や文字表示を中心に動くプログラムです。

鬼滅の刃風にたとえると、これまでのプログラムは、鬼殺隊本部の指令係が巻物に書かれた修行手順を上から順に読み上げ、それに従って隊士が順番に動いていくような流れです。

修行場を準備する
  ↓
型の確認をする
  ↓
結果を表示する
  ↓
終了する

しかし、私たちが普段使っているアプリケーションは、文字だけで動くものばかりではありません。

画面にウィンドウが表示される。
ボタンを押す。
マウスで操作する。
ウィンドウの中に文字や図形が描かれる。
閉じるボタンを押すと終了する。

このように、見た目のある画面を通して操作するアプリケーションをGUIアプリケーションと呼びます。

GUIは Graphical User Interface の略です。
日本語では、画面上の見た目を通して操作する仕組みと考えると分かりやすいです。

鬼滅の刃風に言えば、GUIアプリは鬼殺隊本部の作戦室に置かれた「修行案内盤」のようなものです。

隊士が巻物の命令を1つずつ読むだけではなく、目の前の案内盤を見て、表示された内容を確認し、必要な操作を行う。
そのように、人が見て使える画面を持つのがGUIアプリです。

この記事では、JavaでGUIアプリを作る第一歩として、AWTを使ってウィンドウを1つ表示する基本を整理します。具体的な例示プログラムは Sample1.java を使い、Frame、setSize、setVisible、paint、WindowAdapter、windowClosing の役割を順番に見ていきます。

GUIアプリケーションとは何か

GUIアプリケーションとは、画面上の見た目を通して操作できるアプリケーションです。

文字だけで命令を入力するのではなく、ウィンドウ、ボタン、メニュー、入力欄、画像などを使って操作します。

鬼滅の刃風にたとえると、GUIアプリは鬼殺隊本部の「作戦案内盤」です。

画面には、今日の修行内容や任務予定が表示されます。
隊士はその案内盤を見て、今何をするのかを確認します。
必要に応じて、ボタンや画面操作で次の行動を選べるようになります。

今回の最初の目標は、まだボタンを押すような複雑な操作ではありません。

まずは、次の3つができる小さなGUIアプリを作ります。

この3つができるだけでも、Javaのプログラムは「文字だけの処理」から「画面を持つアプリ」へ進みます。

これまでのプログラムとの違い

これまで多く扱ってきたプログラムは、上から下へ順番に進むものが中心でした。

表示する
  ↓
入力する
  ↓
計算する
  ↓
結果を表示する
  ↓
終了する

このような流れは、処理の順番を追いやすいです。

一方、GUIアプリケーションでは、ウィンドウが表示されたあと、ユーザーがどのように操作するかによって動きが変わります。

たとえば、ユーザーが閉じるボタンを押したときに終了処理が動きます。
ボタンを押すアプリなら、ボタンを押したときに処理が動きます。

鬼滅の刃風に言えば、これまでのプログラムは「指令係が巻物の内容を順番に読み上げる修行」です。

GUIアプリは「本部の作戦室に表示された案内盤を、隊士が見ながら操作する修行」です。

順番に読むだけでなく、画面に表示されたものに対して、人が働きかける点が大きく違います。

AWTとは何か

JavaでGUIアプリケーションを作る方法はいくつかあります。

その中で、基本として登場するものの1つが AWT です。

AWTは Abstract Window Toolkit の略です。
ウィンドウ、ボタン、イベント処理など、GUIアプリに必要な機能を扱うためのライブラリです。

今回のサンプルでは、AWTを使って、ウィンドウを1つ表示します。

鬼滅の刃風にたとえると、Frame は「作戦案内盤の本体」です。

setSize は、その案内盤の大きさを決める作業です。
setVisible は、案内盤を隊士たちの前に表示する作業です。
paint は、案内盤の中に文字を書く作業です。
WindowAdapter と windowClosing は、案内盤の停止ボタンに反応する仕組みです。

図：CUIからGUIアプリへ広がるイメージ

↓クリックすると拡大表示されます。

この図が示していること

この図では、文字中心のCUIプログラムから、ウィンドウを持つGUIアプリへ学習が進む流れを表しています。

左側では、System.out.println やキーボード入力を中心にした文字の世界を表しています。

右側では、ウィンドウが表示され、その中に文字が描かれているGUIアプリの世界を表しています。

この図から分かることは、GUIアプリの学習では、処理の内容だけでなく、ユーザーに見える画面を作る視点が加わるということです。

ウィンドウを表示する基本の流れ

GUIアプリの最初の目標は、画面にウィンドウを1つ表示することです。

そのためには、次の流れで考えると分かりやすいです。

この流れを押さえておくと、Sample1.java のコードがかなり読みやすくなります。

ファイル名：Sample1.java

import java.awt.*;
import java.awt.event.*;

public class Sample1 extends Frame
{
    public static void main(String[] args)
    {
        Sample1 sm = new Sample1();
    }

    public Sample1()
    {
        super("鬼殺隊 修行案内");

        addWindowListener(new SampleWindowListener());

        setSize(320, 200);
        setVisible(true);
    }

    class SampleWindowListener extends WindowAdapter
    {
        public void windowClosing(WindowEvent e)
        {
            System.exit(0);
        }
    }

    public void paint(Graphics g)
    {
        g.drawString("きょうの修行を開始します", 70, 100);
    }
}

実行結果

このプログラムでできること

このプログラムを実行すると、タイトルが「鬼殺隊 修行案内」のウィンドウが表示されます。

そして、ウィンドウの中に「きょうの修行を開始します」という文字が描かれます。

さらに、ウィンドウの閉じるボタンを押すと、アプリケーションが終了します。

小さなプログラムですが、GUIアプリの基本要素がしっかり入っています。

鬼滅の刃風に言えば、鬼殺隊本部の作戦室に、小さな修行案内盤を設置した状態です。

案内盤にはタイトルがあり、中には今日の修行開始メッセージが表示されます。
閉じる操作をすれば、案内盤の動作を終了できます。

プログラムの全体像

Sample1.java は、役割ごとに分けて見ると理解しやすいです。

このように、GUIアプリでは「起動する場所」「ウィンドウを設定する場所」「画面に描く場所」「操作に反応する場所」が分かれています。

最初は少し長く見えますが、役割で分けると整理しやすくなります。

import文の役割

最初に、次の2行があります。

import java.awt.*;
import java.awt.event.*;

java.awt には、Frame や Graphics など、GUIの基本部品に関係するクラスが含まれています。

java.awt.event には、WindowEvent や WindowAdapter など、ユーザー操作やウィンドウの出来事に関係するクラスが含まれています。

鬼滅の刃風にたとえると、java.awt は作戦案内盤そのものを作るための道具箱です。

java.awt.event は、閉じる操作などの出来事に対応するための連絡札の道具箱です。

Frameを継承する意味

このプログラムでは、Sample1 クラスが Frame を継承しています。

public class Sample1 extends Frame

Frame は、ウィンドウ本体を表すクラスです。

Sample1 が Frame を継承することで、Sample1 もウィンドウとして動けるようになります。

鬼滅の刃風に言えば、Frame は「作戦案内盤の基本設計図」です。

Sample1 は、その基本設計図を受け継いで作った「鬼殺隊 修行案内盤」です。

もともとのFrameが持つウィンドウ機能を使いながら、Sample1ではタイトル、サイズ、表示内容、閉じる処理を加えています。

mainメソッドでアプリを起動する

main メソッドでは、次の1行が実行されています。

Sample1 sm = new Sample1();

これは、Sample1 クラスのオブジェクトを作っています。

GUIアプリでは、このオブジェクトが作られると、コンストラクタが呼ばれます。

public Sample1()
{
    super("鬼殺隊 修行案内");

    addWindowListener(new SampleWindowListener());

    setSize(320, 200);
    setVisible(true);
}

つまり、main は「修行案内盤を作って起動する合図」を出している場所です。

鬼滅の刃風に言えば、main は指令係が作戦室の修行案内盤の起動スイッチを押す場所です。

スイッチが押されると、案内盤のタイトルや大きさが整えられ、画面に表示されます。

コンストラクタで初期設定を行う

Sample1 のコンストラクタでは、ウィンドウに必要な初期設定をしています。

public Sample1()
{
    super("鬼殺隊 修行案内");

    addWindowListener(new SampleWindowListener());

    setSize(320, 200);
    setVisible(true);
}

それぞれの役割は次の通りです。

鬼滅の刃風に言えば、コンストラクタは修行案内盤の初期準備です。

名前札を付ける。
停止操作を受け付ける仕組みを付ける。
案内盤の大きさを決める。
最後に作戦室へ表示する。

この準備があるから、ウィンドウとして使えるようになります。

superでタイトルを決める

次の行では、親クラスである Frame のコンストラクタを呼び出しています。

super("鬼殺隊 修行案内");

ここで指定した文字列が、ウィンドウのタイトルバーに表示されます。

タイトルは、ウィンドウの看板のようなものです。

どんな画面なのか、ひと目で分かる名前にすると使いやすくなります。

鬼滅の刃風に言えば、作戦案内盤の上に掲げる札です。

「鬼殺隊 修行案内」と書かれていれば、隊士はこの画面が修行の案内を表示するものだとすぐに分かります。

setSizeでウィンドウの大きさを決める

次の行では、ウィンドウの大きさを決めています。

setSize(320, 200);

320 が横幅、200 が縦幅です。

ウィンドウが小さすぎると、文字や部品が見づらくなります。

逆に大きすぎると、余白が多くなって少し間延びした画面になります。

GUIでは、処理だけでなく見た目の使いやすさも大切です。

鬼滅の刃風に言えば、修行案内盤の大きさを決める作業です。

小さすぎると隊士が案内文を読みにくくなります。
大きすぎると作戦室の机を無駄に占領してしまいます。

setVisibleで画面に表示する

次の行では、ウィンドウを表示しています。

setVisible(true);

この行がないと、ウィンドウの設定をしていても画面に現れません。

GUIを初めて学ぶときは、setSize まで書いているのに、setVisible(true) を忘れてしまうことがあります。

その場合、ウィンドウは準備されていても画面には表示されません。

鬼滅の刃風に言えば、修行案内盤を作戦室の奥で準備しただけで、隊士たちの前に出していない状態です。

setVisible(true) によって、案内盤が実際に見える場所へ出されます。

図：Sample1.javaでウィンドウが表示される流れ

↓クリックすると拡大表示されます。

この図が示していること

この図では、Sample1.java がどのような流れでウィンドウを表示するのかを表しています。

main メソッドで Sample1 オブジェクトを作ると、Sample1 のコンストラクタが呼ばれます。

Sample1 は Frame を継承しているため、ウィンドウとしての機能を持っています。

コンストラクタの中で、タイトル、閉じる操作、サイズ、表示の設定を行い、最終的に画面にウィンドウが現れます。

この図から分かることは、GUIアプリでは、オブジェクト作成とコンストラクタの初期設定がウィンドウ表示につながっているということです。

paintでウィンドウに文字を描く

今回のプログラムでは、ウィンドウの中に文字を表示するために paint メソッドを使っています。

public void paint(Graphics g)
{
    g.drawString("きょうの修行を開始します", 70, 100);
}

paint は、ウィンドウの中に文字や図形を描くためのメソッドです。

Graphics 型の g を使って、実際の描画を行います。

ここでは、drawString を使って文字列を描いています。

System.out.println は、コンソールに文字を表示するための命令です。

一方、g.drawString は、ウィンドウの中に文字を描くために使います。

鬼滅の刃風に言えば、System.out.println は指令係が声で伝える連絡です。

g.drawString は、作戦案内盤の画面に文字を書き込む作業です。

GUIでは、画面の中に何を見せるかを考える必要があります。

paintが呼ばれるタイミング

paint は、自分で直接呼ぶためのメソッドではありません。

AWTの描画システムによって、画面を描く必要があるときに自動的に呼ばれます。

代表的なタイミングは次の通りです。

今回の流れでは、setVisible(true) によってウィンドウが画面に表示され、その描画が必要になるため paint が呼ばれます。

Sample1 sm = new Sample1()
  ↓
コンストラクタが動く
  ↓
setVisible(true)
  ↓
画面表示が必要になる
  ↓
paint(Graphics g) が呼ばれる
  ↓
drawString で文字が描かれる

↓クリックすると拡大表示されます。

ここで大切なのは、paint を直接呼ばないことです。

再描画をお願いしたい場合は、paint を直接呼ぶのではなく repaint を使います。

鬼滅の刃風に言えば、paint は作戦案内盤が「画面を描き直す必要がある」と判断したときに、記録係が案内文を書き直すようなものです。

閉じる操作に対応する理由

GUIアプリでは、ウィンドウを表示するだけでは不十分です。

ユーザーが右上の閉じるボタンを押したときに、きちんとアプリを終了できる必要があります。

そのために、次の行でウィンドウの出来事を受け取る準備をしています。

addWindowListener(new SampleWindowListener());

そして、閉じる操作に対応する処理を内部クラスで書いています。

class SampleWindowListener extends WindowAdapter
{
    public void windowClosing(WindowEvent e)
    {
        System.exit(0);
    }
}

この流れを整理すると、次のようになります。

鬼滅の刃風に言えば、修行案内盤の停止札が押されたときに、案内盤を安全に止める処理です。

ウィンドウを出すだけでなく、閉じる操作に反応できるようにすることが、GUIアプリらしい動きの第一歩です。

WindowAdapterを使う理由

WindowAdapter は、ウィンドウ関連のイベント処理を簡単に書くための補助クラスです。

ウィンドウには、いろいろな出来事があります。

すべての出来事に対応する処理を書くのは大変です。

WindowAdapter を使うと、必要なイベントだけを選んで書きやすくなります。

今回は、閉じる操作だけに対応したいので、windowClosing だけを定義しています。

public void windowClosing(WindowEvent e)
{
    System.exit(0);
}

鬼滅の刃風に言えば、WindowAdapter は作戦案内盤の出来事を見張る補助係です。

今回は、案内盤が閉じられる瞬間だけを見張り、そのときに終了処理を行います。

GUIの考え方はイベント処理と深く結びつく

GUIアプリでは、ユーザーがいつ何をするか分かりません。

ウィンドウを閉じるかもしれません。
ボタンを押すかもしれません。
マウスを動かすかもしれません。
キーを押すかもしれません。

そのため、GUIでは「イベントが起きたときにどう反応するか」を決めておく必要があります。

今回のサンプルで扱うイベントは、ウィンドウを閉じる操作です。

これが、イベント処理の入口です。

鬼滅の刃風に言えば、隊士が停止札を押した瞬間に、作戦案内盤の見張り係が反応して、装置を終了させるようなものです。

今後、GUIアプリを学んでいくと、ボタン、入力欄、マウス操作、キー操作など、さまざまなイベントに対応する処理が出てきます。

今回の windowClosing は、その最初の基本としてとても大切です。

図：描画と閉じるイベントの流れ

↓クリックすると拡大表示されます。

この図が示していること

この図では、GUIアプリの重要な2つの流れを表しています。

1つ目は、paint による描画です。
paint の中で g.drawString を使うことで、ウィンドウ内に文字を描きます。

2つ目は、閉じるイベントです。
ユーザーが閉じるボタンを押すと、windowClosing が呼ばれ、System.exit(0) によってアプリケーションが終了します。

この図から分かることは、GUIアプリは「画面を描く処理」と「ユーザー操作に反応する処理」の両方で成り立っているということです。

Sample1.javaで使われているオブジェクト指向の考え方

今回のプログラムには、オブジェクト指向の考え方も含まれています。

特に大切なのは、クラス、オブジェクト、継承、メソッドです。

Sample1 は、Frame を継承しています。

つまり、Frame が持つウィンドウとしての基本機能を受け継ぎながら、Sample1 独自の表示内容や終了処理を追加しています。

鬼滅の刃風に言えば、Frame という「作戦案内盤の基本型」をもとにして、Sample1 という「鬼殺隊 修行案内盤」を作っている状態です。

GUIを学び始めたときに戸惑いやすい点

GUIアプリは、文字中心のプログラムより少し複雑に感じやすいです。

理由は、処理の流れが単純な上から下だけではないからです。

最初からすべてを完璧に覚える必要はありません。

まずは、次の3つを押さえるとよいです。

鬼滅の刃風に言えば、最初から複雑な作戦装置を作る必要はありません。

まずは、本部の作戦室に小さな修行案内盤を置き、案内文を表示し、閉じる操作で安全に終了できるようにすることが大切です。

GUIアプリケーションの第一歩として大切なこと

今回のSample1.javaは、派手な画面を作るプログラムではありません。

ボタンもありません。
入力欄もありません。
メニューもありません。

しかし、GUIアプリの大切な土台が入っています。

どんなGUIアプリも、最初はこのような基本の組み合わせから始まります。

鬼滅の刃風に言えば、どれだけ高度な作戦盤を作るとしても、まずは「作戦盤の本体を置く」「表示する」「案内を書く」「停止操作に反応する」という基礎が必要です。

この基礎が分かると、次にボタン、ラベル、入力欄、イベント処理などを学ぶときに、かなり理解しやすくなります。

今の段階で意識しておきたい見方

GUIのコードを読むときは、丸暗記よりも役割で見ることが大切です。

次のように分けて確認すると、Sample1.java の構造が見えやすくなります。

このように役割で見られるようになると、GUIアプリのコードはかなり読みやすくなります。

JavaのGUI学習は、文字だけのプログラムから、ユーザーが目で見て操作できるアプリへ進む大きな一歩です。

最初はFrameを表示するだけでも十分です。

そこに文字を描き、閉じる操作に対応できるようになることで、Javaプログラムは「処理するだけのもの」から「人が使える画面を持つもの」へ広がっていきます。