BLOG ブログ
Spring Boot をvscodeで立ち上げ
![a.o](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/author/15/スクリーンショット 2024-06-17 16.17.01.png)
a.o
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/220831_technicalblog_thumbnail.jpg?1720084774)
こんにちは。バックエンドエンジニアの奥村です。
javaの環境構築記事はまだまだeclipseが多いので、今回はvscodeでspring bootの環境構築を行います。
事前準備
事前にvscodeの拡張をインストールしておきます。
以下をインストールしておくことで、補完機能など使えるようになります。
- Etension Pack for Java
- Spring Boot Extension Pack
spring boot プロジェクト生成
コマンドパレットから、Gradleプロジェクトのspring bootを選択します
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/e9d522e65db678ede9fdb13bfddd7f85-1024x167.png)
spring bootのバージョンを選択します。
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/99f29b6eec2b9330e56199c370206842-1024x103.png)
言語を選択します。今回はjavaなのでjavaを選択します。
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/2dcf6395ace83bbe57d1732932579479-1024x225.png)
パッケージ名を入力します。
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/95b96df10802f883db8a9ed1fed2f997-1024x144.png)
プロジェクト名を入力します。
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/c8b40cbc23570da27e8d05dcf9a35a2b-1024x144.png)
パッケージタイプはjarを選択します。
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/1f983ff15a3e0e2266f4b889bbfa506c-1024x181.png)
javaのバージョンを選択します。
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/6019e461d74810bd2d5ae6abdda29697-1024x253.png)
ライブラリを選択します。ここで選択したライブラリはbuild.gradelのdependenciesに入ります。
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/6d3015f9c1e0c182b4a0b4368c1adba1-1024x484.png)
Spring Web | |
Lombok | setterやgetterなどの冗長なコードの記述を省けます |
Spring Boot DevTools | ファイルを保存した瞬間に、webアプリケーションを自動で再起動してくれます |
Thymeleaf | spring_bootが標準で使うテンプレートエンジンです |
ライブラリを選択し、Enterを押すと以下のような構造でファイルができます
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/b9a6eeb3bdde5dd8387a1df432dd3840.png)
Hello Worldを出力
今回memoアプリの作成を行いたいと思いますが、まずはhello wroldを出力するところまで書きたいと思います。
src/main/resources/templates配下にindex.htmlを作成します。
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/98050d777ad7f43fc780255da95b3ab3.png)
Hello World
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/fde219ca9158403419d7ee4b43966174.png)
src/main/java/com/example/memo/配下にcontroller/MemoController.javaを作成します
package com.example.memo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
/**
* controller
*/
@Controller
public class MemoController {
@RequestMapping("index")
public String index() {
return "index";
}
}
indexメソッドでreturn indexをしている部分でindex.htmlを返しています。
実行
上部にある実行ボタンを押すと、コンパイルとサーバーの起動を行ってくれる
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/472991aa6a0dbcac9db75596af17a16c.png)
localhost:8080にアクセスすると、hello worldの表示が確認できた
![](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/common/7f30caad63d475fb4a129a258aa60a0c.png)
![a.o](https://d2d4ntmhfzi458.cloudfront.net/b067b53686b58a252100fda4f9cadd4e/author/15/スクリーンショット 2024-06-17 16.17.01.png)