【初心者】VSCodeでSpring Boot を動かしてみる
はじめに
- 駆け出しペンギン、最初の投稿です。この記事をやってくることが会社の研修課題なのですが、やるついでに手順を記事にメモしていきたいなと思います（VSCode + SpringBoot(Gradle)でWebアプリの開発環境を構築する）。
- ところどころ、「これなに？」って思ったところには調べた形跡を載せていくので、初心者の方の助けになればと思います。では、初めていきます。わかるよ、って方は読み飛ばしてください。
- 間違っているところ、わかりにくいところ、直した方がいいところがあればご指摘お願いいたします！
手順
作業環境
- MacBook Air(M1,2020)
- macOS Sonoma 14.5
（そろそろ新しいPC欲しいな..）
JDK22.0.1をインストールする
まず、JDKって何だっけ？いきなり気になったので以下の記事を参照。
【初心者】Java?JDK?JRE?JVM 違いを理解したい
ざっくり、以下の4つの概念を理解。今までいかに曖昧な理解だったのかと...。
- JVM: Java Virtual Machineの略で、Javaで作成したプログラムをコンパイルして中間コードとなるJavaクラスファイルを出力する。
- JavaSE/JavaEE/JavaME: Standard/EnterPrise/Micro+Editionの略で、それぞれ目的別のAPIをまとめたもの。
- JRE: Java Runtime Environmentの略で、Javaプログラムを実行するためのセットであり、JVM+APIとなる。バージョンは対応するJavaSEのバージョンに合わせている。
- JDK: Java Development Kitの略で、これさえあれば大丈夫なセットであり、JRE(JVM+API) + Javaプログラムをコンパイルするためのプログラムやデバック用プログラムを含む。これもJavaSEのバージョンに合わせている。
脇道に逸れてしまったが、早速以下からダウンロードする。M1,M2 Macに利用されているCPUアーキテクチャはARM64が搭載されているらしいので「ARM64 DMG Installer」を選択。
VSCodeをインストールする
VSCodeは元から使っていたので特に作業要らず。
以下の公式サイトが参考になりますかな。
VSCode Extentionを追加する
VSCodeの左サイドバーの拡張機能ボタンからマーケットプレイスで検索し、以下の3つをダウンロード。この辺はすんなりいったので本記事では省略します🙇
- Extension Pack for Java
- Spring Boot Extension Pack
- Gradle for Java
Java Homeを設定する
VSCodeの設定を開き、Language Support for Java(TM) by Red Hatの編集からsetting.jsonの一番下に以下を追記。
{
（元の設定）
・・・・・・
・・・・・・,
"java.jdt.ls.java.home": "/Library/Java/JavaVirtualMachines/jdk-22.jdk/Contents/Home"
}
そもそもJava Homeとはなんだ...と調べてみるとJava用の環境変数の一つでこれを設定することでJavaの設定を読み込めるらしい。ふーん。
環境変数
OS自体が持つ共有機能で、すべてのプログラムで共通して使うことが出来ます。
JAVA_HOME
JAVA_HOMEは名前の通り、Java用の環境変数の1つで様々なJavaアプリケーションでJavaの設定を共有出来るように設定します。
JAVA_HOME自体は必須の環境変数ではないため、ご利用のコンピューターによっては環境変数の一覧を確認しても表示されない場合があるため、ご自身での登録が必要です。
Spring Initializerを使ってプロジェクトを作る
- VSCodeで任意のディレクトリにフォルダを作成し、VSCodeで開く
- [ファイル]からワークスペースに追加をしてワークスペースを保存しておく
- Ctrl と Shift と P を同時に押してコマンドパレットを開く。
- Spring Ini と入力し Spring Initializr: Create a Gradle Project を選択する。
- Spring Boot のversion を選択する -> 3.2.4
- projectの言語を選択する -> Java
- projectのGroup Id を入力する -> 任意のId 例：com.example
- Artifact Id を入力する -> 任意のId 例：demo
- packaging type を選択する -> Jar
- Javaのversion を選択する -> 22（今回は22をいれたので）
- dependenciesに追加するライブラリを選択する、選択したら Selected 3 dependenciesを押す。
- Spring Web
- lombok
- Thymeleaf
- Projectを作成するフォルダを選択する -> 先ほど作成したワークスペースを選択し Generate into - this folder を押す
- Spring Bootのプロジェクトが作成されて準備が始まる。
ここで一息、MVCとは？
Thymeleafとかが出てきたので、ここでMVCについて思い出しておく。
MVCというのはMode/View/Controllerの略で、Javaの基本的な設計方針みたいなもの。
実践的にはMVC+Service+Repogitoryで使われていることが多いらしい。
MVCのイメージは以下の図。ユーザー（ブラウザ）から指示を受けるのがControllerで、Viewが画面を作り、Modelがビジネスロジックやデータモデル、データアクセスを担当する。ビジネスロジックをServiceとして切り出したり、データアクセス層をRepogitoryとして分けた方が使いやすくなると理解した。
出典: https://system-kaihatu.com/archives/3204
では、アプリを動かしてみよう
とりあえず起動
DemoApplication.javaを右クリックしてRun Javaから実行してみると、Springの文字が。
アプリの起動自体はできている。
20240625_Spring /usr/bin/env
/Library/Java/JavaVirtualMachin
es/jdk-22.jdk/Contents/Home/bin/
java @/var/folders/72/b_kp5pmn36
31y37vwp8_8g7c0000gn/T/cp_3a9x16
9kcindej0qle1wwtpww.argfile com.
example.demo.DemoApplication
. ____ _ __ _ _
/\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
\\/ ___)| |_)| | | | | || (_| | ) ) ) )
' |____| .__|_| |_|_| |_\__, | / / / /
=========|_|==============|___/=/_/_/_/
:: Spring Boot :: (v3.3.1)
2024-06-25T09:42:36.812+09:00 INFO 60082 --- [demo] [ main] com.example.demo.DemoApplication : Starting DemoApplication using Java 22.0.1 with PID 60082 (/Users/shirano/Desktop/002_Training/20240625_Spring/demo/build/classes/java/main started by shirano in /Users/shirano/Desktop/002_Training/20240625_Spring)
2024-06-25T09:42:36.813+09:00 INFO 60082 --- [demo] [ main] com.example.demo.DemoApplication : No active profile set, falling back to 1 default profile: "default"
2024-06-25T09:42:37.544+09:00 INFO 60082 --- [demo] [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port 8080 (http)
2024-06-25T09:42:37.554+09:00 INFO 60082 --- [demo] [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat]
2024-06-25T09:42:37.555+09:00 INFO 60082 --- [demo] [ main] o.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/10.1.25]
2024-06-25T09:42:37.594+09:00 INFO 60082 --- [demo] [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
2024-06-25T09:42:37.595+09:00 INFO 60082 --- [demo] [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 748 ms
2024-06-25T09:42:37.837+09:00 INFO 60082 --- [demo] [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port 8080 (http) with context path '/'
画面の追加
Controllerの追加
次にブラウザから確認できるようにしたいのでControllerを追加していく。
Applicationと同じ階層にDemoControler.javaを作り以下をコピペでOK。
package com.example.demo;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class DemoController {
@GetMapping("test")
public String getMethodName() {
return "test";
}
}
Viewの追加
あとはHTMLを表示したいので、resources/templatesにindex.htmlを作成して以下をコピペ。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello, World!</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: "Arial", sans-serif;
background: linear-gradient(135deg, #4f79dd 0%, #c3cfe2 100%);
}
.container {
text-align: center;
background-color: rgba(255, 255, 255, 0.8);
padding: 50px;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 3em;
color: #333;
margin: 0;
animation: fadeIn 2s ease-in-out;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Hello, New World!</h1>
</div>
</body>
</html>
もう一度動かしてみる
先ほど動かしたアプリを停止し、もう一度起動してみます。色々やり方ありそうですが、ひとまず止める時は実行中のコンソールでCtrl+Cで止めれるはず。
http://localhost:8080/にアクセスするといい感じの画面が出るようになりました！
終わりに
- VSCodeでのJavaの実行方法とかがまだイマイチなので調べていきたいです。
- 次回はLombokを使ってみたいと思います！
- ちなみに以下のUdemyのコースが上記の内容にとても似ていましたので興味ある方はぜひ。
IntelliJ ではじめる Spring Boot：課題管理アプリを作って学ぶWebアプリケーション開発の基礎
Discussion