【実践‼】JFrameの導入（画面作成まで解説）

## 1.事前知識
- [【最新】UbuntuでJavaの環境を構築する方法](https://qiita.com/ryome/items/37c53e9638a9c6ea146a)

- [【初心者でもできる‼】Windows10にJava環境を作る方法（JDK14.0.1）](https://qiita.com/ryome/items/30135570954e36196821)

- [【わかりやすく解説‼】Javaのインスタンスの使い方](https://qiita.com/ryome/items/62ba0d8395af6698053a)

- [【初心者でもできる‼】Windows10にEclipseをインストールする方法（Java環境構築）](https://qiita.com/ryome/items/b47c5acdaa52cffbec58)


事前知識として、上記リンクの内容が必要です。

## 2.JFrameとは

- `JFrame` とは、 `Swing` クラスのひとつで、「外枠を持つ、中心となる `ウィンドウ` 」を作成するためのクラスである。

## 3.Swing Designerのインストール
![01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/97c5fab6-1881-854d-a233-4b53beec7cf4.png)
1. Eclipseを起動し、 `[ヘルプ(H)]→[新規ソフトウェアのインストール]` を選択する。
![02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/2202923e-d47a-adb9-6b53-a5967cf45e4f.png)
2. `追加` ボタンをクリックする。
![03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/556bc5b0-b18d-8de5-28ca-722a6f320fce.png)
3. 名前に `Oxygen` , ロケーションに `http://download.eclipse.org/releases/oxygen` を入力する。　　　
![04.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/82c04c4a-afd5-836c-4a05-ea66b0af802c.png)
4. `[一般ツール]→[Swing デザイナー]` にチェックを付け、 `次へ` をクリックする。
![05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/43157d4f-95a0-d061-404a-c9479ae6c8a6.png)
5. `Swing Designer` を確認し、 `次へ` をクリックする。
![06.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/d4a1cfa9-f79f-473c-156d-dac78cbda252.png)
6. `使用条件の条項に同意します` を選択し、  `完了` ボタンをクリックする。
![07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/0f01cbaf-500e-f38e-40b9-b8c04707fde1.png)
![08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/34cdeccd-2d98-855e-f810-d14903dbf750.png)
7. `ソフトウェアのインストール` が完了後 `再起動` する。

## 4.JFrameの実行
![09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/e935384b-b28a-e8d6-5537-69ec7acd565c.png)
1. Eclipseを再起動後、 `[新規(N)]→[Javaプロジェクト]` を選択する。
![11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/8cfe46a1-637b-bff7-9d3c-4c2979d155e4.png)
2. プロジェクト名に `TestFrame` と入力し、実行環境JREの使用を `JavaSE-1.8` を選択して、 `完了` ボタンをクリックする。
![13.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/de541e92-b1fb-d404-7db4-3e76e64fad4e.png)
3. `[新規(N)]→[その他]` を選択する。　　　
![14.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/4120448f-14b9-d8fc-0109-4f3c4dbfbcb6.png)
4. `[WindowBuilder]→[Swing デザイナー]→[JFrame]` を選択し、 `次へ` をクリックする。
![15.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/6821aa2d-30bb-511a-6599-c394d0bcb0a2.png)
5. パッケージに `test1` , 名前に `Test1` を入力し、 `次へ` をクリックする。
![16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/089bb56e-fb08-3e81-7474-761499775473.png)
6. `[実行(R)]→[実行(S)]→[Javaアプリケーション]` を選択する。
![17.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/449867/a0e08ca5-b686-5cd5-d66e-b0baacb233b7.png)
7. 画像のように画面が表示されれば成功。

## 5.GitHub
GitHubにソースコードを公開しています。

https://github.com/ryomeblog/qiita/tree/master/%E3%80%90%E5%AE%9F%E8%B7%B5%E2%80%BC%E3%80%91JFrame%E3%81%AE%E5%B0%8E%E5%85%A5%EF%BC%88%E7%94%BB%E9%9D%A2%E4%BD%9C%E6%88%90%E3%81%BE%E3%81%A7%E8%A7%A3%E8%AA%AC%EF%BC%89


## 6.関連
- [【覚えておくと便利!!!】Eclipseにおけるコンストラクタとgetter/setterの簡易作成](https://qiita.com/ryome/items/6c487ccc0c39847cd55f)
- [【覚えておくと便利!!!】Eclipseにおける継承クラスの簡易作成](https://qiita.com/ryome/items/4fcf62b4bc60fb6a4d07)
- [【初心者でもできる‼】Javadocの書き方](https://qiita.com/ryome/items/4f2d5928c8aaf195f407)
- [【わかりやすく解説‼】Javaのオーバーロードの使い方](https://qiita.com/ryome/items/f1ca8cc7538f4c6d26c0)
- [【わかりやすく解説‼】Javaのカプセル化の使い方](https://qiita.com/ryome/items/fc44dfad297b35bf7559)
- [【わかりやすく解説‼】Javaの継承の使い方【オーバーライドの解説あり】](https://qiita.com/ryome/items/97b82c5519e39d3f21c1)
- [【わかりやすく解説‼】Javaにおける参照型の型変換](https://qiita.com/ryome/items/2453949b978bf166e204)
- [【わかりやすく解説‼】Javaのポリモーフィズムの使い方](https://qiita.com/ryome/items/a22457797988c548ec62)
- [【わかりやすく解説‼】ArrayListの使い方【Java】](https://qiita.com/ryome/items/cc01a7b6914e5b8b1579)