こんにちは。サイオステクノロジーの川田です。
今回はSpring Boot初心者がVSCodeを使って「Hello World」を表示した手順をご紹介致します。
拡張機能のインストール
まず開発をする際に必要となる2つの拡張機能をインストールします。
●Spring Boot Extension Pack
下記のショートカットキーから検索欄に入力
【Mac】Command + Shift + X
2つインストールが終わりましたら、次はプロジェクトの作成へと続きます。
プロジェクトの作成
コマンドパレットでSpringを検索
【Mac】Command + Shift + P
「Spring Initializr: Generate a Maven Project」を選択
「Java」を選択
一番上の「Java」を選択します。
パッケージ名を入力
パッケージ名を入力し、「Enter」を押します。
例：com.example
※取り消したい場合は「Esc」
プロジェクト名を入力
プロジェクト名を入力し、「Enter」を押します。
例：demo
※取り消したい場合は「Esc」
バージョンの選択
Spring Bootのバージョンを指定します。
依存関係の選択
依存関係(2つ)を選択し、「Enter」を押します。
●Thymeleaf
保存先の指定
プロジェクトが作成される保存先を指定します。
VSCodeの右下に「Successfully generated」と表示されていれば成功です！
ディレクトリ構成
作成されたディレクトリ構成をまとめてみました。
|― src | |― main | | |― java | | | |― com | | | |― example | | | |― demo(プロジェクト名) | | | |― DemoApplication.java | | |― resources | | |― static/ (静的ファイル) | | |― templates/ (テンプレートファイル) | | |― application.properties (環境独自の設定ファイル) | |― test | |― java | |― com | |― example | |― demo(プロジェクト名) | |― DemoApplicationTests.java |― .gitignore |― HELP.md |― mvnw |― mvnw.cmd |― pom.xml (Mavenの設定ファイル)
Hello Worldを表示
それではHello Worldを表示させていきます！
HelloController.javaを作成
src/main/java/com/example/demo/の配下にcontrollerディレクトリを作成します。
作成したらcontrollerディレクトリの中に「HelloController.java」を作成していきます。
2.フォルダー名(例:controller)を入力して作成
2.ファイル名(例:HelloController.java)を入力して作成
作成した「HelloController.java」を以下の内容に修正します。
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class HelloController {
@RequestMapping("/hello")
public String index() {
return "hello";
}
}
hello.htmlを作成
src/main/resources/templates/内にhello.htmlを作成します。
作成した「hello.html」を以下の内容に修正します。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello!!!</title>
</head>
<body>
<h1>HelloWorld</h1>
</body>
</html>
アプリを実行
実行 > デバッグの開始 を選択します。
※初回時はlaunch.jsonが生成されるため、再度「実行 > デバッグの開始」を選択してください。
デバッグが開始されるとSpring Bootのアプリケーションがローカルサーバーに立ち上がります。
Hello Worldを表示してみよう！
「https://localhost:8080/hello」にアクセスすると、「Hello World」を表示することができました！
切断するには上にある停止ボタンを押します。
以上となります。
最後までお読みいただきまして、ありがとうございました。
