今回検証に使用する環境
- 今回構築方法を書くにあたって使用した環境は以下
OS Windows
エディション Windows 11 Pro
バージョン 22H2
構築の流れ
Visual Studio Codeのインストール
- install手順
-
downloadページにアクセスして、
「Visual Studio Code をダウンロードする」を選択。
Windowsを選択。
-
downloadページにアクセスして、
ダウンロードした、installerを開いて、案内にそって進んでいく。
「同意する」を選択後、「次へ」を押下
勝手にディレクトリが指定、作成されるので、嫌な人は変更してください。
ディレクトリ指定後、「次へ」を押下
ショートカットの作成場所を指定し、「次へ」を押下
追加タスクを選択し、「次へ」を押下
インストール内容を確認して、「インストール」を押下
以下が表示されたら、インストールは完了です。
VS Code の拡張機能インストール
- Japanese Language Pack for Visual Studio Codeをインストール
VSCodeの表示を日本語化してくれるパック。
※インストール手順
インストールする拡張機能
右下に下図のようなボタンが出てくるので、押下する。(再起動して日本語化されます。)
-
Extension Pack for Java をインストール
Extension Pack for Javaとは、VSCode にてJavaを使って開発するときに、おすすめの拡張機能が詰め合わされたパック。
以下の拡張機能が含まれている。
-
Spring Boot Extension Pack をインストールする。
今回は、Spring Bootを使って、開発をするので、プリケーションの機能や統合を拡張するための追加の機能やライブラリをインストールします。
プロジェクト作成
エクスプローラーに戻り、チュートリアルにある、「Getting Started with Spring Boot in VS Code」を押下
遷移した画面で、Create New Projectを選択。
すると、上部検索欄で使うバージョンを問われるので、SNAPSHOTが付いていなくて安定版だと思われるので「3.2.5」を選択。
次に、開発言語を問われるので、今回はjavaを選択。
続けて、グループIDを問われます。
MavenやGradleなどのビルドツールでJavaプロジェクトを管理する際に使用される識別子のことです。
他のプロジェクトとかぶらなければなんでもいいです。
次はアーティファクトIDを問われます。
アーティファクトIDとは、特定のアーティファクトを一意に識別するための識別子です。
例えば、コードやドキュメント、ビルド済みのアプリケーションなどがアーティファクトとして扱われます。
次は、パッケージングタイプが問われます。
JarにするかWarにするかですが、それぞれの説明をすると、
JARはJavaアプリケーションやライブラリのアーカイブに使用され、WARはJava EEウェブアプリケーションのアーカイブに使用されます。
今回はJarを使用します。
バージョンが問われるので、とりあえず17にしておきます。
最後に、依存ライブラリが問われるので、Spring Webを選択して終了。(指定フォルダは任意の場所でOKです。)
作ったフォルダを開く(右下にOpenと出てくるので押下)と、以下のような感じになっているはず
動作確認
動作確認として、ブラウザ上にHello Worldを表示してみる。
まず初めに、
プロジェクト名/src/main/java/com/exsample/demo
にcontrollerフォルダを作成。
作成したcontrollerにjavaファイル
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を作成します。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>テスト</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
以上で準備はおしまい。
続いて実行に移ります。
VS Codeの実行タブを左クリックしデバックの開始を押下
(初回は、実行後にいろいろ許可を求められると思います。
問題なければ許可を押下してください。)
デバックが開始すると、ターミナルに下記のようなSpringがでかでかと出ればOK
最後に、任意のブラウザ(chrome,Edgeなど)で、
http://localhost:8080/demo
にアクセスしてください。
※http://localhost:8080/demo/
では失敗するので要注意です。
上記画面になれば成功です!!
これで、環境構築はひと段落。。。