VisualStudioCodeでSpringBootアプリケーションを起動するまでの手順を紹介します。
僕は20年ほどJavaの開発に携わってまして初期の頃からEclipseをずっと使っていました。
ここ最近フロントの開発はVSCode、バックエンドの開発はEclipseといった感じで2つのIDEを使い分けていたのですが、開発環境を統一しようと思い今回バックエンドの環境もVSCodeにすることにしました。
Eclipseは自分にとってとても使いやすくショートカットキーもかなり良い感じにカスタマイズして体に染み付いているので開発効率の面で見るとかなりのツールになっているのですが、ツールの統一性を考慮しするとIEDは一つにしたほうがいいのかなと思い、ひとまずVSCodeに絞ってみようと思います。(あとでやっぱりEclisepに戻るかもですが。。)
![](https://fullstacklife.net/wp-content/uploads/2021/07/01.png)
①拡張機能メニューをクリック
②検索ボックスに「spring boot extension」を入力
③Spring Boot Extension Packを選択
![](https://fullstacklife.net/wp-content/uploads/2021/07/02.png)
①インストールボタンをクリック
![](https://fullstacklife.net/wp-content/uploads/2021/07/03.png)
Gettin Started with Spring Boot in VS Codeが表示されたらSpringBootの拡張機能のインストール完了!
まずはプロジェクトを作成するために「コマンドパレット」を開きます。
下記の①~②の手順で開くか「Ctrl + Shift + P」同時押しのショートカットで開きます。
![](https://fullstacklife.net/wp-content/uploads/2021/07/04.png)
①メニューの「表示」をクリック
②コマンドパレットを選択
![](https://fullstacklife.net/wp-content/uploads/2021/07/05.png)
①コマンドパレットに「spring」を入力
②いくつか候補が出てくるので「Spring initializ: Create a Gradle Project..」選択
MavenタイプかGradleタイプどちらでもいいんですが、僕が関わっているプロジェクトではGradleで統一しているので、ここでは Gradleを選択して進めていきます。
![](https://fullstacklife.net/wp-content/uploads/2021/07/06.png)
①Spring Bootのバージョンはスナップショットでない最新バージョンを選択します
![](https://fullstacklife.net/wp-content/uploads/2021/07/07.png)
①言語の選択では「Java」を選択します
![](https://fullstacklife.net/wp-content/uploads/2021/07/08.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/09.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/10.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/11.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/12.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/13.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/14.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/16.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/17.png)
![](https://fullstacklife.net/wp-content/uploads/2021/07/18-1024x593.png)
まずはHTTPアクセス先となるControllerクラスを作成していきます。
![](https://fullstacklife.net/wp-content/uploads/2021/07/19-2-1024x594.png)
①パッケージ名を右クリック
②「新しいフォルダー」を選択
![](https://fullstacklife.net/wp-content/uploads/2021/07/20-1.png)
パッケージフォルダを作成したら次にコントローラーとなるクラスを作成していきます。
![](https://fullstacklife.net/wp-content/uploads/2021/07/21.png)
①controllerフォルダを右クリック
②「新しいファイル」を選択
![](https://fullstacklife.net/wp-content/uploads/2021/07/22.png)
ファイル名に「DemoActionController.java」を入力してエンターキーを押すとクラスが作成されます。
![](https://fullstacklife.net/wp-content/uploads/2021/07/29.png)
作成されたクラスに上記のようにコードを記述していきます。
ソースコード
DemoActionController.java
package com.example.demoproject.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class DemoActionController {
@GetMapping("/demo-get")
public String index() {
return "demo/index";
}
}
次に画面となるHTMLを作成していきます。
Tymeleafは下記の特徴を持つHTMLテンプレートです
①Thymeleaf 用の属性として xmlns:th=”http://www.thymeleaf.org” で名前空間を宣言
②テンプレートファイルは純粋な HTML として記述
![](https://fullstacklife.net/wp-content/uploads/2021/07/24-1-1024x624.png)
①resources/template/demo/index.htmlファイルを作成(demoフォルダは作成してください)
②テンプレート内容をコーディング
ソースコード
index.html
<!doctype html>
<html xmlns:th="http://www.thymeleaf.org">
<body>
Hello Spring Boot!!!
</body>
</html>
コントローラーとテンプレートファイルの作成が完了したので実際に動かしてみてブラウザでの動作を確認してみましょう。
![](https://fullstacklife.net/wp-content/uploads/2021/07/25-1.png)
①デバッグの開始メニューを選択してアプリケーションサーバーを起動します。
![](https://fullstacklife.net/wp-content/uploads/2021/07/26-1.png)
①ブラウザを開いて下記URLにアクセス
http://localhost:8080/demo-get
②「Hello Spring Boot!!!」と表示されたらOKです
うまく動作できたでしょうか?
これでVSCodeでSpringBootを動かす手順が完了です。
おつかれさまでした!!