Visual Studio CodeでJava + SpringでWebAPP開発環境構築

# Visual Studio CodeでJava + SpringでWebAPP開発環境構築

今回の記事でVSCodeを利用してSpring Webアプリケーション開発環境構築について説明します。
手順は以下の通りです。


## １、Java実行環境構築
前提条件としてVSCodeにJava実行環境必要なのでまだできてない方は記事[Visual Studio CodeでJavaプログラム開発環境構築](https://qiita.com/jsj05543/items/da54e5db258bc9d2538a)を参照して構築してください


## ２、拡張機能インストール
`Ctrl+Shift+x`で拡張機能検索画面を開き、`Spring Boot Extension Pack`拡張機能を検索してインストールする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/a5a97ccc-e5ed-3b39-1a17-6952fe17e6ea.png)

## ３、Spring Mavenプロジェクト作成
VSCodeで`表示` -> `コマンドパレット`の順番でコマンドパレットを開く
ショートカットキー：Ctrl+Shift+P
`spring:`と入力して`Spring Initializr Generate a Maven Project`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/facda17d-d00f-e0e2-1edc-efd21e28996b.png)

`Java`を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/6fb6ad25-60dc-f8a2-adf8-667534a2ee1c.png)

パッケージ名を入力して -> `Enter`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/6cc2a97a-1a60-763d-fcb2-a180e7268026.png)

プロジェクト名を入力して -> `Enter`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/4bff9118-d44d-02bf-7780-b9b0e8932ab3.png)

SpringBootバージョンを選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/4a495d8a-5dd6-378c-4489-10839ab1e11f.png)

ここでSpringWebアプリ開発に必要な依存関係を選択する
今回の記事で単純な例として説明しているので`Spring Web`と`Thymeleaf`のみ追加する

- Spring Webを追加する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/831ab445-dc50-67f9-9922-ee5aefcd1c2d.png)

- Thymeleafを追加する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/265fcec6-5b87-4457-3813-ebc1ae6c5c7f.png)

上記の二つの依存関係を追加したら`selecled 2 dependencies`になります、これをクリック
保存先を選択
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/09a85bcd-922a-cb63-c382-30ee3147c2f4.png)
`demo`という名前のSpring プロジェクトが作られました

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/b43a22f9-725d-d121-ee57-5f94eb3d6d35.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/17a9c472-b760-20f8-148b-73abbd6dce6d.png)

## ４、プロジェクト実装

XXApplication.javaがあるパッケージの中にControllerクラスを作成
私の場合：`src/main/java/com/example/demo/DemoApplication.java`
パッケージ選択 -> 右クリック -> 新規ファイル -> DemoController.java -> `Enter`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/b79f2f16-4379-9181-9f4a-1769cd6c81ef.png)

DemoControllerクラスが作られる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/6572b853-0cd0-9c64-4e81-e52c76fe2395.png)
DemoController.java中身を編集する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/343605a7-2fdc-5a13-7f2c-39dfb8ead53e.png)

resources/templatesの配下にHTMLファイル作成する
templatesの右クリック -> 新規ファイル -> index.html -> `Enter`
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/942fc73c-3a5d-73fa-f1c6-4ac2cb047614.png)

htmlの中身を適当に編集する
例：
　bootstrap4を利用したHTML作りたい場合[Visual Studio Codeでhtml + bootstrap4の書き方](https://qiita.com/drafts/5564c00c212d689df66c)を参照する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/f4b85b0e-57b2-058c-8ac7-27c86fdcd03a.png)
画面開く：http://localhost:8080
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/148710/0a9828a3-0f4f-2ea1-bb1c-33888f3a9d13.png)
コントロールクラスのindexメソッド呼び出しされて、index.htmlの内容が画面に表示していますよね
これでSpring Web開発環境構築は成功です
# 終わり
今後の記事ではDB接続、他の依存関係追加、設計ファイル編集などについて書いて行く予定です。