【SE入門編】Spring Tool Suite 4を使ってWEBプロジェクトの雛形を作成します

## 1. はじめに

このシリーズの完全版はここです。

https://qiita.com/manabu-s/items/2f7f10752bcf44244718

Spring Tool Suite 4 (STS)を使用してWEBプロジェクトの雛形を作成する
使用するライブラリは以下です。
|ライブラリ  |説明  |
|---|---|
|Spring Boot|Spring Bootは簡潔で効率的なアプリケーションの構築をサポートします。設定が簡略化され、生産性が向上します。Springの豊富なエコシステムと統合されており、多くの機能を提供します。|
|Maven|Mavenはビルドツールとして広く使用されており、依存関係管理が容易です。プロジェクトのライブラリ依存性を効果的に管理でき、ビルドプロセスが自動化されます|
|MyBatis|MyBatisはオブジェクト関係マッピング（ORM）ツールで、SQLクエリとJavaオブジェクトのマッピングを簡素化します。SQLのカスタマイズが容易で、パフォーマンスが向上します|
|Thymeleaf|Thymeleafはシンプルで直感的なテンプレートエンジンで、HTMLテンプレート内で動的なデータの表示と操作を行うのに適しています。Spring Bootとの統合が簡単で、デザイナーと開発者が協力しやすくなります|
|OJDBC|Oracle Databaseとの接続に必要なJDBCドライバで、高性能なデータベースアクセスを提供します。Oracle Databaseを使用する場合、OJDBCは必須です|
|Lombok|LombokはJavaの冗長なコードを削減し、JavaBeansやデータクラスをより簡潔に宣言できます。ゲッターやセッターなどのメソッドを自動生成することで、コードの可読性と保守性が向上します|
|Spring Web Services（Spring WS）|Springフレームワークをベースにした、Webサービスの開発と統合を支援するためのフレームワークです|

## 2. プロジェクトを新規作成
- File -> New -> Spring Starter Project をクリックします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/61cf2abf-d4ae-8dac-a574-76c07c9f0701.png)

- 「New Spring Starter Project 」という画面が表示されます。
TypeにMavenを選びます、一応デモ環境なので、GroupやArtifactなど項目はデフォルト値で設定します、実際のプロジェクトを作る時、しっかり決めて作ってください。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/8137d755-5e34-70e8-2342-a769ed6ff785.png)

- 「New Spring Starter Project Dependencies」という画面が表示されます。
使用するライブラリを選択します。
今回初期に入れるライブラリは以下の６つです

|ライブラリ|
|---|
|Spring Boot DevTools|
|Lombok|
|Mybatis Framework|
|Oracle Driver|
|Thymeleaf|
|Spring Web Services|

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/019d015f-c8e0-7141-0a93-15efcc647851.png)

- 「New Spring Starter Project」という画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/0b592109-5d65-8133-ffd8-fdb9c96435be.png)

- Finish ボタンをクリックしプロジェクトを作成します。初回目の作成の場合、ライブラリをダウンロードするため、すこし時間がかかります。

- 作成したプロジェクト
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/14a845ff-b874-b00c-7a3c-409eba7a8c3e.png)

この時のpom.xmlは下記です。
```
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>3.1.4</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.example</groupId>
	<artifactId>demo</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>demo</name>
	<description>Demo project for Spring Boot</description>
	<properties>
		<java.version>17</java.version>
	</properties>
	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web-services</artifactId>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter</artifactId>
			<version>3.0.2</version>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>com.oracle.database.jdbc</groupId>
			<artifactId>ojdbc8</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.projectlombok</groupId>
			<artifactId>lombok</artifactId>
			<optional>true</optional>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
		<dependency>
			<groupId>org.mybatis.spring.boot</groupId>
			<artifactId>mybatis-spring-boot-starter-test</artifactId>
			<version>3.0.2</version>
			<scope>test</scope>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
				<configuration>
					<excludes>
						<exclude>
							<groupId>org.projectlombok</groupId>
							<artifactId>lombok</artifactId>
						</exclude>
					</excludes>
				</configuration>
			</plugin>
		</plugins>
	</build>

</project>
```

