LoginSignup
0
2
@inokazum

VSCodeでSpringBoot使う環境構築

Last updated at Posted at 2024-05-07

今回検証に使用する環境

  • 今回構築方法を書くにあたって使用した環境は以下
　　OS Windows
　　エディション　Windows 11 Pro
　　バージョン　22H2

構築の流れ

Visual Studio Codeのインストール

  • install手順
    • downloadページにアクセスして、
      「Visual Studio Code をダウンロードする」を選択。
      image.png
      Windowsを選択。
      image.png

ダウンロードした、installerを開いて、案内にそって進んでいく。

「同意する」を選択後、「次へ」を押下
image.png

勝手にディレクトリが指定、作成されるので、嫌な人は変更してください。
ディレクトリ指定後、「次へ」を押下
image.png

ショートカットの作成場所を指定し、「次へ」を押下
image.png

追加タスクを選択し、「次へ」を押下
image.png

インストール内容を確認して、「インストール」を押下
image.png

以下が表示されたら、インストールは完了です。
image.png

VS Code の拡張機能インストール

  1. Japanese Language Pack for Visual Studio Codeをインストール
    VSCodeの表示を日本語化してくれるパック。
    ※インストール手順
    image.png
    インストールする拡張機能
    image.png

右下に下図のようなボタンが出てくるので、押下する。(再起動して日本語化されます。)
image.png

  1. Extension Pack for Java をインストール
    Extension Pack for Javaとは、VSCode にてJavaを使って開発するときに、おすすめの拡張機能が詰め合わされたパック。
    以下の拡張機能が含まれている。
    image.png

  2. Spring Boot Extension Pack をインストールする。
    今回は、Spring Bootを使って、開発をするので、プリケーションの機能や統合を拡張するための追加の機能やライブラリをインストールします。
    image.png

プロジェクト作成

エクスプローラーに戻り、チュートリアルにある、「Getting Started with Spring Boot in VS Code」を押下
image.png

遷移した画面で、Create New Projectを選択。
image.png

すると、上部検索欄で使うバージョンを問われるので、SNAPSHOTが付いていなくて安定版だと思われるので「3.2.5」を選択。
image.png

次に、開発言語を問われるので、今回はjavaを選択。
image.png

続けて、グループIDを問われます。
MavenやGradleなどのビルドツールでJavaプロジェクトを管理する際に使用される識別子のことです。
他のプロジェクトとかぶらなければなんでもいいです。
image.png

次はアーティファクトIDを問われます。
アーティファクトIDとは、特定のアーティファクトを一意に識別するための識別子です。
例えば、コードやドキュメント、ビルド済みのアプリケーションなどがアーティファクトとして扱われます。
image.png

次は、パッケージングタイプが問われます。
JarにするかWarにするかですが、それぞれの説明をすると、
JARはJavaアプリケーションやライブラリのアーカイブに使用され、WARはJava EEウェブアプリケーションのアーカイブに使用されます。
今回はJarを使用します。

image.png

バージョンが問われるので、とりあえず17にしておきます。
image.png

最後に、依存ライブラリが問われるので、Spring Webを選択して終了。(指定フォルダは任意の場所でOKです。)

image.png

作ったフォルダを開く(右下にOpenと出てくるので押下)と、以下のような感じになっているはず
image.png

動作確認

動作確認として、ブラウザ上にHello Worldを表示してみる。

まず初めに、
プロジェクト名/src/main/java/com/exsample/demo
にcontrollerフォルダを作成。
image.png

作成したcontrollerにjavaファイル
DemoController.javaを作成します。
image.png

ファイルの内容は下記をコピペ

DemoController.java
package com.example.demo.controller;

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

@Controller
public class DemoController {
    
    @GetMapping("/demo")
    private String display(){
        return "/index.html";
    }
}

続いて、フォルダを移動
プロジェクト名/target/classes/static
内にindex.htmlを作成します。

image.png

index.html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>テスト</title>
</head>
<body>
	<h1>Hello World!</h1>
</body>
</html>

以上で準備はおしまい。
続いて実行に移ります。
VS Codeの実行タブを左クリックしデバックの開始を押下

image.png

(初回は、実行後にいろいろ許可を求められると思います。
問題なければ許可を押下してください。)

デバックが開始すると、ターミナルに下記のようなSpringがでかでかと出ればOK
image.png

最後に、任意のブラウザ(chrome,Edgeなど)で、
http://localhost:8080/demo
にアクセスしてください。
※http://localhost:8080/demo/
では失敗するので要注意です。

image.png

上記画面になれば成功です!!
これで、環境構築はひと段落。。。

0
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
2