#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を作成します。
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
となるように作成します。
<!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投稿となります。
今後も自分自身勉強していく上で知ったことなど、記事にしていこうと思ってます。
不明点や改善点、感想などがあったらコメント頂けると嬉しいです。
あと、参考になったら「いいね」もお願いします！