2024年　Eclipse + Java + Spring Boot 使い方（ダウンロード→画面に「Hello World」表示まで）丁寧に順序立てて説明　（画像付き）

# １．Eclipseのダウンロード（Javaを使う前提で進めます。）
Eclipseのダウンロードは以下のURLからダウンロードしてください。
・[Pleiades All in One](https://willbrains.jp/)
　※ちなみに「Pleiades All in One」はEclipse 本体に、日本語化を行うための Pleiades プラグイン、その他プラグインをまとめたパッケージ（つまりはEclipseと便利なツールが入ってるソフトである）
 # ２．Eclipse起動
①　ダウンロードしたフォルダを見つけて（自分は「C:\pleiades\2023-06\eclipse」の中にあった）以下の画像のファルダ内にある「eclipse.exe」をクリックすると「Eclipse」が起動できる
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/1c5069dd-1865-0b55-8e4d-d9ed05e5d1f9.png)
②　「eclipse.exe」をクリックした後、以下のような画面になるので「起動」をクリック
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/15ab27d5-7ab0-ab21-ff7e-3d47a1c0ddcc.png)
③　以下のように「Eclipse」が起動する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/8c6d2b06-6944-9332-9301-619f3a246626.png)
 # ３．EclipseでJavaの簡単なプロジェクトを作ってみる
 ①上記「Eclipse」の初期画面の「新規 Spring スターター・プロジェクトの作成」をクリック
 ②以下のような画面が出てくるので「名前」という所に「hello」と入力し、「次へ」をクリック
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/331cc51d-49ed-3c2d-3b98-5a7d1a04cb54.png)
③次のような画面が出てくるので以下のように４つチェックをつけて「次へ」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/42c96716-c5bf-2234-986d-ad718091eb84.png)

④以下の画面が出てきたら「完了」をクリックして少し待つ
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/50c6cfde-6e4b-bd69-d345-dcf7116bbd42.png)
⑤少し待つと画面左上に「hello」というフォルダができる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/f53f43d5-5f07-8525-27c4-f3d248df2052.png)
⑥「hello」のフォルダを左クリックすると以下のようにいろいろ出てくる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/028efe67-7763-6fff-0b4f-bca34f3d10c1.png)
⑦その中の「src/main/java」と「src/main/resources」をそれぞれ左クリックすると以下のような画面になる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/da640565-c472-94ad-705b-64b4808e926e.png)
⑧「com.example.demo」という所を選択（左クリック）して右クリックするといろいろ出てくるので「新規→パッケージ」をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/80504ce2-fafd-9801-4304-83adf42b1f0c.png)
⑨以下のような画面が出てくるので、「名前」の所を「com.example.demo.controller」と入力して「完了」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/312cb381-030c-72cc-3780-68f1c0df92ff.png)
⑩以下のように「com.example.demo」の下に「controller」が作成される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/fb88289b-a25b-3cda-8d67-120b5b0626c5.png)
⑪「controller」を選択（左クリック）して右クリックするといろいろ出てくるので「新規→クラス」をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/d5a51c52-9090-f013-004b-072f79df3ddf.png)
⑫以下のような画面が出てくるので「名前」に「HelloController」と入力して「完了」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/5146159f-72e5-0f97-be55-626f453195e8.png)
⑬「controller」の下に「HelloController.java」が作成されているのでそれを左クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/39238313-0532-5878-a858-1d5aaca79044.png)
⑭そうすると右に「HelloController.java」の以下のようなコードが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/83188f16-beca-786d-fdc9-49ccc56eb3c0.png)
⑮上記のコードをすべて消して下記のコードを記載して保存する（Ctrl＋S）
```java:HelloController.java
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class HelloController {
    @GetMapping("/")
    public String helloWorld(Model model) {
        model.addAttribute("message", "Hello World!!");
        return "index";
    }
}
```
⑯「templates」を選択（左クリック）して右クリックするといろいろ出てくるので「新規→HTMLファイル」をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/226f21d1-eb43-f1aa-c4dc-620fb1d85581.png)

⑰以下のような画面が出てくるので「ファイル名」を「index.html」と入力して「完了」をクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/58e698dd-ab57-3009-20fd-57e0e176e107.png)
⑱以下のように「templates」の下に「index.html」が作成されているのでそれを左クリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/c4e68a4b-e2cd-2116-bfed-c6cd0850101f.png)
⑲そうすると右に「index.html」の以下のようなコードが表示される
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/950c364a-fe62-b7cb-8fc3-6a9adac0a126.png)
⑳上記のコードをすべて消して下記のコードを記載して保存する（Ctrl＋S）
```html:index.html
<!DOCTYPE html>
<html>
<head>
    <title>Hello</title>
    <meta charset="utf-8" />
</head>
<body>
    <h1>画面に文字を表示させる</h1>
    <h2><span th:text="${message}"></span></h2>
</body>
</html>
```
㉑フォルダの「hello」を選択（左クリック）して右クリックするといろいろ出てくるので「実行→Spring Boot アプリケーション」をクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/0f575d0e-10a9-04ae-0411-0b00a8387313.png)
㉒下記のURLをクリックして以下のような画面が出てくれば成功！
「[http://localhost:8080/](http://localhost:8080/)」
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/6659032d-a2d0-5ff6-cb9e-0850c13c885a.png)

# 補足
○フォルダ構成
今回は「src/main/java」の下に「Controller」を「src/main/resources」の下の「templates」に「index.html」を作ったがフォルダ構成の基本として以下のようになっている。
（画像は例として挙げている）

・「src/main/java」の「com.example.demo（ここの名前は変更できる）」の下にJavaのプログラムを置く（Controllerクラスなど用途によって種類分けする）
・「templates」の下には「htmlファイル」
・「static」のフォルダ下には「cssファイル」と「jsファイル（Javascriptのファイル）」
　（cssとjsのフォルダを作って分ける）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3484022/0a3591d1-577c-2c80-47b3-cc06bd0b9980.png)

以上です。結構これでもかというほど細かく画像を貼って説明ました。ほかの方の一助となっていれば幸いです。