#2 ブラウザに「Hello World」を表示させよう！

はじめに

環境構築編については、下の記事を確認してみてくださいな。

今回は、構築した環境でSpringBootをつかってブラウザに「Hello World」していきます！

ゴール

VScodeとSpringBootを使ってブラウザ上に「Hello World!」と表示させる。

実装

前提

VScodeに以下の2つの拡張機能がインストール済みであること。
　・Extension Pack for Java
　・Spring Boot Extension Pack

1.ブランクプロジェクトの作成

まずはブランクプロジェクトをコマンドパレットから作成します。
このブランクプロジェクト、SpringBootを動かすのに必要な諸々が入ったフレームワークのことです。

作成するとこんな感じのフォルダが出来上がります。

作成手順

Spring Initializeの選択

ショートカットキーのCtrl+Shift+Pでコマンドパレットを開き、コマンドを途中まで入力して「>spring Initializr: Create a Maven Project...」選択します。

SpringBootのバージョン選択

なんでも良いのですが、今回は一番上のものを選択。
(SNAPSHOTとついているものは最新版ではありますが、今回は安定版であるついていないものを選びます。)

開発言語の選択

開発言語は、今回はJava一択で。

パッケージのグループIDの入力

グループIDを決めます。グループID+次項で決めるパッケージ名がフルパッケージ名となります。今回は練習なので「com.example」にします。

パッケージ名の入力

パッケージ名を決めます。今回は「hello」にします。
前項とあわせて、フルパッケージは「com.example.hello」となります。

パッケージングタイプの選択

今回は「Jar」を選択します。

Javaのバージョン選択

Javaのバージョンは、#1 環境構築編でインストールしたJavaのバージョンを選びましょぅ。僕は今回、19になります。

依存関係の選択

以下の4つを選択して、「Enter」をおします。
　・Lambok
　・Spring Boot DevTools
　・Spring Web
　・Thymeleaf
名前を途中まで入力すると候補として出てくるので、ハイライトがついたら1回Enterとすると選択されます。

保存先の選択

好きな保存先を選んで保存したら、ブランクプロジェクトの作成完了です。

作成したプロジェクトを開く

最後に、作成したプロジェクトを開きます。
パッケージ名で指定した「hello」が大文字になったフォルダになっているので、フォルダ部分を選択して開きます。

2.コーディング

HelloWorldするのに作成必要なファイルは
　・コントロール用のjavaファイル
　・表示させるhtmlファイル
の2つです。

Javaファィルの作成

メインのJavaとなる「HelloApplication.java」と同じところ、
src/main/java/com/example/hello/HelloWorld.java
となるように、コントローラ用のJavaを作成します。

HelloWorld.java

package com.example.hello;

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

@Controller
public class HelloWorld {
    
    @RequestMapping("/hello")
    public String start() {
        return "HelloWorld.html";
    }
}

このようにファイルが並んでいたらOKです。

htmlファイルの作成

表示させるhtmlファイルは、
src/main/resources/templates/HelloWorld.html
となるように作成します。

HelloWorld.html

<!DOCTYPE html>
<html lang="jp">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HelloWorld</title>
</head>
<body>
    <h1>HelloWorld!</h1>
</body>
</html>

アプリケーションの実行

ファイルを作成したら実行していきます。

アプリケーション起動！！

src/main/java/com/example/helloに入っているHelloApplication.javaを開き、下の画像の赤枠にある「Run」を押します。
エラーが表示されず、terminalがひらけばOKです。

Let's HelloWorld！！！

最後に、ブラウザで
http://localhost:8080/hello
を開いてみましょう。

新たな世界への扉がひらけましたか。
じゃあ、みんなで新しい世界へ挨拶だ。
HelloWorld!

おわり

Javaの開発環境というとeclipseがよくありますが、どうせなら使ってて学習意欲が湧く、若干おしゃれなVScodeを使いたい!ということで、環境を作りました。
本記事は、最短でブラウザ表示させることを目的としているので、SpringBoot自体にはあまり触れませんでしたので、続きはいろいろ調べてみてください。

本記事は初めてのQiita投稿となります。
今後も自分自身勉強していく上で知ったことなど、記事にしていこうと思ってます。
不明点や改善点、感想などがあったらコメント頂けると嬉しいです。
あと、参考になったら「いいね」もお願いします！