はじめに
今回は、VSCodeでSpring Bootでプロジェクトを作成し、実行するまでの手順をログとして記載していきます。
前提条件
以下の条件が実施済みであること
・VSCodeでJavaを使用できる構築がされていること
【開発環境構築】VS CodeでJavaを使用するための環境構築を実施する – SEもりのLog (selifemorizo.com)
VSCodeの設定
VSコードへ「Spring Boot」を使用する設定を追加していきます。
Spring Boot Extension Packのインストール
「Ctrl + Shift + x」キー、または左タブの拡張機能から「Spring Boot Extension Pack」と検索しインストールを実行します。
Spring Bootのプロジェクトを作成する
「ファイルを作成する」から「New Java Class」を選択する
「Spring Boot」を選択する
ビルドツールを選択する
「Maven」を指定します。
バージョンを選択する
「3.1.5」を指定します
言語を選択する
「Java」を指定します。
GroupIDを決定する
任意でGroupIDの値を指定します。今回はデフォルトのままとします。
Artifact IDを決定する
任意でArtifact ID（プロジェクトを識別するＩＤ）の値を指定します。
パッケージタイプを選択する
「jar」ファイルを指定します。
Javaのバージョンを選択する
ライブラリ（参照）を選択する
以下、2つを指定します。
「Spring Web」
「Thymeleaf」
作成先を指定する
任意のディレクトリを指定する。
プロジェクトが作成されたことを確認
プロジェクトを実行する
Controllerの作成
Controllerフォルダ/ファイルを作成する
├─main
│ ├─java
│ │ └─com
│ │ └─example
│ │ └─test
│ │ │ TestApplication.java
│ │ │
│ │ └─Controller
│ │ HelloWorldController.java
│ │ IndexController.java
│ │
HelloWorldController.javaを編集する
package com.example.test.Controller;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
public class HelloWorldController
{
@GetMapping("/")
public String index()
{
return "HelloWorld";
}
}
IndexController.javaを編集する
package com.example.test.Controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class IndexController
{
@RequestMapping("/test")
public String index()
{
// returnするHTMLのファイル名
return "Index";
}
}
HTML（View）の作成
index.htmlファイルを作成する
├─main
│ ├─java
│ └─resources
│ │ application.properties
│ │
│ ├─static
│ └─templates
│ index.html
│
index.htmlファイルを編集する
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HelloWorld</title>
</head>
<body>
<h1>HelloWorld</h1>
</body>
</html>
実行
F5キー、またはタブの実行からプロジェクトを実行後にブラウザで実装した内容が表示されることを確認する。
【ブラウザで指定するURL】
“http://localhost:8080/”
“http://localhost:8080/test”
2つの画面で両方とも「HelloWorld」と表示されたら成功です。
ドキュメント
Spring リファレンスドキュメント – Java フレームワーク (pleiades.io)
最後に
以上、ログになります。
これからも継続していきましょう！！
コメント