111
Help us understand the problem. What are the problem?

posted at

updated at

VSCodeでSpringBootのプロジェクト作成からアプリケーションの実行まで

概要

VSCodeを使ってSpringBootのWebアプリケーションを実行するまでの手順です。

環境

$ sw_vers
ProductName:    macOS
ProductVersion: 11.6.2
BuildVersion:   20G314

$ java -version
openjdk version "1.8.0_322"
OpenJDK Runtime Environment Corretto-8.322.06.1 (build 1.8.0_322-b06)
OpenJDK 64-Bit Server VM Corretto-8.322.06.1 (build 25.322-b06, mixed mode)

$ code -v
1.64.2
f80445acd5a3dadef24aa209168452a3d97cc326
x64

拡張機能のインストール

VScodeでSpringBootを開発するときに必要な拡張機能をインストールします。

Extension Pack for Java
スクリーンショット 2022-02-19 22.51.45.png

Spring Boot Extension Pack
スクリーンショット 2022-02-19 22.54.03.png

プロジェクトの作成

拡張機能をインストール後にプロジェクトを作成します。
以下の初期設定は一例ですので、適宜お好きな物を選択してください。

コマンドパレットを開いて(command + shift + p)

Spring Initializr: Create a Maven Projectを選択
スクリーンショット 2022-02-19 22.57.00.png

プロジェクトの言語でJavaを選択
スクリーンショット 2022-02-19 22.58.55.png

パッケージ名を入力
スクリーンショット 2022-02-19 22.59.35.png

プロジェクト名を入力
スクリーンショット 2022-02-19 23.00.03.png

パッケージの形式でJarを選択
スクリーンショット 2022-02-19 23.00.15.png

Javaのバージョンを選択
スクリーンショット 2022-02-19 23.00.27.png

依存関係でSpring WebとThymeleafを選択
スクリーンショット 2022-02-19 23.01.42.png

最後にプロジェクトの保存場所を選択します。

アプリケーションの実行

保存したプロジェクトをVSCodeで開くとmainメソッドが作成されています。
(パッケージ名やプロジェクト名によって場所は変わります)

src/main/java/com/example/demo/DemoApplication.java
package com.example.demo;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class DemoApplication {
    public static void main(String[] args) {
        SpringApplication.run(DemoApplication.class, args);
    }
}

同じフォルダ内にcontrollerフォルダを作成して、
SampleController.javaを作成します。

src/main/java/com/example/demo/controller/SampleController.java
package com.example.demo.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class SampleController {
    @RequestMapping("/sample")
    public String sample() {
        return "sample";
    }
}

src/main/resources/templatesにsample.htmlを作成します。

src/main/resources/templates/sample.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Sample</title>
    </head>
    <body>
        <h1>HelloWorld</h1>
    </body>
</html>

mainメソッドに表示されているRunをクリックするとローカルサーバーが立ち上がります。
スクリーンショット 2022-02-19 23.29.48.png

http://localhost:8080/sample に接続するとsample.htmlの内容が表示されているのが確認できます。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
111
Help us understand the problem. What are the problem?