Java初心者がSpring Bootを使って簡単なWebアプリケーションを作ってみた

# はじめに

- 色々な諸事情あって、Spring Bootのお勉強をしております。
- Java自体やサーブレット、JSPだとか昔過ぎて覚えておりません。なので初心者スタートとなります。
- 1つ1つのステップで確実に嵌りながら、計16時間ほどで簡単なSPAを作ることができました。
- デザインとかは特にあたっておりません。

# 実行環境

|#|OS/ソフトウェア/ライブラリ|バージョン|
|:---|:---|:---|
|1|Mac OS X|EI Capitan|
|2|Java|1.8.0_111|
|3|Tomcat|8.0.43|
|4|MySQL|5.6.38|

# 開発環境

|#|OS/ソフトウェア/ライブラリ|バージョン|
|:---|:---|:---|
|1|Eclipse|4.5 Mars|
|2|Gradle|4.4.1|

# アプリケーション環境

|#|OS/ソフトウェア/ライブラリ|バージョン|
|:---|:---|:---|
|1|Spring Boot|1.5.9|
|2|JPA(Java Persistence API)||
|3|Thymeleaf||

# Homebrewから各種インストール

## brewを更新

```
brew update && brew upgrade && brew cleanup
```

## Java

### インストール

```
brew cask install java
```

### PATHの設定

```
export JAVA_HOME=`/usr/libexec/java_home -v 1.8`
```

## Tomcat

### インストール

```
brew install tomcat
```

## Gradle

### インストール

```
brew install gradle
```

# Eclipseのインストール

## Marsのダウンロード

https://www.eclipse.org/downloads/packages/release/Mars/2

※ Eclipse IDE for Java EE Developersを選択してください。

## インストール

Eclipse.appを/Applications配下に置いてください。

## 各種プラグインダウンロード

**日本語化プラグイン**
http://mergedoc.osdn.jp/#pleiades.html

※ ページ下部のPleiades プラグイン・ダウンロードからダウンロードしてください。

**JStyle**
http://mergedoc.osdn.jp/#jstyle.html

## 日本語化

/Applications/Eclipse.app/Contents/Eclipse/plugins/以下に解凍したプラグインのjp.sourceforge.mergedoc.pleiadesディレクトリを配置してください。

/Applications/Eclipse.app/Contents/Eclipse/eclipse.iniを開いて書きを追記してください。

```
-Xverify:none
-javaagent:/Applications/Eclipse.app/Contents/Eclipse/plugins/jp.sourceforge.mergedoc.pleiades/pleiades.jar
```

## JStyle

/Applications/Eclipse.app/Contents/Eclipse/plugins/以下に解凍したプラグインのjarを配置してください。

# Ecelipseの初期セットアップ

起動後、画面左上部の環境設定を開きます。

- 「Java > コンパイラー」 からJavaのバージョンを1.8にする。
- 「Java > インストール済みのJRE」 からJava SE 8を追加する。
- 「一般 > JStyle」 の設定を調整する。
- 「一般 > Webブラウザ」 の設定をする。
- プロキシ設定が必要な場合、 「一般 > ネットワーク接続」の設定をする。

# Tomcatの接続設定

起動後、画面左上部の環境設定から、 「サーバー > ランタイム環境」 を開きます。

1. 追加から「Apache > Apache Tomcat v8.0」を選択し、次に進みます。
2. 名前とTomcat インストール・ディレクトリーを入力します。ディレクトリは以下となります。

```
/usr/local/Cellar/tomcat@8.0/8.0.43/libexec
```

# SpringとGradleプラグインのインストール

## STSのインストール

1. 画面上部の「ヘルプ > Eclipseマーケットプレイス」を開きます。
2. 検索窓にSTSと入力し、インストールします。

## Gradleプラグインのインストール

1. 画面上部の「ヘルプ > Eclipseマーケットプレイス」を開きます。
2. 検索窓にGradleと入力し、インストールします。

# Spring Bootプロジェクトの作成

1. 画面上部の「ファイル > 新規 > Spring スターター・プロジェクトを作成します。ト」を開きます。
2. プロジェクト名を入力し、下記にチェックをつけ、完了します。

![springjpa2015051101.png](https://qiita-image-store.s3.amazonaws.com/0/90598/ba3f6dd1-b6cc-9453-33aa-6f7b4a31f872.png)

# Tomcatの起動ポートとデータベースの接続設定

- /プロジェクト名/src/main/resources/application.propertiesを編集します。

```
// Tomcatの起動ポート
server.port=18080

// データベースの接続設定
spring.datasource.url=jdbc:mysql://localhost:3306/{データベース名}
spring.datasource.username=root
spring.datasource.password=
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
```

# アプリケーションの作成

- 今回は、以下のような機能をつくってみました。

|#|機能名|
|:---|:---|:---|
|1|ユーザ情報の一覧表示|
|2|ユーザ名とグループ名の部分一致検索|
|3|ユーザ情報の表示|
|4|ユーザ名の更新|

- ユーザはグループといった属性を持たせて結合関係としています。

## データベースとテーブルの作成

```sql
CREATE DATABASE {データベース名} DEFAULT CHARACTER SET utf8;

CREATE TABLE `groups` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `group_id` int(11) NOT NULL,
  `name` varchar(20) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=4 DEFAULT CHARSET=utf8;
```

## 初期データの投入

```sql
INSERT INTO `groups` VALUES (1,'admin'),(2,'sales');
INSERT INTO `users` VALUES (1,1,'田中'),(2,2,'高橋'),(3,2,'鈴木');
```

## 実装

- ドメイン駆動（DDD）に習ってクラス構成を行いましたが、ところどころあまりよろしくないコードが含まれているかもしれませんがご了承ください。
- 実際のソースコードです。

## ソースコード

https://github.com/neriai/spring-boot-sandbox

# 実行

## アプリケーションの実行

プロジェクトを選択し、右クリックから「実行 > Spring Boot アプリケーション」をクリックします。

## デモ

![demo.gif](https://qiita-image-store.s3.amazonaws.com/0/90598/c95fdc76-3b75-0768-90c4-b5fc4299a754.gif)

# まとめ

- JavaとかSpring Bootに嵌まるというよりは、JPAやThymeleafや他のライブラリのほうで嵌まることが多かったです。
- Gradle使いやすい。
- Entity周りは嵌りました。
- Eclipseでアプリケーションの実行や停止などのショートカットに設定しておくことをオススメします。