Skip to content
Code Blue プログラミング学習ノート
Java/Swing

JFrameとJPanelの組み合わせ(基本コンポーネントの拡張)

JFrameに直接コンポーネントを追加するだけでなく、JPanelを活用することでより柔軟なレイアウトが可能になります。JPanelはコンポーネントをグループ化するための軽量コンテナで、レイアウト管理や視覚的な区分けに役立ちます。

JPanelの基本概念

JPanelは、ラベルやボタン、テキストボックスなどの部品をまとめて配置するためのコンテナです。画面を役割ごとに分けて整理できるため、複雑なGUIでも見やすく保守しやすい構成を作ることができます。ただし、JPanelだけでは画面として表示することはできず、必ずJFrameなどのコンテナの中に配置して使用します。

一方、JFrameはアプリケーションのウィンドウそのものを表すクラスです。タイトルバーや閉じるボタンを持ち、画面として表示する役割を担います。JFrameの中にJPanelを配置し、そのJPanelの中へラベルやボタンなどの部品を追加することでGUIを構築します。

つまり、JFrameは「画面全体(ウィンドウ)」、JPanelは「画面の一部分を整理するための領域」という違いがあります。一般的なGUIアプリケーションでは、1つのJFrameの中に複数のJPanelを配置し、それぞれに異なる役割を持たせる設計がよく用いられます。

JPanelの特徴

  • 複数のコンポーネントをまとめるコンテナ
  • 独自のレイアウトマネージャーを設定可能
  • 背景色やボーダーで視覚的に区分けできる
  • 入れ子構造で複雑なレイアウトを構築可能

JPanelの基本的な使い方

以下のコードを用いてJPanelの基本的な使い方を学びます。JPanelは、ラベルやボタンなどの部品をまとめて配置するためのコンテナです。

最初にメインとなるJPanelを作成し、BorderLayoutを設定することで画面を上部や中央などの領域に分けています。続いて、上部用と中央用のJPanelをそれぞれ作成し、上部にはラベル、中央にはボタンを配置しています。

また、背景色や枠線を設定することで、各パネルの範囲が分かりやすくなっています。最後に、作成したパネルをメインパネルへ追加し、そのメインパネルをJFrameに配置して画面を表示しています。

import javax.swing.*;
import java.awt.*;

public class PanelBasicExample {
    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            JFrame frame = new JFrame("JPanel基本例");
            frame.setSize(400, 300);
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

            // メインパネルの作成
            JPanel mainPanel = new JPanel();
            mainPanel.setLayout(new BorderLayout()); // レイアウトマネージャー設定

            // 上部パネル(NORTH領域)
            JPanel topPanel = new JPanel();
            topPanel.add(new JLabel("上部パネル"));
            topPanel.setBackground(new Color(220, 220, 255)); // 背景色設定

            // 中央パネル(CENTER領域)
            JPanel centerPanel = new JPanel();
            centerPanel.add(new JButton("中央ボタン"));
            centerPanel.setBorder(BorderFactory.createLineBorder(Color.GRAY)); // ボーダー設定

            // コンポーネントをメインパネルに追加
            mainPanel.add(topPanel, BorderLayout.NORTH);
            mainPanel.add(centerPanel, BorderLayout.CENTER);

            // メインパネルをフレームに追加
            frame.add(mainPanel);
            frame.setVisible(true);
        });
    }
}

JPanelを利用することで、画面を部品ごとに整理しやすくなり、見やすく保守しやすいGUIを作成できます。

JPanelを使った実践的な例

以下のコードでは、JPanelを活用してログイン画面を作成する方法を学びます。画面全体を管理するメインパネルを作成し、その中にタイトル、入力フォーム、ボタンの3つのパネルを配置することで、見やすく整理された画面を実現しています。

入力フォームではユーザー名とパスワードを入力でき、ログインボタンが押されると入力内容を取得して認証を行います。今回は「admin」と「password」が入力された場合のみログイン成功のメッセージを表示し、それ以外はエラーメッセージを表示しています。

import javax.swing.*;
import java.awt.*;
import java.awt.event.ActionEvent;
import java.awt.event.ActionListener;

public class PanelPracticalExample {
    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            JFrame frame = new JFrame("ログイン画面");
            frame.setSize(350, 250);
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

            // メインパネル(全体のレイアウト用)
            JPanel mainPanel = new JPanel(new BorderLayout(10, 10));
            mainPanel.setBorder(BorderFactory.createEmptyBorder(20, 20, 20, 20));

            // タイトルパネル(上部)
            JPanel titlePanel = new JPanel();
            JLabel titleLabel = new JLabel("システムログイン");
            titleLabel.setFont(new Font("Meiryo", Font.BOLD, 18));
            titlePanel.add(titleLabel);

            // 入力フォームパネル(中央)
            JPanel formPanel = new JPanel(new GridLayout(4, 1, 5, 5));

            // ユーザー名入力
            JPanel userPanel = new JPanel(new FlowLayout(FlowLayout.LEFT));
            userPanel.add(new JLabel("ユーザー名:"));
            JTextField userField = new JTextField(15);
            userPanel.add(userField);

            // パスワード入力
            JPanel passPanel = new JPanel(new FlowLayout(FlowLayout.LEFT));
            passPanel.add(new JLabel("パスワード:"));
            JPasswordField passField = new JPasswordField(15);
            passPanel.add(passField);

            formPanel.add(userPanel);
            formPanel.add(passPanel);

