Mac + VisualStudioCode + SpringBoot(Java) + Gradle + PostgreSQLでの開発環境構築方法

# はじめに
MacにおけるSpringBoot&PostgreSQLの開発環境を構築する方法を解説します。コードエディタはVSCodeを使用しました。必要なソフトウェアのインストールから、構築、最後ブラウザでアプリケーションの動作確認を行うところまでの手順を説明いたします。

# 開発環境
|項目|バージョン|
| ---- | ---- |
|OS|macOS Ventura 13.1|
|プロセッサ|1.6 GHz デュアルコアIntel Core i5|
|VSCode|1.75.0|
|Java(JDK)|17.0.6|
|SpringBoot|3.0.3|
|Gradle|7.6|
|PostgreSQL|15.1|

# VSCodeのインストール
以下のサイトよりインストーラーをダウンロードしてインストールしてください。
[Download Visual Studio Code](https://code.visualstudio.com/download)

# Java(JDK)のインストール
以下で解説しております。
[macOSのJDK17インストール方法](https://qiita.com/ngnmsn/items/330cfdfdc3b9f36d3aeb)

# PostgeSQLのインストール方法
以下で解説しております。
### Postgres.appでインストールしたい場合
[macOSのPostgreSQL(Postgres.app)のインストール方法](https://qiita.com/ngnmsn/items/6f1cadfe80dc63161930)
### Homebrewからインストールしたい場合
[PostgeSQLのHomebrewでのインストール](https://qiita.com/ngnmsn/items/d9a9c82a3155a9536290)

# VSCodeの拡張機能のインストール
SpringBootの開発におすすめな以下のVSCode拡張機能をインストールしてください。

### Extension Pack for Java
基本的なJavaの開発を支援する拡張機能が1セットになっています。
![ExtensionPackforJava.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/f45f0609-1feb-18a9-b5c5-af5a75dc21d2.png)

### Gradle Extension Pack
Gradleプロジェクトの開発を支援する拡張機能が1セットになっています。
![GradleExtensionPack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/29cc6189-f3b0-0d7c-787e-2921f348c691.png)

### Spring Boot Extension Pack
SpringBootの開発を支援する拡張機能が1セットになってます。
![SpringBootExtensionPack.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/c36ffe33-fa89-69ef-3df6-72be3c65d1d7.png)

# SpringBootプロジェクトの作成
### ワークディレクトリの作成
ターミナルにおいて以下のコマンドを実行し、ワークディレクトリを作成します。
※既にプロジェクトを作成したいワークディレクトリがある場合は当手順は不要です。
```
$ cd /* ワークディレクトリを作成したいディレクトリのパス */
$ mkdir -m 777 work
```
※ワークディレクトリの名前に制約はありません。

### ワークディレクトリをVSCodeで開く
ターミナルにおいて以下のコマンドを実行し、ワークディレクトリをVSCodeで開きます。
```
$ cd work
$ code . // VSCodeで"."(カレントディレクトリ)を開くコマンド
```
VSCodeでワークディレクトリが開かれます。
![vscode_work_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/65f8a9fa-ef5d-3077-78b1-9803c2ebf128.png)

### コマンドパレットを開く
「Command + Shift + P」でコマンドパレットを開く。
![command_palette.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/2f48829a-a11c-7aa6-decf-7a893d3b67c3.png)

### コマンドパレットでSpringBootのプロジェクトの設定をしていく
#### コマンドパレットに「Spring Initializr」を入力し、「Spring Initializr: Create a Gradle Project...」を選択
![Spring_Initializr.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/a76d1bdf-e0b6-f149-3851-1aba55bea02c.png)

#### Spring Bootのバージョン選択
特にこだわりがなければ最新版を選択。バージョンが大きいものはGA版(General Availability)でないので注意。
以下のキャプチャでは3.0.3が最新。
![SpringBoot_version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/f495003f-79f6-93cf-7ac7-c5f9a05eb278.png)
Spring Bootのバージョン情報は以下で確認が可能。
[Spring Bootバージョン情報](https://spring.pleiades.io/projects/spring-boot#learn)

#### 言語の選択
当記事ではJavaを想定しているのでJavaを選択
![SpringBoot_Language.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/8abff38d-a332-5e79-fc8a-fc3cde20d81e.png)

#### Group IDの設定
特に指定がなければそのまま(com.example)でいいです。当記事ではそのまま設定します。設定を入力したらEnterを押す。
![SpringBoot_GroupID.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/1888f0ab-1e2d-45bd-7db9-20d25f000337.png)

#### Artifact IDの設定
プロジェクト名を設定します。当記事では"samplepj"としました。大文字は使用できないようです。設定を入力したらEnterを押す。
![SpringBoot_ArtifactID.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/b58ccbe6-f067-e783-9fb8-6f4fb37ac69c.png)

#### Packaging Typeの設定
JarかWarどちらかを選択します。当記事ではJarを選択することとします。
![SpringBoot_PackagingType.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/4c3cb450-87e7-6166-2410-c7a70f90b73d.png)

#### Javaのバージョンの選択
当記事ではJavaは17になるので17を選択します。
![SpringBoot_Java_version.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/e7809f9f-aae3-e188-0735-bfa1f3e91106.png)

#### ライブラリ選択
初回で取り込むライブラリを選択します。当記事ではSpringBootの開発において代表的な以下のライブラリをインストールすることとします。
|ライブラリ名|説明|
| ---- | ---- |
|Spring Boot DevTools|SpringBootの開発補助ツール。コード変更時にアプリケーションの再起動なしで即座に変更を反映したり、キャッシュの削除機能があったりする。|
|Spring Web|SpringフレームワークのWebアプリケーション開発に特化したモジュール|
|Thymeleaf|JavaのWebアプリケーションにおいてHTMLを生成するためのテンプレートエンジン|
|Lombok|ゲッターやセッターなどの冗長なコードを自動生成してくれるライブラリ|
|PostgreSQL Driver|JavaプログラムがPostgreSQLデータベースにアクセスするためのドライバー|

"Search for dependencies"に取り込むライブラリ名を入力し、該当のライブラリが表示されたらクリックする。
必要なもの全てにチェックが入った状態（以下のキャプチャ）で"Selected 5 dependencies"をクリックする。
![SpringBoot_Library.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/03f1e35f-4d73-5b05-cef5-430241606cd7.png)

#### プロジェクトの作成フォルダの選択
Finderのウィンドウが表示されるので、特にフォルダに変更がなければ"Generate into this folder"をクリックする。
![SpringBoot_finder.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/49cdd9d4-6e6b-b055-a59a-23f2d28dee4b.png)

#### プロジェクト作成の完了を確認
右下にプロジェクト作成成功のポップアップが表示され、エクスプローラーにプロジェクトのディレクトリが作成されていることを確認する。
![SpringBoot_PJ_Comp.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/df304f0d-9e37-56d7-2c4e-0d78532f796f.png)

### VSCodeでSpring Bootプロジェクトを開き直す
一度workディレクトリで開いたVSCodeのウィンドウを閉じて、ターミナルで以下のコマンド実行し、Spring Bootプロジェクトを開き直す。
```
$ cd samplepj
$ code .
```
build.gradle等が含まれたSpring Bootプロジェクトが作成されていることが確認できます。
![SpringBoot_Explorer.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/bf0ba855-c020-2ffd-292f-47c310ebd11d.png)

## サンプルプロジェクト用のデータベースの作成

### Postgres.appの場合
#### PostgreSQL起動
Postges.appを起動し、PostgreSQLを起動する。
![Postgres_before_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/be2d2686-f610-7ac7-4b22-9729383f8f3b.png)
起動すると以下の通り。
![Postgres_after_start.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/515d96cb-9cd2-30ae-aa77-60ac9d0002a6.png)

### Homebrewの場合
```
brew services start postgresql
```
※"postgresql"の部分は、"postgresql@11"のようにバージョン指定でインストールしている場合はインストールした名前を当てはめる必要があります。

#### PostgreSQLログイン
ターミナルで以下のコマンドを実行し、PostgreSQLにログインする。
```
$ psql -h localhost -p 5432 -U postgres
```
portはデフォルト5432ですが、Postgres.app等で確認できます。

### データベースの作成
ターミナルで以下のコマンドを実行し、サンプルプロジェクト用のデータベースを作成する。
```
postgres=# create database samplepjdb;
CREATE DATABASE
```
参照コマンドでデータベースを確認します。
```
postgres=# \l
                                                    List of databases
      Name       |  Owner   | Encoding |   Collate   |    Ctype    | ICU Locale | Locale Provider |   Access privileges
-----------------+----------+----------+-------------+-------------+------------+-----------------+-----------------------
...
 samplepjdb      | postgres | UTF8     | en_US.UTF-8 | en_US.UTF-8 | en-US      | icu             |
...
```

## SpringBootプロジェクトとPostgreSQLの接続
### PostgreSQLドライバをbuild.gradleに追加する
先程作成した"samplepj"直下のbuild.gradleのdependenciesに以下の2行を追記します。
```gradle:build.gradle
dependencies {
    ...
    implementation 'org.springframework.boot:spring-boot-starter-data-jpa'
    ...
}
```
### application.propertiesへのDB情報の追記
application.propertiesにPostgeSQLに作成したDBの情報を入力します。
#### src/main/resources/application.properties
```properties:src/main/resources/application.properties
spring.jpa.database=POSTGRESQL
spring.datasource.url=jdbc:postgresql://localhost:5432/samplepjdb
spring.datasource.username=postgres
spring.datasource.password=postgres
spring.jpa.open-in-view=True
logging.level.org.hibernate.SQL=debug
```
## プロジェクトの実行
以下のメインのJavaファイルをエクスプローラから開きます。
src/main/java/com/example/samplepj/SamplepjApplication.java
![SpringBoot_Debug_Selected.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/3d14449d-5bae-1b14-87b3-39fc4fbb4063.png)


その上でVSCodeの以下をクリックし、プロジェクトの実行を行います。

実行 -> デバッグの実行
![SpringBoot_Debug_Execute.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/6bd8c15d-00f5-417f-08d8-22fb21f3a37a.png)
問題なく実行できるとターミナルが起動し、プロジェクトが実行されます。
![SpringBoot_Debug_Execute_Terminal.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/d7700043-8ac7-c8c7-af5f-b432753841c4.png)
停止する時は
実行 -> デバッグの停止
![SpringBoot_Debug_Stop.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/f2e38ed1-914d-69b3-dc7f-36099e0d9ee5.png)


## サンプルプログラムを動かしてみる
サンプルプログラムを追加し、ブラウザに文字を表示します。
### controllerディレクトリの作成
以下のパスに"controller"ディレクトリを作成します。
- ディレクトリ作成パス
src/main/java/com/example/samplepj
- ディレクトリ名
controller
### IndexController.javaの追加
作成したcontrollerディレクトリにIndexController.javaを追加し、以下のプログラムを記載します。
```java:src/main/java/com/example/samplepj/controller/IndexController.java
package com.example.samplepj.controller;

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

@Controller
@RequestMapping("/index")
public class IndexController {
    @RequestMapping("")
    public String index(){
        return "/index";
    }
}
```
### テンプレートの追加
templatesディレクトリにindex.htmlを作成し、以下の内容を記載します。
```html:src/main/resources/templates/index.html
<!DOCTYPE html>
<html lang="jp" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <h1>Hello World!!</h1>
</body>
</html>
```
### 再度プロジェクトを実行する
再度SamplepjApplication.javaを開き、以下をクリックし、プロジェクトの実行を行なってください。
実行 -> デバッグの実行

### ブラウザ確認
以下のURLをブラウザで開き、index.htmlの内容が表示されれば環境構築は完了です。
http://localhost:8080/index
![SpringBoot_Debug_index.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/639284/5893fdd0-c9d8-28a3-945d-634e15286a1d.png)

データベースのアクセスがあるサンプルプログラムは後日解説します。

## サンプルリポジトリ
[GitHub] [SpringBootSampleProject](https://github.com/ngnmsn/SpringBootSampleProject)