自前PCでjava・HTML・SQLの環境構築

# java・HTML・SQLの環境構築

## 1.各種パッケージのインストール
・Eclipseのインストール
　※コードエディタ java・HTML開発で使用
　[統合開発環境 Eclipse 日本語化プロジェクト](https://willbrains.jp/ "統合開発環境 Eclipse 日本語化プロジェクト")
　
　【インストール手順】
　引用：[No.2【Eclipseのインストール】プログラミングは一部の方だけのものではない！はじめてのプログラミング入門講座（アルゴリズムとJava基礎）動画付き](https://qiita.com/kunchan2/items/a4af8544b0064a1c7fa8 "【Eclipseのインストール】")

・xamppのインストール
　※SQL環境を構築するためにインストール
　[XAMPP Installers and Downloads for Apache Friends](https://sourceforge.net/projects/xampp/ "XAMPP Installers and Downloads for Apache Friends")

　【インストール手順】
　引用： [【重要!!】WindowsにXAMPPのインストール方法](https://qiita.com/ryome/items/8e193e183461a52154b1 "【重要!!】WindowsにXAMPPのインストール方法")
　**※１０まで実施。今回はMySQLを使用するため読み替え**
 

・A5:SQL Mk-2のインストール
　※SQLをGUIで使用するためにインストール
　[A5:SQL Mk-2](https://a5m2.mmatsubara.com/ "A5:SQL Mk-2")

 【インストール手順】
　引用：[A5 SQL 環境構築 備忘録](https://qiita.com/NagaJun/items/d7ca38b85b8f537e36ef "A5 SQL 環境構築 備忘録")


## 2.Eclipseの設定
引用：[eclipseでSpring Bootを使い、Web開発環境構築をする。](https://qiita.com/inokazum/items/89239417bffd88328455 "eclipseでSpring Bootを使い、Web開発環境構築をする。")

言われるがまま設定したので、依存関係を再度確認
上記、引用の３．新規Springスターター・プロジェクト依存関係については、以下手順で確認ができた。

【依存関係確認】
（１）Spring Bootプロジェクトのbuild.gradleファイルをダブルクリック
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782903/8adae976-18e6-3b21-3e2e-0a70a3d672c9.png)

（２）ファイル内のdependenciesブロックに、プロジェクトに追加されている依存関係の記述を確認
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782903/84b7ca1f-5ef3-7562-e13e-a2bda7937c3a.png)

フォルダ構成のおさらい
【フォルダ構成】
demo配下に以下のフォルダを作成
| フォルダ | 説明 |
|:-----------|------------:|
| contoroller       | コントローラー層は、外部からのリクエストを受け取り、リクエストに基づいて必要な処理をサービス層に委譲し、レスポンスを返す役割を持ちます。MVC（Model-View-Controller）アーキテクチャにおいて、ユーザーのインタラクションを管理し、ビューへのデータ渡しやリダイレクトを行います。        |
| entity     | エンティティ層は、データベースのテーブル構造を反映したクラスを含みます。これらのクラスは、データの永続化（保存）と再現（読み出し）に使用され、ORM（Object-Relational Mapping）フレームワーク（例えば、HibernateやJPA）によって管理されることが一般的です。     |
| mapper       | マッパー層（またはDAO層）は、データベースとのインターフェイスを提供します。MyBatisやJPAのようなORMツールを使用して、SQLクエリを直接扱う代わりに、データベース操作を抽象化します。マッパーは、エンティティオブジェクトをデータベースのレコードにマッピングする責任を持ちます。        |
| services         | サービス層は、ビジネスロジックをカプセル化します。この層は、コントローラーからのリクエストを受け取り、必要なビジネス処理を行い、必要に応じてエンティティを操作してマッパーを呼び出します。サービス層は、トランザクション管理も担当することが多いです。          |
| resources       | リソースフォルダは、アプリケーションの設定ファイルやプロパティファイル、SQLファイル、XML設定ファイルなど、非Javaファイルを保持します。ここには、データベース接続設定やメッセージリソース、アプリケーションの設定情報などが含まれます。       |

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782903/34800866-28c1-b5b7-97c4-60d56875bd9d.png)

MySQLと接続するため、application.propertiesの設定も忘れずに行う
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782903/28a3ee78-0aaf-0626-a9ba-cd1edfb624ed.png)

## 3.起動確認
試しに、ContorollerクラスとHTMLファイルを作成して起動してみる

```java:DemoContoroller.java
package com.example.demo.contoroller;

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

@Controller
public class DemoContoroller {

	//リクエスト
	@GetMapping("/top")
	public String toppage() {
		return "toppage";
	}
}

```

【解説】
パッケージとインポート:
package com.example.demo.contoroller; で、クラスが com.example.demo.contoroller パッケージに属していることを指定しています。Controller と GetMapping アノテーションは、Spring MVCの一部としてSpringフレームワークからインポートされています。
クラスとアノテーション:
@Controller アノテーションは、このクラスがWebリクエストを扱うコントローラであることをSpringのアプリケーションコンテキストに伝えます。
メソッドとリクエストマッピング:
@GetMapping("/top") アノテーションは、HTTP GET リクエストを /top のURLパスにマッピングします。このメソッドが呼ばれると、"toppage" という名前のビュー（通常はHTMLファイル）に対応するレスポンスを返すように設定されています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782903/3278e8d7-d62d-43cd-2335-8028c80a4b0e.png)

```html:toppage.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<h1>HelloWorld</h1>
</body>
</html>
```

【解説】
HTMLドキュメント:
HTMLファイルは、基本的なウェブページの構造を持っています。\<head> セクションには、文字コードとして UTF-8 が指定され、タイトルは未定義のままです。
\<body> セクションには、\<h1>HelloWorld\</h1> という見出しが含まれており、ブラウザでこのページが開かれると "HelloWorld" が表示されます。



コーディングが完了したので、実行してみます。
プロジェクト＞実行＞3 spring boot アプリケーションを押下
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782903/94016158-3346-0bbb-c5a6-5951f8be4b56.png)

正常に実行された
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782903/2b6fd2ad-4227-37d7-077b-ef209060fb72.png)

http\://localhost:8080/topで実行
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3782903/9f7bfad5-b1c9-73b1-e540-9919b605e65c.png)


【まとめ】
今回はMySQLを使用していないが、WEBリクエストや@GetMappingでURLパスのマッピングなどを学ぶことができた。
次回以降はSQLを使用したWEB画面作成に挑戦したい。