SwingによるGUI

この記事は BABY JOB Advent Calendar 2022 の 12 日目の記事です。

どうも！フロントエンドエンジニアの桧垣です✨
ただいま絶賛バックエンドの勉強中🥺
Javaの本を読みながら四苦八苦しています。

今日はその本の中で実際に出てきた「SwingによるGUI」というやつの記事を書いてみようと思います。
だってネタないんやもん🥺いきなり「アドベントカレンダーやるから全員参加ね？」って言われたんやもん🥺

ちなみにjQueryとPHPは少しわかるけどJavaはマジでゼロベースなので「できる人」には何も役に立たないかもですwww
ごめんねw

• 使用PC：MacBook Pro（13インチ、M2、2022）
• macOS：Monterey バージョン12.5.1
• Javaバージョン：Java 19

SwingによるGUI

Javaでウインドウを出すためのプログラムにはSwingという名前がついているらしい…
よくわからんからそれは置いといて、このSwingを使ってウインドウを出していきましょう！

JShellを起動してみよう！

まずJShellを起動します。
ターミナルを開いて

jshell

と打ってリターンを押してみましょう。
| JShellへようこそ -- バージョン19
| 概要については、次を入力してください: /help intro
と表示されて
jshell>
と文頭に出るようになります。

以後コピペする場合はjshell>以降の文字列をコピーしてください。

ウィンドウを出してみよう！

まずは準備呪文を唱えます🧙

jshell> import javax.swing.*

Swingでの開発に必要なクラスはjavax.swingというパッケージに入っているのでimportを行っておくらしい。
（私はまだクラス？パッケージ？ってレベルなので「ふーん」としか思っていません）
※パッケージ名はjavaではなくjavaxで始まっているので注意

次に生成呪文を唱えます🧙

jshell> var f = new JFrame("test")

Swingでウインドウを表すのはJFrameというクラスらしい。
newを使ってコンストラクタを呼び出してJFrameオブジェクトを生成するのだとか…
（コンストラクタって何🥺）

*コンストラクタとは、クラスからオブジェクトを作成した際に、自動的に実行されるメソッドのこと

この時点ではよくわからない結果が表示されていますが気にせず続けましょうって書いてるけど、どの時点でもよくわかってないけど続けてみる。
※'test'は好きな名前に変えて大丈夫👍

いよいよ召喚呪文を唱えます！🧙

jshell> f.setVisible(true)

setVisibleメソッドはウインドウの表示状態を設定するらしく、引数にtrueという値を渡すとウインドウが表示され、falseという値を渡すとウインドウが隠されます。
これはわかる！trueとかfalseは私もある程度仲良しだわ✨

何か出たよね？

こっそりおる

これじゃあ何もできません。小さすぎるんやって。

小さすぎるので拡大呪文を唱えます🧙

jshell> f.setSize(600, 400)

見覚えある人が出てきた

これだけじゃただの見覚えのある人なので入力エリアを作ってみましょう。

まず準備として一行テキストを扱うJTextFieldを定義します。

準備呪文を唱えましょう🧙

jshell> var t = new JTextField()

上がNorth、下がSouth、中央がCenterで右がEast、左がWestになるので、まずは上に入力エリアを作ります。

次に生成呪文を唱えます🧙

jshell> f.add("North", t)

ウインドウにコンポーネントを配置する場合はaddメソッドを使います。
大文字、小文字の区別があるので注意が必要。
上がNorthなのでNorthにtをaddする感じです。（なんとなくわかってきた）

そしてお決まりの召喚呪文を唱えます！🧙

jshell> f.validate()

1行の入力エリアが出現

直接入力もできるんだけど、ここはあえてコマンドの方で入れてみます！

jshell> t.setText("入れれたで！")

入れれたで！

Swingのコンポーネント

クラス	説明
JFrame	ウインドウ
JTextField	１行テキスト
JTextArea	複数行テキスト
JButton	ボタン
JPanel	パネル。レイアウトを組み合わせるときに使う
JLabel	ラベル。文字や画像の表示に使う

では、２つ目の入力領域を作ってみましょう。

まずは準備呪文🧙

今回はコンストラクタに引数を渡して最初から文字が入るようにします。
変数t2に定義してあげましょう🙋‍♀️
引数なしのときは（）ですが引数に文字列を入れるときは（””）の中に入れます。
JSとかも同じですね。

jshell> var t2 = new JTextField("初めから文字入れれるんよ")

次に生成呪文を唱えます🧙

そしてどこに表示させるかを指定してt2をaddします。

jshell> f.add("South", t2)

んでもってお約束の召喚呪文を唱えます！🧙

jshell> f.validate()

次はボタンを作ってみましょう

ボタンを押したら上のテキストがコピーされるようにします

まずはやっぱり準備呪文🧙

jshell> var b = new JButton("ボタンやで")

JButtonオブジェクトを生成して変数bに割り当てました。
このボタンをCenterに配置します。

生成呪文を唱えます🧙

jshell> f.add("Center", b)

そしてお約束の召喚呪文を唱えます！🧙

jshell> f.validate()

ボタンやで…うん、せやな。

これではまだボタンを押しても何も起こりません。
そりゃそうだ。だって動作定義してないもん。

ということでやっぱり呪文🧙

ボタンを押した時の処理を定義するのはaddActionListenerメソッドです。
addAcまで入れてtabキーを押すと補完されるので引数は次のように入力してください。

jshell> b.addActionListener(ae -> t.setText(t2.getText()))

これでボタンを押すと…

下の文字が上に反映される！

いい感じにコピーが完了したところで、今回はここまで！

JShellの終了

最後にJShellを終了させて終わりにします。

jshell> /exit

通常、コマンドを終了させるときはexitで終了させますがJShellの終了は/exitなので注意が必要です。
/exitでJShellを終了させた後にexitでプロセスを完了させてから閉じましょう✨

皆さまいかがでしたでしょうか？うまくいきましたか？

おわりに

私はここまでやっていく中で「こいつの可能性は未知数だな」って思いました。
他にも座標を指定して線を描画して絵を描いたりできるようなので、興味がある方は調べてやってみてください。
Javaゼロベースの私がJavaを理解できるようになるためにお願いして会社に買ってもらった本で、ここまでは読んでいたのですがなかなか理解できず…今回アドベントカレンダーの話が来たときにあえてこれを書こうともう１回読み返したことで私の中のJShellの理解がかなり深まりました。
var = 〇〇で変数の定義をすることはJSやPHPを触っていた兼ね合いで馴染みが深かったのですが、今回の記事のおかげで「召喚呪文全部一緒やん！w」って気付けたのはかなりの成果だったと思います🥺

記事自体はアドベントカレンダー等のイベントのときしか書かないと思いますが（書けよ）いつか成長した姿を見せられる時が来たらいいなと思ってます✨
今からJavaを勉強しようと思ってる皆さま、一緒にがんばりましょう🥰

参考文献

この記事は技術評論者さまの「プロになるJava」という本を参考に書きました。
詳しく知りたい方は是非書店またはAmazonで調べてみてください✨