Java道｜AWTコンポーネント入門

Java道｜AWTコンポーネント入門

ウィンドウは、部品を置いてはじめて「使える画面」になる。
AWTコンポーネントを学ぶと、JavaのGUIアプリは空の窓から、情報を伝える修行案内盤へ進化します。

前回は、JavaでGUIアプリを作る第一歩として、ウィンドウを表示する基本を学びました。

Frame を使ってウィンドウを作り、setSize で大きさを決め、setVisible(true) で画面に表示しました。

ただ、ウィンドウが表示されるだけでは、まだ「使いやすい画面」とはいえません。

画面の中に文字が表示される。
ボタンが置かれる。
入力欄がある。
一覧や選択項目が表示される。
必要な情報が色やフォントで分かりやすく示される。

このような部品が置かれて、はじめてGUIアプリらしい画面になっていきます。

JavaのAWTでは、ウィンドウ上に置く部品のことを コンポーネント と呼びます。

鬼滅の刃風にたとえると、Frame は鬼殺隊本部の作戦室に置かれた「修行案内盤の土台」です。

でも、土台だけがあっても、隊士は何をすればよいのか分かりません。

そこに、

のような部品を配置することで、画面は意味を持ち始めます。

この記事では、AWTコンポーネントの基本として、まず Label を中心に学びます。Label は文字を表示するための部品です。そこから、コンポーネントを作る、ウィンドウに追加する、文字色を変える、フォントを変える、代表的なAWTコンポーネントを知る、という流れで整理していきます。具体的な例示プログラムは Sample2.java を使います。

コンポーネントとは何か

GUIアプリケーションでは、ウィンドウの上にさまざまな部品を配置します。

この部品がコンポーネントです。

コンポーネントは、ユーザーに情報を見せたり、操作してもらったり、入力を受け取ったりするために使います。

鬼滅の刃風に言えば、コンポーネントは鬼殺隊本部の作戦室に置かれる「道具」や「札」です。

たとえば、修行案内を表示する札、任務開始の押し札、修行コースを選ぶ札、隊士名を入力する記録欄などです。

ウィンドウは舞台です。
コンポーネントは、その舞台に置かれる道具です。

舞台だけでは何をする場所か分かりませんが、道具が配置されることで、画面の役割がはっきりしていきます。

ラベルは文字を表示する基本部品

たくさんあるコンポーネントの中でも、最初に覚えやすいのが Label です。

Label は、画面に文字を表示するためのコンポーネントです。

たとえば、次のような文字をウィンドウ内に表示したいときに使えます。

Label は、ユーザーが直接入力する部品ではありません。

ボタンのように押すものでもありません。

主な役割は、情報を見せること です。

鬼滅の刃風にたとえると、Label は修行案内盤に貼られた「説明札」です。

たとえば、

次の修行場へ移動します

という案内が表示されていれば、隊士は次に何が起きるのかを理解できます。

GUI画面では、こうした説明があるだけで、ユーザーにとってかなり分かりやすくなります。

図：ウィンドウとコンポーネントの関係

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

この図が示していること

この図では、Frame がウィンドウの土台であり、その中に Label、Button、TextField、Panel などのコンポーネントを配置して画面を作る関係を表しています。

この図から分かることは、GUIアプリはウィンドウだけで完成するのではなく、その上にコンポーネントを配置して意味のある画面を作るということです。

ラベルを表示する

ファイル名：Sample2.java

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

public class Sample2 extends Frame
{
    private Label lb;

    public static void main(String[] args)
    {
        Sample2 sm = new Sample2();
    }

