[Webアプリ]VSCodeでSpringBootの環境構築

以下のサイトを参考にVSCodeでSpringBootの環境構築できたので、自分用にメモします。
https://qiita.com/yama9112/items/ff829561238440437b99
使用しているPCはWindows 10です。

つまづいた点

今回、記事通りにやると、Windows10ではエラーが起きてうまくいきませんでした。JDKをインストールし、Pathを設定し、VSCodeにJDKの場所を伝えるとうまくできましたので、以下に手順を示します。

事前準備

①VSCodeをインストールする
VSCode(Visual Studio Code)を以下のサイトからダウンロードして、インストールする。
https://code.visualstudio.com

あまり難しくありませんが、不明な場合は以下を参考して見てください。
https://qiita.com/Shi-nakaya/items/c43fb6c1e638d51bf1c8

②VSCodeを日本語化する
以下のサイトを参考にVSCodeを日本語化します。結構簡単にできます。
https://qiita.com/nanamesincos/items/5c48ff88a4eeef0a8631

③OpenJDKをインストールする
以下のサイトからOpenJDK 8 Windows 64-bit、OpenJDK 11 Windows 64-bit、OpenJDK 14 Windows 64-bitと書かれているZIP形式のものを3つダウンロードします。
https://developers.redhat.com/products/openjdk/download


ダウンロードが終わったら、Cドライブの中にある直下にある「Program Files」の中に「JAVA」というフォルダを作り、その中に解凍してください。
解凍が終わったら、以下のようにフォルダ名を変えてください。(フォルダ名は変更になっている可能性もあります。)
・「java-1.8.0-openjdk-1.8.0.252-2.b09.redhat.windows.x86_64」→「jdk-8」
・「java-11-openjdk-11.0.7.10-1.windows.redhat.x86_64」→「jdk-11」
・「java-14-openjdk-14.0.1.7-1.windows.redhat.x86_64」→「jdk-14」
私の場合はこんな感じです。色々と他のもの混じっているので、参考程度に見てください。

④Pathを通す
以下のサイトを参考して、Pathを設定します。
https://technologyshare.hatenablog.com/entry/jdk
システムの環境変数には以下のように入力します。

変数名:JAVA_HOME
変数値:C:\Program Files\Java\jdk-14

ユーザー環境変数のPathには次のように入力します。

C:\Program Files\Java\jdk-14\bin

⑤VScodeの設定を変更
VSCodeを起動し、Ctrl+,を押すか、上のメニューの「ファイル(F)」→「ユーザー設定」→「設定」を開きます。


「設定の検索」に「java.configuration.runtimes」と入力してEnterキーを押します。

「settings.jsonで編集」を開きます。


“java.home”に、以下のように入力します。

"java.home": "C:\Program Files\Java\jdk-14",

次に”java.configuration.runtimes”、以下のように入力します。

"java.configuration.runtimes": [
  {
      "name": "JavaSE-1.8",
      "path": "C:\Program Files\Java\jdk-8",
    },
    {
      "name": "JavaSE-11",
      "path": "C:\Program Files\Java\jdk-11",
    },
    {
      "name": "JavaSE-14",
      "path": "C:\Program Files\Java\jdk-14",
      "default": true
    },
]

最終的には以下のようになります。私の環境下では紹介していないVScodeの拡張機能を複数インストールしてあり、人によって違う可能性があるので、コピペはしないほうがベターです。

{
  "workbench.startupEditor": "newUntitledFile",
  "liveServer.settings.donotShowInfoMsg": true,
  "prettier.useEditorConfig": false,
  "prettier.semi": false,
  "prettier.bracketSpacing": false,
  "editor.detectIndentation": false,
  "editor.tabSize": 2,
  "easysass.excludeRegex": "^_+",
  "explorer.confirmDragAndDrop": false,
  "liveServer.settings.donotVerifyTags": true,
  "window.zoomLevel": 0,
  "editor.minimap.enabled": false,
  "java.semanticHighlighting.enabled": true,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "java.jdt.ls.vmargs": "-XX:+UseParallelGC -XX:GCTimeRatio=4 -XX:AdaptiveSizePolicyWeight=90 -Dsun.zip.disableMemoryMapping=true -Xmx1G -Xms100m -javaagent:\"c:\Users\admin\.vscode\extensions\gabrielbb.vscode-lombok-1.0.1\server\lombok.jar\"",
  "java.home": "",
  "java.import.gradle.home": "",
  "java.configuration.runtimes": [
    {
      "name": "JavaSE-1.8",
      "path": "C:\Program Files\Java\jdk-8",
    },
    {
      "name": "JavaSE-11",
      "path": "C:\Program Files\Java\jdk-11",
    },
    {
      "name": "JavaSE-14",
      "path": "C:\Program Files\Java\jdk-14",
      "default": true
    },
  ]
}

お疲れさまでした。以上で事前準備は終了です。

作業手順

最初に提示した、以下のサイトを参考にやります。
https://qiita.com/yama9112/items/ff829561238440437b99

①拡張機能のインストール
以下の2つのVSCodeの拡張機能をインストールします。
Java Extension Pack
Spring Boot Extension Pack

②プロジェクト作成
記事通りにすすめてください。

③プロジェクトの実行
記事通り進めて、http://localhost:8080/sampleを開いて「HelloWorld」が表示されたら完成です!

④プログラムのテスト
sample.htmlを以下のように書き換えます。

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>Sample</title>
</head>

<body>
    <h1>テストです</h1>
</body>

</html>

Ctrl+Shift+F5を押してデバッグの再起動をして、http://localhost:8080/sampleを開いて「テストです」が表示されれば、テストも終了です。
お疲れさまでした、以上で環境構築完了です。

Windows環境下の不具合

ログイン名とかユーザー名に平仮名・カタカナ・漢字を使っているとエラー出る場合があります。
その場合は、必ずCドライブ直下にフォルダを半角のアルファベットのみで作り、その中にファイルを保存してください。
日本語がフォルダ名やファイル名にある場合は、Javaは動かないので必ず英数字でプログラムを動かすように意識してください。