はじめに
VSCodeを使って、Spring Bootで作るWebアプリケーションを作成しました。画面に"Hello World!"と表示するだけの簡単なアプリケーションです。
想定開発環境
OS: Windows10 64bit
Visual Studio Code: 1.51.1
Java: Java14
※Mavenプロジェクトにて作成します。
開発環境準備
VSCodeに以下の拡張機能をインストールしておく。
・Java Extension Pack
https://marketplace.visualstudio.com/items?itemName=vscjava.vscode-java-pack
・Spring Boot Extension Pack
https://marketplace.visualstudio.com/items?itemName=Pivotal.vscode-boot-dev-pack
プロジェクトの作成
- Visual Studio Codeで「コマンドパレット」（Ctrl + Shift + p）を表示、Spring bootのプロジェクトを作成します。
コマンドパレットでの操作
-
「Spring Initializr: Generate a Maven Project」を選択
-
「Specify Spring Boot version」 Spring Bootのバージョンを選択します。今回は特に指定がないので、2020/12時点の最新（2.4.0）を選択
-
「Specify project language」使用する言語を選択。今回はJavaを選択
-
「Input Group Id」パッケージ名を入力。
例：com.example -
「Input Artifact Id」プロジェクト名を入力。
例：demo -
「Specify packaging type」パッケージタイプ：今回はwarにします。（jarでもOK）
-
「Specify Java type」使用するJavaのバージョンが求められるので、使用するJavaのバージョンを選択。今回はJava14を使用。
-
「Search for dependencies」Mavenプロジェクトなので、依存関係の選択があります。今回は、「Webアプリを作る」「画面を表示させる」という目的があるので、以下2つを選択します。
- Spring Web
- Thymeleaf
ここまでやると、プロジェクトの保存先を聞かれます。プロジェクトの保存場所を選択してください。
- 作成されるディレクトリは以下のような構成です。
- DemoApplication.java, ServletInitializer.javaがデフォルトで実装されています。
|― src
| |― main
| | |― java
| | | |― com
| | | |― example
| | | |― demo(プロジェクト名)
| | | |― DemoApplication.java（デフォルトで作成される）
| | | |― ServletInitializer.java（デフォルトで作成される）
| | |― resources
| | |― static/ (静的ファイル)
| | |― templates/ (テンプレートファイル)
| | |― application.properties (環境独自の設定ファイル)
| |― test
| |― java
| |― com
| |― example
| |― demo(プロジェクト名)
| |― DemoApplicationTests.java
|― .gitignore
|― HELP.md
|― mvnw
|― mvnw.cmd
|― pom.xml (Mavenの設定ファイル)
アプリケーションの作成
- /demo/src/main/java/com/example/demo/controller ディレクトリ配下に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";
}
}
- /demo/src/main/templates内にsample.htmlを作成します。（sample.html）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
- Spring bootアプリケーションの実行
VSCode左下の「SPRING-BOOT DASHBOARD」を選択し、[start] or [debug] を選択
※ Spring Bootに内包されたTomcatが起動し、実装したアプリがコンパイルされる。
表示確認
- ブラウザにて表示確認。"Hello World!"と表示されるはずです。
http://localhost:8080/sample
終わりに
- DBからデータ取得して表示させる等、より本格的なWebアプリケーション開発の記事を挙げる予定です。
乞うご期待！
参考
Spring BootをVSCodeで「Hello World」を表示させてみた
https://tech-lab.sios.jp/archives/19941