LoginSignup
0
1

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

Last updated at Posted at 2024-05-07

1.Eclipseのダウンロード(Javaを使う前提で進めます。)

Eclipseのダウンロードは以下のURLからダウンロードしてください。
Pleiades All in One
 ※ちなみに「Pleiades All in One」はEclipse 本体に、日本語化を行うための Pleiades プラグイン、その他プラグインをまとめたパッケージ(つまりはEclipseと便利なツールが入ってるソフトである)

2.Eclipse起動

① ダウンロードしたフォルダを見つけて(自分は「C:\pleiades\2023-06\eclipse」の中にあった)以下の画像のファルダ内にある「eclipse.exe」をクリックすると「Eclipse」が起動できる
image.png
② 「eclipse.exe」をクリックした後、以下のような画面になるので「起動」をクリック
image.png
③ 以下のように「Eclipse」が起動する
image.png

3.EclipseでJavaの簡単なプロジェクトを作ってみる

①上記「Eclipse」の初期画面の「新規 Spring スターター・プロジェクトの作成」をクリック
②以下のような画面が出てくるので「名前」という所に「hello」と入力し、「次へ」をクリック
image.png
③次のような画面が出てくるので以下のように4つチェックをつけて「次へ」をクリック
image.png

④以下の画面が出てきたら「完了」をクリックして少し待つ
image.png
⑤少し待つと画面左上に「hello」というフォルダができる
image.png
⑥「hello」のフォルダを左クリックすると以下のようにいろいろ出てくる
image.png
⑦その中の「src/main/java」と「src/main/resources」をそれぞれ左クリックすると以下のような画面になる
image.png
⑧「com.example.demo」という所を選択(左クリック)して右クリックするといろいろ出てくるので「新規→パッケージ」をクリックする
image.png
⑨以下のような画面が出てくるので、「名前」の所を「com.example.demo.controller」と入力して「完了」をクリック
image.png
⑩以下のように「com.example.demo」の下に「controller」が作成される
image.png
⑪「controller」を選択(左クリック)して右クリックするといろいろ出てくるので「新規→クラス」をクリックする
image.png
⑫以下のような画面が出てくるので「名前」に「HelloController」と入力して「完了」をクリック
image.png
⑬「controller」の下に「HelloController.java」が作成されているのでそれを左クリック
image.png
⑭そうすると右に「HelloController.java」の以下のようなコードが表示される
image.png
⑮上記のコードをすべて消して下記のコードを記載して保存する(Ctrl+S)

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

⑰以下のような画面が出てくるので「ファイル名」を「index.html」と入力して「完了」をクリック
image.png
⑱以下のように「templates」の下に「index.html」が作成されているのでそれを左クリック
image.png
⑲そうすると右に「index.html」の以下のようなコードが表示される
image.png
⑳上記のコードをすべて消して下記のコードを記載して保存する(Ctrl+S)

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
㉒下記のURLをクリックして以下のような画面が出てくれば成功!
http://localhost:8080/
image.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

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

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1