    public Sample2()
    {
        super("鬼殺隊 修行ルーム案内");

        // ラベルを作成する
        lb = new Label("次の修行場へ移動します");

        // フレームにラベルを追加する
        add(lb);

        // ラベルの文字色を設定する
        lb.setForeground(Color.red);

        // ラベルのフォントを設定する
        lb.setFont(new Font("SansSerif", Font.BOLD, 22));

        addWindowListener(new SampleWindowListener());

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

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

実行結果

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

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

そのウィンドウの中には、「次の修行場へ移動します」という文字が表示されます。

さらに、その文字は赤色で、SansSerif の太字、22ポイントの大きめの表示になります。

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

鬼滅の刃風に言えば、鬼殺隊本部の修行ルームに、赤い太字の案内札を取り付けたようなプログラムです。

案内札には「次の修行場へ移動します」と書かれていて、隊士に次の行動を分かりやすく伝えます。

プログラム全体の流れ

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

GUIアプリでは、コンポーネントを「作る」だけでは不十分です。

作ったあとに、Frameへ追加する必要があります。

この「作る」と「置く」を分けて考えることが、AWTコンポーネント理解の第一歩です。

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

Labelフィールドを用意する理由

Sample2.java では、Label型のフィールドを用意しています。

private Label lb;

Label は、文字を表示するためのコンポーネントです。

ここでは lb という変数が、作成したラベルオブジェクトを指します。

この lb に、あとで作成したラベルを代入します。

lb = new Label("次の修行場へ移動します");

鬼滅の刃風に言えば、lb は「案内札を管理するための名札」です。

案内札そのものは new Label で作られます。
lb は、その案内札を後から操作するために使います。

たとえば、文字色を変えたり、フォントを変えたりするときに lb を使います。

Labelを作る

ラベルは、次の行で作っています。

lb = new Label("次の修行場へ移動します");

new Label の丸かっこの中に書いた文字列が、画面に表示されるラベルの内容になります。

Label は、説明文や状態表示に向いています。

たとえば、鬼殺隊本部の画面なら、次のような使い方ができます。

ラベルは、画面上でユーザーに「何を見ればよいか」「何が起きているか」を伝える役割を持ちます。

addでラベルをウィンドウに追加する

ラベルを作っただけでは、まだ画面には表示されません。

作ったラベルをウィンドウに置くために、add を使います。

add(lb);

この add(lb) によって、lb が Frame に追加されます。

この2つはセットで考えると分かりやすいです。

lb = new Label("次の修行場へ移動します");
add(lb);

鬼滅の刃風に言えば、new Label は案内札を作る作業です。

add(lb) は、その案内札を修行案内盤に取り付ける作業です。

案内札を作っただけで倉庫に置いたままでは、隊士には見えません。
案内盤に取り付けることで、はじめて画面に表示されます。

図：Labelを作ってFrameに追加する流れ

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

この図が示していること

この図では、Labelコンポーネントを作り、Frameに追加して画面に表示する流れを表しています。

new Label でラベルオブジェクトを作ります。
そのオブジェクトを lb という変数で扱います。
そして add(lb) によって、Frameの中へ配置します。

この図から分かることは、GUI部品は「作る」と「配置する」の両方が必要だということです。

文字色を変える setForeground

コンポーネントの文字色は、setForeground で変更できます。

Sample2.java では、ラベルの文字色を赤にしています。

lb.setForeground(Color.red);

このコードは、lb が指すラベルの文字色を Color.red にするという意味です。

鬼滅の刃風に言えば、修行案内札の文字を赤くして目立たせています。

たとえば、次のように色を使い分けると、画面の意味が伝わりやすくなります。

GUIでは、文字が表示されているだけでなく、見た人に伝わりやすい見た目であることも大切です。

色は、そのための大事な手段です。

AWTで使える代表的な色

AWTでは、Colorクラスを使って代表的な色を指定できます。

たとえば、案内文を青にしたい場合は、次のように書けます。

lb.setForeground(Color.blue);

注意表示なら赤、完了表示なら緑、通常案内なら黒や青というように、色を使い分けると画面が分かりやすくなります。

鬼滅の刃風に言えば、任務札の色を変えて、緊急任務、通常任務、完了報告を見分けやすくしているようなものです。

フォントを変える setFont

文字の形、大きさ、太さは setFont で変更できます。

Sample2.java では、次のように書いています。

lb.setFont(new Font("SansSerif", Font.BOLD, 22));

この1行では、フォントに関する3つの情報を指定しています。

つまり、SansSerif というフォントで、太字、22ポイントの文字にするという意味です。

鬼滅の刃風に言えば、案内札の文字を普通の小さな筆文字ではなく、大きく太い見出し札にしているようなものです。

ユーザーにしっかり読んでほしい情報は、大きく、読みやすく、目立つ表示にすることが大切です。

よく使うフォント名

AWTで指定できる代表的なフォント名には、次のようなものがあります。

学習段階では、まず SansSerif や Serif を使って、見え方の違いを試すと分かりやすいです。

フォントスタイルの指定

フォントのスタイルは、Fontクラスの定数で指定できます。

たとえば、通常の文字にしたい場合は次のように書けます。

lb.setFont(new Font("SansSerif", Font.PLAIN, 18));

イタリックにしたい場合は、次のように書けます。

lb.setFont(new Font("Serif", Font.ITALIC, 20));

GUIでは、文字の内容だけでなく、フォントの形や大きさも画面の印象に影響します。

鬼滅の刃風に言えば、任務札の文字を「通常の案内」「強調された警告」「格式ある告知」のように変える感覚です。

コンストラクタで画面を組み立てる

Sample2.java のコンストラクタでは、ウィンドウとラベルの初期設定をまとめて行っています。

public Sample2()
{
    super("鬼殺隊 修行ルーム案内");

    lb = new Label("次の修行場へ移動します");

    add(lb);

    lb.setForeground(Color.red);

    lb.setFont(new Font("SansSerif", Font.BOLD, 22));

    addWindowListener(new SampleWindowListener());

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

この中では、次の流れで画面を作っています。

このように、GUIのコンストラクタは「画面を組み立てる場所」として見ると分かりやすいです。

鬼滅の刃風に言えば、修行案内盤を設置する前に、タイトル札、案内札、文字色、文字サイズ、停止機能をまとめて準備している状態です。

閉じる操作に対応する

前回のGUIアプリと同じように、Sample2.java でもウィンドウを閉じたときにアプリケーションを終了できるようにしています。

addWindowListener(new SampleWindowListener());

内部クラスでは、WindowAdapter を継承しています。

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

この処理の流れは次の通りです。

鬼滅の刃風に言えば、修行案内盤の停止札が押されたときに、支援隊士が安全に装置を止める仕組みです。

GUIでは、表示するだけでなく、ユーザーの操作に反応することが大切です。

AWTの主なコンポーネント

AWTには、Label以外にもさまざまなコンポーネントがあります。

代表的なものを整理すると、次のようになります。

鬼滅の刃風にたとえると、次のように考えるとイメージしやすいです。

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

まずは、Label が「文字を表示する部品」であり、add でFrameに追加するという流れをしっかり押さえることが大切です。

図：AWTコンポーネントの種類と役割

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

この図が示していること

この図では、AWTで用意されている代表的なコンポーネントの種類と役割を整理しています。

Frame はウィンドウ全体を表します。

その中に、Label、Button、TextField、TextArea、List、Canvas、Panel などの部品を配置していくことで、使える画面が作られます。

この図から分かることは、GUIアプリは用途の違うコンポーネントを組み合わせて画面を作るということです。

GUIアプリで見た目が大切な理由

GUIでは、処理が正しいだけではなく、見た目の分かりやすさも大切です。

同じ文字を表示するだけでも、色やフォントが違うと、伝わり方が変わります。

たとえば、Sample2.java では、文字を赤色にし、太字で大きくしています。

lb.setForeground(Color.red);
lb.setFont(new Font("SansSerif", Font.BOLD, 22));

このようにすることで、「次の修行場へ移動します」という案内が目立ちやすくなります。

鬼滅の刃風に言えば、通常の小さな巻物文字ではなく、作戦室の隊士全員が見えるように、大きな赤い案内札を掲げるようなものです。

コンポーネントを学ぶときの見方

コンポーネントの種類は多いので、最初は覚えにくく感じるかもしれません。

しかし、次の4つの視点で見ると分かりやすくなります。

今回の Label なら、次のように整理できます。

この見方に慣れると、Button や TextField など新しい部品が出てきても、同じ流れで理解しやすくなります。

鬼滅の刃風に言えば、新しい道具が出てきても、

という流れで考えればよい、ということです。

AWT以外のGUIライブラリにもつながる考え方

Javaには、AWT以外にもGUIアプリを作るための仕組みがあります。

代表的なものとして、Swing や JavaFX があります。

ただし、GUIの基本的な考え方には共通する部分が多いです。

AWTでコンポーネントの基本を学ぶことは、この先のGUI学習にもつながります。

鬼滅の刃風に言えば、最初は小さな修行案内札から学びます。

その基礎が分かると、次に大きな作戦盤、入力装置、選択札、確認窓などを作るときにも理解しやすくなります。

AWTコンポーネントで意識したいこと

今回のSample2.javaで特に大切なのは、ウィンドウに部品を追加して画面を作るという考え方です。

前回は、ウィンドウを表示することが中心でした。

今回は、そのウィンドウに Label という部品を置き、さらに文字色やフォントを設定しました。

GUIアプリは、ウィンドウを表示して終わりではありません。

ウィンドウの中にどんな部品を置くか。
その部品に何を表示するか。
どう見せるか。
どう操作してもらうか。

こうした積み重ねによって、ユーザーにとって使いやすい画面になっていきます。

鬼滅の刃風に言えば、Frame は鬼殺隊本部の修行ルームです。

Label はそこに掲げる案内札です。

add によって案内札を取り付け、setForeground で色を付け、setFont で見やすい文字に整える。

この流れが分かると、AWTコンポーネントは「画面に命を吹き込む部品」として見えてきます。