            // ボタンパネル(下部)
            JPanel buttonPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));
            JButton loginButton = new JButton("ログイン");
            JButton cancelButton = new JButton("キャンセル");

            // ログインボタンのアクション
            loginButton.addActionListener(new ActionListener() {
                @Override
                public void actionPerformed(ActionEvent e) {
                    String username = userField.getText();
                    char[] password = passField.getPassword();

                    // 簡易認証(実際には適切な認証処理が必要)
                    if (username.equals("admin") && new String(password).equals("password")) {
                        JOptionPane.showMessageDialog(frame, "ログイン成功!");
                    } else {
                        JOptionPane.showMessageDialog(frame, 
                            "ユーザー名またはパスワードが不正です",
                            "エラー",
                            JOptionPane.ERROR_MESSAGE);
                    }
                }
            });

            buttonPanel.add(loginButton);
            buttonPanel.add(cancelButton);

            // メインパネルに各パネルを追加
            mainPanel.add(titlePanel, BorderLayout.NORTH);
            mainPanel.add(formPanel, BorderLayout.CENTER);
            mainPanel.add(buttonPanel, BorderLayout.SOUTH);

            frame.add(mainPanel);
            frame.setVisible(true);
        });
    }
}

このようにJPanelを使って画面を役割ごとに分けることで、レイアウトを管理しやすく、保守性の高いGUIアプリケーションを作成できます。

JPanelのカスタマイズ方法

1. 背景色の設定

JPanel panel = new JPanel();
panel.setBackground(Color.LIGHT_GRAY);

2. ボーダーの設定

// 線ボーダー
panel.setBorder(BorderFactory.createLineBorder(Color.BLUE));

// タイトル付きボーダー
panel.setBorder(BorderFactory.createTitledBorder("設定項目"));

// 複合ボーダー
Border lineBorder = BorderFactory.createLineBorder(Color.RED);
Border emptyBorder = BorderFactory.createEmptyBorder(5, 5, 5, 5);
panel.setBorder(BorderFactory.createCompoundBorder(lineBorder, emptyBorder));

3. レイアウトマネージャーの設定

// GridLayout (行, 列, 水平間隔, 垂直間隔)
panel.setLayout(new GridLayout(2, 3, 5, 5));

// FlowLayout (配置, 水平間隔, 垂直間隔)
panel.setLayout(new FlowLayout(FlowLayout.LEFT, 10, 10));

JPanelの利点

  1. レイアウトのモジュール化 – 関連するコンポーネントをグループ化
  2. コードの整理 – 論理的なブロックごとにパネルを分離
  3. 再利用性 – 同じパネルを複数のフレームで使用可能
  4. 視覚的階層 – ボーダーや色で画面の構造を明確化

ネストしたJPanelの例

次はJPanelを入れ子(ネスト)にして複雑な画面レイアウトを作成する方法を学びます。最初に画面全体を管理するメインパネルを作成し、その中にヘッダー、コンテンツ、フッターの3つのパネルを配置しています。

さらに、コンテンツパネルの中を左右に分割し、左側にはメニューボタン、右側にはテキストエリアを配置しています。このようにJPanelの中へさらにJPanelを配置することで、画面を役割ごとに細かく分割でき、見やすく整理されたGUIを作成できます。

import javax.swing.*;
import java.awt.*;

public class NestedPanelExample {
    public static void main(String[] args) {
        SwingUtilities.invokeLater(() -> {
            JFrame frame = new JFrame("ネストしたパネル例");
            frame.setSize(500, 400);
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

            // メインパネル(BorderLayout)
            JPanel mainPanel = new JPanel(new BorderLayout(5, 5));
            mainPanel.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));

            // ヘッダーパネル(NORTH)
            JPanel headerPanel = new JPanel();
            headerPanel.setBackground(new Color(200, 230, 255));
            headerPanel.add(new JLabel("アプリケーションタイトル"));

            // コンテンツパネル(CENTER - GridLayout)
            JPanel contentPanel = new JPanel(new GridLayout(1, 2, 10, 0));

            // 左サイドバー
            JPanel leftPanel = new JPanel(new GridLayout(3, 1, 0, 5));
            leftPanel.setBorder(BorderFactory.createTitledBorder("メニュー"));
            leftPanel.add(new JButton("ホーム"));
            leftPanel.add(new JButton("設定"));
            leftPanel.add(new JButton("ヘルプ"));

            // 右メインコンテンツ
            JPanel rightPanel = new JPanel(new BorderLayout());
            rightPanel.setBorder(BorderFactory.createTitledBorder("コンテンツ"));
            rightPanel.add(new JTextArea(10, 30), BorderLayout.CENTER);

            contentPanel.add(leftPanel);
            contentPanel.add(rightPanel);

            // フッターパネル(SOUTH)
            JPanel footerPanel = new JPanel(new FlowLayout(FlowLayout.RIGHT));
            footerPanel.add(new JLabel("Copyright © 2023"));

            // メインパネルに追加
            mainPanel.add(headerPanel, BorderLayout.NORTH);
            mainPanel.add(contentPanel, BorderLayout.CENTER);
            mainPanel.add(footerPanel, BorderLayout.SOUTH);

            frame.add(mainPanel);
            frame.setVisible(true);
        });
    }
}

実際のアプリケーションでも、このようなパネルのネストはよく利用される設計方法です。JPanelを活用することで、複雑なレイアウトでもコードを整理しながら構築できます。次の章で学ぶ「レイアウトマネージャーの基礎」と組み合わせることで、よりプロフェッショナルなGUIを作成できるようになります。