現在は空っぽ状態です。設定が終わっていないため、実行できません。

## 3. プロジェクトの初期設定
設定ファイル：/demo/src/main/resources/application.properties
以下の設定内容を入れる
#WEBサービスのポート
server.port=8000
#URL内の表記部分
server.contextPath=/demo

#DataSource の Driver クラス
spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
#DataSource の DB　URL
spring.datasource.url=jdbc:oracle:thin:@//localhost:1521/XEPDB1
#DataSource の DB　ユーザー
spring.datasource.username=DEMO
#DataSource の DB　ユーザーのパスワード
spring.datasource.password=パスワード
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/db7f6c2f-0109-6b8c-a284-73221598303c.png)

設定完了後、実行してみる
いろんな実行方法ありますが、今回はメニューから実行します。
メニューから Run -> Run As -> Spring Boot Appをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/671d95b7-d5f1-477f-d3c3-97cfbc2678f4.png)

実行成功の場合、以下のConsole画面が表示される。
Started DemoApplication in 1.481 seconds (process running for 1.975)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/5ab1db56-0f46-7d51-050c-8c60dc1d7dce.png)


## 4. MVCの観点からPackageを作成する。
プロジェクトの構成は以下のようにします。
demo/
&nbsp;&nbsp;├src/main/java
&nbsp;&nbsp;&nbsp;&nbsp;├com.example.demo
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├bean : DBエンティティの実装を担当します。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├controller : Viewとのインタラクションを制御するロジックの実装を担当します。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├repository : DBエンティティをJavaオブジェクトとして表現し、CRUD（Create, Read, Update, Delete）操作を提供します。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;├service : ビジネスロジックの実装を担当します。
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;└DemoApplication.java : 
&nbsp;&nbsp;├src/main/resources
&nbsp;&nbsp;&nbsp;&nbsp;└templates：クライアント側のView（HTML画面）
クライアントとサーバー間でデータを受け渡すについて、今回はModelAndViewとHttpServletRequestを使うため、DTO (Data Transfer Object)は使いません。
但し、画面項目の入力チェックや制限などを掛けたい場合は、DTO (Data Transfer Object)を使いましょう。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/328bc533-f58f-a4e1-87ea-420dc2577e00.png)


## 5. Helloworldを表示。
- JAVAクラスHelloWorldController.javaを実装します。

```
package com.example.demo.controller;

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

@Controller
public class HelloWorldController {

 @RequestMapping("/")
 public String hello(Model model) {
	 model.addAttribute("hello", "Hello,World!");
     return "hello";
 }
}
```


- HTML画面hello.htmlを実装します。
```
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WEB資産管理システム</title>
</head>
<body>
<h1 th:text="${hello}"></h1>
</body>
</html>
```

Maven installを実行し、ビルドする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/b6ccf917-719c-3243-d309-7986a19406f9.png)

エラーがなければ以下のConsole画面にBUILD SUCCESSが表示される。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/cf3829a1-7229-ccaa-89d1-3e717c03bba8.png)

エラーが発生する場合、何か足りないと思うので、最初からやり直すか、原因を調査してください。

ツールバーからアプリケーションを実行する。
Run -> demo - DemoApplicationをクリックする
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/8682298d-0aef-285f-5bdc-3e19bf6b56a4.png)

Hello,World画面が表示される。
http://localhost:8000/
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1442793/3f1b2c7c-561a-6685-786b-02de59c282e1.png)

## 5. おわりに

これだけ簡単な設定をするだけで、プロジェクトのセットアップとHelloworld画面の表示が成功したことを確認できました。

MVCの実装や、フロントエンド側のライブラリはまだ入れていないが、次のステップで説明します。