提出課題

SpringBootを使ったWebサイトを作成する。

プロジェクト名: tweeter
Spring Boot Version: 2.2.1

作成するページとURL

トップページ http://localhost:8080/
ユーザー一覧&ユーザー登録 http://localhost:8080/user/
ツイート一覧&ツイート投稿 http://localhost:8080/tweet/
ユーザー編集ページ http://localhost:8080/edit/{id}

作成するHTMLテンプレート

トップページ index.html
ユーザー一覧&ユーザー登録 user.html
ツイート一覧&ツイート投稿 tweet.html
ユーザー編集 edit.html

エンティティ

User
・id – Long
・name – String
・profile – String
・tweets – List
Tweet
・id – Long
・time – java.util.Date
・content – String
・user – User

トップページの内容

  • Webサイトのタイトル
  • 番号と名前
  • 「ユーザー一覧&ユーザー登録」ページへのリンク
  • 「ツイート一覧&ツイート投稿」ページへのリンク

「ユーザー一覧&ユーザー登録」ページの内容

  • Webサイトのタイトル
  • 番号と名前
  • トップページへのリンク
  • 入力フォームで名前(name)と自己紹介(profile)を入力できる
  • 送信ボタンを表示
  • 登録済みユーザー一覧

「ツイート一覧&ツイート投稿」ページの内容

  • Webサイトのタイトル
  • 番号と名前
  • トップページへのリンク
  • 入力フォームで投稿内容(content)を入力できる
  • 送信ボタンを表示
  • 投稿済みツイート一覧を表示する

「ユーザー編集」ページの内容

  • Webサイトのタイトル
  • 番号と名前
  • トップページへのリンク
  • 入力フォームで名前と自己紹介を入力できる
  • 送信ボタンを表示

application.properties

spring.datasource.url=jdbc:hsqldb:hsql://localhost/tweeter
spring.datasource.username=SA
spring.datasource.password=
spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.HSQLDialect
spring.jpa.hibernate.ddl-auto=update

pom.xml

bookshelfのpom.xml から以下の部分をコピーして、tweeter の pom.xml に貼り付ける。

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
		</dependency>

配点

  1. トップページ: 10点
  2. トップページ: CSSでデザインを変更していたら10点
  3. ユーザー一覧&ユーザー登録ページ: 表示できたら10点
  4. ユーザー一覧&ユーザー登録ページ: ユーザー登録できたら10点
  5. ユーザー一覧&ユーザー登録ページ: ユーザー編集ページに飛べたら10点
  6. ユーザー一覧&ユーザー登録ページ: CSSでデザインを変更していたら10点
  7. ツイート一覧&ツイート投稿ページ: 表示できたら10点
  8. ツイート一覧&ツイート投稿ページ: ツイート投稿できたら10点
  9. ツイート一覧&ツイート投稿ページ: 投稿者名が表示される(エンティティの連携) : 10点
  10. ツイート一覧&ツイート投稿ページ: CSSでデザインを変更していたら10点
  11. ユーザー編集ページ: 表示できたら10点
  12. ユーザー編集ページ: 編集できたら10点
  13. ユーザー編集ページ: CSSでデザインを変更していたら10点

※全部クリアすると100点超えますが、最高点は100点です。

提出方法

  1. プロジェクトを作成したフォルダを、エクスプローラで開く。
  2. 「tweeter」フォルダを右クリックし[送る]-[圧縮(zip 形式)フォルダー]を選択する。
  3. 「tweeter.zip」ファイルができるので、そのファイルを提出する。
  4. 「X:\提出フォルダ\2018\提出\システム開発実習」に自分の番号のフォルダ(1817NN)を作成する。
  5. 作成したフォルダに「tweeter.zip」ファイルをコピーする。

本棚アプリに本を追加する

HSQLDBデータベースサーバーを使用する
配布フォルダからhsqldbフォルダを個々のフォルダにコピーする。
hsqldb.bat をダブルクリックすると、データベースサーバーが起動する。

application.properties ファイルの修正

spring.datasource.url=jdbc:hsqldb:hsql://localhost/bookshelf
spring.datasource.username=SA
spring.datasource.password=
spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver
spring.jpa.properties.hibernate.dialect=org.hibernate.dialect.HSQLDialect
spring.jpa.hibernate.ddl-auto=update

本棚アプリに本を追加する
本棚と同様に追加していけばよい。

本棚の時は
Model: Bookshelf
Controller: BookshelfController
View: bookshelf.html

本も本棚と同様に、
Model: Book
Controller: BookController
View: book.html

まずは Book.java を作成する。

package jp.or.jeed;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Book {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String title;

	@Column
	@NotEmpty
	private String author;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getAuthor() {
		return author;
	}

	public void setAuthor(String author) {
		this.author = author;
	}
}


次にコントローラーを作成する。

BookController.java
[java]
package jp.or.jeed;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class BookController {

	@Autowired
	private BookRepository repository;

	@RequestMapping(value = "/book", method = RequestMethod.GET)
	public ModelAndView list(ModelAndView mav) {
		mav.setViewName("book");
		mav.addObject("book", new Book());
		List<Book> list = repository.findAll();
		mav.addObject("list", list);
		return mav;
	}

	@RequestMapping(value = "/book", method = RequestMethod.POST)
	public ModelAndView post(ModelAndView mav,
			@ModelAttribute("book") Book book) {
		repository.saveAndFlush(book);
		return new ModelAndView("redirect:/book");
	}

}

ビューテンプレートとなるHTMLを作成する。
book.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本リスト</title>
</head>
<body>

<h1>本リスト</h1>
<p>本のリストを表示します。</p>


<form action="/book" method="post" th:object="${book}">
  タイトル: <input type="text" name="title" th:value="*{title}" /><br />
  著者: <input type="text" name="author" th:value="*{author}" /><br />
  <input type="submit" value="本を作成" />
</form>

<hr />
<table>
  <tr>
    <th>ID</th><th>タイトル</th><th>著者</th>
  </tr>
  <tr th:each="b : ${list}">
    <td th:text="${b.id}"></td>
    <td th:text="${b.title}"></td>
    <td th:text="${b.author}"></td>
  </tr>
</table>



<a href="/">トップページに戻る</a>

</body>
</html>

データベースとのやりとりを行うリポジトリを作成する。

BookRepository.java

package jp.or.jeed;

import org.springframework.data.jpa.repository.JpaRepository;

public interface BookRepository extends JpaRepository<Book, Long> {

}

本を本棚に格納する(関連付ける)

本に対しては1個の本棚が関連する。

package jp.or.jeed;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.ManyToOne;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Book {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String title;

	@Column
	@NotEmpty
	private String author;

	@ManyToOne
	private Bookshelf bookshelf;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getTitle() {
		return title;
	}

	public void setTitle(String title) {
		this.title = title;
	}

	public String getAuthor() {
		return author;
	}

	public void setAuthor(String author) {
		this.author = author;
	}

	public Bookshelf getBookshelf() {
		return bookshelf;
	}

	public void setBookshelf(Bookshelf bookshelf) {
		this.bookshelf = bookshelf;
	}
}

Bookshelf から Book への関連付けも行う。

package jp.or.jeed;

import java.util.List;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.persistence.OneToMany;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Bookshelf {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String name;

	@OneToMany
	private List<Book> books;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public List<Book> getBooks() {
		return books;
	}

	public void setBooks(List<Book> books) {
		this.books = books;
	}
}

本のリストに、本棚の名前も表示する。

book.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本リスト</title>
</head>
<body>

<h1>本リスト</h1>
<p>本のリストを表示します。</p>


<form action="/book" method="post" th:object="${book}">
  タイトル: <input type="text" name="title" th:value="*{title}" /><br />
  著者: <input type="text" name="author" th:value="*{author}" /><br />
  本棚: <input type="text" name="bookshelf" th:value="*{bookshelf}"/><br />
  <input type="submit" value="本を作成" />
</form>

<hr />
<table>
  <tr>
    <th>ID</th><th>タイトル</th><th>著者</th><th>本棚</th>
  </tr>
  <tr th:each="b : ${list}">
    <td th:text="${b.id}"></td>
    <td th:text="${b.title}"></td>
    <td th:text="${b.author}"></td>
    <td th:if="${b.bookshelf != null}" th:text="${b.bookshelf.name}"></td>
    <td th:if="${b.bookshelf == null}" th:text="本棚に入ってません"></td>
  </tr>
</table>



<a href="/">トップページに戻る</a>

</body>
</html>

本を格納する本棚を変更できるようにする。

まずは変更するための画面に飛ばせるようにする。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本リスト</title>
</head>
<body>

<h1>本リスト</h1>
<p>本のリストを表示します。</p>


<form action="/book" method="post" th:object="${book}">
  タイトル: <input type="text" name="title" th:value="*{title}" /><br />
  著者: <input type="text" name="author" th:value="*{author}" /><br />
  本棚: <input type="text" name="bookshelf" th:value="*{bookshelf}"/><br />
  <input type="submit" value="本を作成" />
</form>

<hr />
<table>
  <tr>
    <th>ID</th><th>タイトル</th><th>著者</th><th>本棚</th><th>修正</th>
  </tr>
  <tr th:each="b : ${list}">
    <td th:text="${b.id}"></td>
    <td th:text="${b.title}"></td>
    <td th:text="${b.author}"></td>
    <td th:if="${b.bookshelf != null}" th:text="${b.bookshelf.name}"></td>
    <td th:if="${b.bookshelf == null}" th:text="本棚に入ってません"></td>
    <td><a th:href="@{'/edit/' + ${b.id}}">編集</a></td>
  </tr>
</table>



<a href="/">トップページに戻る</a>

</body>
</html>

BookController に、編集するためのマッピングを追加する。

	@RequestMapping(value = "/edit/{id}", method = RequestMethod.GET)
	public ModelAndView edit(ModelAndView mav, @PathVariable long id) {
		mav.setViewName("edit");
		Optional<Book> data = repository.findById(id);
		mav.addObject("book", data.get());
		return mav;
	}

本の編集をするためのHTMLテンプレートを作成する

edit.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本の編集</title>
</head>
<body>

<h1>本の編集</h1>
<p>本のタイトルなどを変更します。</p>


<form action="/edit" method="post" th:object="${book}">
  タイトル: <input type="text" name="title" th:value="*{title}" /><br />
  著者: <input type="text" name="author" th:value="*{author}" /><br />
  本棚: <input type="text" name="bookshelf" th:value="*{bookshelf}"/><br />
  <input type="submit" value="本を編集" />
</form>



<a href="/">トップページに戻る</a>

</body>
</html>

本棚のところにきちんと値を表示するために、HTMLを変更する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本の編集</title>
</head>
<body>

<h1>本の編集</h1>
<p>本のタイトルなどを変更します。</p>


<form action="/edit" method="post" th:object="${book}">
  <input type="hidden" name="id" th:value="*{id}" />
  <table>
    <tr>
      <td>タイトル</td>
      <td><input type="text" name="title" th:value="*{title}" /></td>
    </tr>
    <tr>
      <td>著者</td>
      <td><input type="text" name="author" th:value="*{author}" /></td>
    </tr>
    <tr>
      <td>本棚のID</td>
      <td th:if="*{bookshelf != null}"><input type="text" name="bookshelf" th:value="*{bookshelf.id}"/></td>
      <td th:if="*{bookshelf == null}"><input type="text" name="bookshelf" value=""/></td>
    </tr>
  </table>
  <input type="submit" value="本を編集" />
</form>



<a href="/">トップページに戻る</a>

</body>
</html>

編集した本のデータを受け取ってデータベースを更新する。

	@RequestMapping(value = "/edit", method = RequestMethod.POST)
	public ModelAndView update(ModelAndView mav,
			@ModelAttribute("book") Book book) {
		repository.saveAndFlush(book);
		return new ModelAndView("redirect:/book");
	}

本棚Webアプリを作ってみる

新規プロジェクトを作成する

名前: bookshelf
グループ: jp.or.jeed
パッケージ: jp.or.jeed

pom.xml に demo で追加した部分を同様に追加する。

<?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>2.2.1.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>jp.or.jeed</groupId>
	<artifactId>bookshelf</artifactId>
	<version>0.0.1-SNAPSHOT</version>
	<name>bookshelf</name>
	<description>Demo project for Spring Boot</description>

	<properties>
		<java.version>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
		</dependency>

	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

プロジェクトを右クリックし[Maven]-[プロジェクトの更新]を選択する。
処理が終わったら再度プロジェクトを右クリックし[実行]-[maven install]を選択する。

「BUILD SUCCESS」のメッセージが表示されればOK!

トップページを作成する

src/main/resources
 └templates
  └index.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本棚アプリ</title>
</head>
<body>

<h1>本棚アプリ</h1>
<p>本棚に本を収納するアプリを作ります。</p>
<p th:text="${msg}">${msg}</p>

</body>
</html>

index.html を表示するためのコントローラを作成する。
src/main/java
 └jp.or.jeed
  └IndexController.java

package jp.or.jeed;

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

@Controller
public class IndexController {

	@RequestMapping("/")
	public String index() {
		return "index";
	}
}

ソースコードをGitで管理する
SpringBootアプリケーションが動いていたら、一旦停止する。

プロジェクトを右クリックし[チーム]-[プロジェクトの共用]を選択する。
リポジトリータイプは「Git」を選択して「次へ」をクリックする。
リポジトリーの右側の「作成」をクリックする。
リポジトリーディレクトリは「Z:\Java\git」を指定して「完了」をクリックする。

Gitで管理されると、プロジェクト名の右側に [git master] のような表示が追加される。

Gitで管理不要なファイルを除外する
ファイルを除外するには、.gitignore ファイルに除外するファイルを追加すればよい。

.gitignore を見えるようにする
.gitignore ファイルが見えていないので、見えるようにするために以下の設定を行う。

プロジェクトエクスプローラーの右上にある「▽」をクリックする。
「フィルターおよびカスタマイズ」を選択する。

「.*リソース」のチェックをはずして「OK」をクリックする。

.gitignoreを編集する
.gitignore ファイルをダブルクリックして開く。
3行目(target/ の下)に「.mvn/」と「mvnw」と「mvnw.cmd」を追加して保存する。

HELP.md
target/
.mvn/
mvnw
mvnw.cmd
!.mvn/wrapper/maven-wrapper.jar
!**/src/main/**
!**/src/test/**

(以下略)

Gitに現在のソースをコミットする
プロジェクトを右クリックし[チーム]-[コミット]を選択する。
「Gitステージング」タブが開くので、Gitで管理したいファイルを「ステージされた変更」に移動する。

右側の「コミット・メッセージ」に「first commit」などのコメントを入力する。
右下の「コミット」をクリックする。

※「コミットおよびプッシュ」は今回は使わない。

トップページに本棚リストへのリンクを追加する

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本棚アプリ</title>
</head>
<body>

<h1>本棚アプリ</h1>
<p>本棚に本を収納するアプリを作ります。</p>


<a href="/bookshelf">本棚リスト</a>

</body>
</html>

本棚リストのリンクをクリックするとエラーになる。

動くようにするために、HTMLテンプレートとコントローラを作成する。

BookshelfController.java

package jp.or.jeed;

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

@Controller
public class BookshelfController {

	@RequestMapping("/bookshelf")
	public String list() {
		return "bookshelf";
	}

}

bookshelf.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本棚リスト</title>
</head>
<body>

<h1>本棚リスト</h1>
<p>本棚のリストを表示します。</p>


<a href="/">トップページに戻る</a>

</body>
</html>

本棚を追加できるようにしたい!

HTMLテンプレートにフォームを追加する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本棚リスト</title>
</head>
<body>

<h1>本棚リスト</h1>
<p>本棚のリストを表示します。</p>


<form action="/bookshelf" method="post" th:object="${bookshelf}">
  <input type="text" name="name" th:value="*{name}" />
  <input type="submit" />
</form>



<a href="/">トップページに戻る</a>

</body>
</html>

この状態で「http://localhost:8080/bookshelf」にアクセスするとエラーが発生する。

org.thymeleaf.exceptions.TemplateProcessingException: Exception evaluating SpringEL expression: "name" (template: "bookshelf" - line 14, col 34)
	at org.thymeleaf.spring5.expression.SPELVariableExpressionEvaluator.evaluate(SPELVariableExpressionEvaluator.java:290) ~[thymeleaf-spring5-3.0.11.RELEASE.jar:3.0.11.RELEASE]
	at org.thymeleaf.standard.expression.SelectionVariableExpression.executeSelectionVariableExpression(SelectionVariableExpression.java:158) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
	at org.thymeleaf.standard.expression.SimpleExpression.executeSimple(SimpleExpression.java:92) ~[thymeleaf-3.0.11.RELEASE.jar:3.0.11.RELEASE]
 :
(以下略)

コントローラからHTMLテンプレートに bookshelf を渡せるようにする。
Bookshelf クラスを作ってないので、new Bookshelf() のところでコンパイルエラーが発生して赤線が出ている。

package jp.or.jeed;

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

@Controller
public class BookshelfController {

	@RequestMapping("/bookshelf")
	public ModelAndView list(ModelAndView mav) {
		mav.setViewName("bookshelf");
		mav.addObject("bookshelf", new Bookshelf());
		return mav;
	}

}

エラーが発生している new Bookshelf() の上にマウスカーソルを移動すると、クイックフィックスが表示される。
「クラス Bookshelf を作成します」をクリックするとクラス新規作成のダイアログが表示されるので「完了」をクリックする。

Bookshelfクラス内に name を追加する。

package jp.or.jeed;

public class Bookshelf {
    private String name;
}

メニューバーから[ソース]-[getter および setter の生成」を選択する。
name にチェックを入れて「OK」をクリックすると、Bookshelfにコードが追加される。

package jp.or.jeed;

public class Bookshelf {
	private String name;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}

送信ボタンの文字列を変更する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本棚リスト</title>
</head>
<body>

<h1>本棚リスト</h1>
<p>本棚のリストを表示します。</p>


<form action="/bookshelf" method="post" th:object="${bookshelf}">
  <input type="text" name="name" th:value="*{name}" />
  <input type="submit" value="本棚を作成" />
</form>



<a href="/">トップページに戻る</a>

</body>
</html>

コントローラで本棚リストからのデータを受け取ってコンソールに表示してみる。

package jp.or.jeed;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class BookshelfController {

	@RequestMapping(value = "/bookshelf", method = RequestMethod.GET)
	public ModelAndView list(ModelAndView mav) {
		mav.setViewName("bookshelf");
		mav.addObject("bookshelf", new Bookshelf());
		return mav;
	}

	@RequestMapping(value = "/bookshelf", method = RequestMethod.POST)
	public ModelAndView post(ModelAndView mav,
			@ModelAttribute("bookshelf") Bookshelf bookshelf) {
		System.out.println("本棚の名前は " + bookshelf.getName());
		return mav;
	}
}

データベース HSQLDB にデータを保存するための設定を追加する。

src/main/resources
 └application.properties

application.properties ファイルに設定を書く。

spring.datasource.url=jdbc:hsqldb:file:./db/bookshelf
spring.datasource.username=SA
spring.datasource.password=
spring.datasource.driver-class-name=org.hsqldb.jdbc.JDBCDriver

Bookshelf をデータベースに格納できるように修正する。

package jp.or.jeed;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.Id;
import javax.validation.constraints.NotEmpty;
import javax.validation.constraints.NotNull;

@Entity
public class Bookshelf {
	@Id
	@GeneratedValue
	@Column
	@NotNull
	private long id;

	@Column
	@NotEmpty
	private String name;

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}
}

Bookshelf をデータベースに保存するための仕事をしてくれるクラス(インタフェース)を用意する。

BookshelfRepository.java

package jp.or.jeed;

import org.springframework.data.jpa.repository.JpaRepository;

public interface BookshelfRepository extends JpaRepository<Bookshelf, Long> {

}

リポジトリを作ったので、それをコントローラで使って、データベースに保存してみる。

package jp.or.jeed;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class BookshelfController {

	@Autowired
	private BookshelfRepository repository;

	@RequestMapping(value = "/bookshelf", method = RequestMethod.GET)
	public ModelAndView list(ModelAndView mav) {
		mav.setViewName("bookshelf");
		mav.addObject("bookshelf", new Bookshelf());
		List<Bookshelf> list = repository.findAll();
		mav.addObject("list", list);
		return mav;
	}

	@RequestMapping(value = "/bookshelf", method = RequestMethod.POST)
	public ModelAndView post(ModelAndView mav,
			@ModelAttribute("bookshelf") Bookshelf bookshelf) {
		repository.saveAndFlush(bookshelf);
		return new ModelAndView("redirect:/bookshelf");
	}
}

HTMLテンプレートで受け取った list を表示する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>本棚リスト</title>
</head>
<body>

<h1>本棚リスト</h1>
<p>本棚のリストを表示します。</p>


<form action="/bookshelf" method="post" th:object="${bookshelf}">
  <input type="text" name="name" th:value="*{name}" />
  <input type="submit" value="本棚を作成" />
</form>

<hr />
<table>
  <tr>
    <th>ID</th><th>本棚の名前</th>
  </tr>
  <tr th:each="bs : ${list}">
    <td th:text="${bs.id}"></td>
    <td th:text="${bs.name}"></td>
  </tr>
</table>



<a href="/">トップページに戻る</a>

</body>
</html>

テンプレートエンジンとデータベースの利用

テンプレートエンジンのThymeleafと、HSQLDBデータベースを使うために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>2.2.1.RELEASE</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>1.8</java.version>
	</properties>

	<dependencies>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
			<exclusions>
				<exclusion>
					<groupId>org.junit.vintage</groupId>
					<artifactId>junit-vintage-engine</artifactId>
				</exclusion>
			</exclusions>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>

		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-data-jpa</artifactId>
		</dependency>

		<dependency>
			<groupId>org.hsqldb</groupId>
			<artifactId>hsqldb</artifactId>
		</dependency>
		
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>

</project>

入力フォームを使ってデータのやりとりを行う

form1.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>

<h1>form1</h1>
<p th:text="${msg}"></p>
<form action="/form1" method="post">
	おなまえ:<input type="text" name="name" />
	<br />
	評価:<input type="text" name="eval" />
	<input type="submit" value="Click!" />
</form>

</body>
</html>

IndexController.java に form1 へのリクエストを処理するコードを追加する。

package com.example.demo;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexConroller {
	@RequestMapping("/test")
	public ModelAndView index(ModelAndView model) {
		model.setViewName("index");
		model.addObject("msg", "サーバーで設定したメッセージですよ");
		return model;
	}

	@RequestMapping(value="/form1", method=RequestMethod.GET)
	public ModelAndView form(ModelAndView model) {
		model.setViewName("form1");
		return model;
	}

	@RequestMapping(value="/form1", method=RequestMethod.POST)
	public ModelAndView form1(ModelAndView model,
			@RequestParam("name") String name,
			@RequestParam("eval") String eval) {
		model.setViewName("form1");
		int percent = (name + eval).hashCode() % 101;
		percent = Math.abs(percent);
		String result = name + " さんの " + eval + " 度は" + percent + "%です。";
		model.addObject("msg", result);
		return model;
	}
}

th:each を使って複数の要素を表示する

コントローラにListを用意して過去の内容を保存できるようにする。
また、Listをテンプレートに渡すようにする。

package com.example.demo;

import java.util.ArrayList;
import java.util.List;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class IndexConroller {
	private List<String> list = new ArrayList<>();

	@RequestMapping("/test")
	public ModelAndView index(ModelAndView model) {
		model.setViewName("index");
		model.addObject("msg", "サーバーで設定したメッセージですよ");
		return model;
	}

	@RequestMapping(value="/form1", method=RequestMethod.GET)
	public ModelAndView form(ModelAndView model) {
		model.setViewName("form1");
		return model;
	}

	@RequestMapping(value="/form1", method=RequestMethod.POST)
	public ModelAndView form1(ModelAndView model,
			@RequestParam("name") String name,
			@RequestParam("eval") String eval) {
		model.setViewName("form1");
		int percent = (name + eval).hashCode() % 101;
		percent = Math.abs(percent);
		String result = name + " さんの " + eval + " 度は" + percent + "%です。";
		list.add(result);
		model.addObject("msg", result);
		model.addObject("list", list);
		return model;
	}
}

テンプレートに th:each を追加して複数の要素を表示する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>

<h1>form1</h1>
<p th:text="${msg}"></p>
<form action="/form1" method="post">
	おなまえ:<input type="text" name="name" />
	<br />
	評価:<input type="text" name="eval" />
	<input type="submit" value="Click!" />
</form>

<hr />

<table>
  <tr th:each="obj : ${list}">
    <td th:text="${obj}"></td>
  </tr>
</table>


</body>
</html>

診断を追加してみる

IndexControllerの追加

	@RequestMapping(value="/form2", method=RequestMethod.GET)
	public ModelAndView form2(ModelAndView model) {
		model.setViewName("form2");
		return model;
	}

	@RequestMapping(value="/form2", method=RequestMethod.POST)
	public ModelAndView result(ModelAndView model,
			@RequestParam("name") String name) {
		String[] s = {"優しさ", "冷たさ", "面白さ", "熱血さ", "冷静さ",
					  "真面目さ", "可愛さ", "素直さ", "明るさ", "責任感" };
		StringBuilder sb = new StringBuilder();
		sb.append(name).append(" さん。。。").append("<br />");
		for (String t : s) {
			int percent = (name + t).hashCode() % 101;
			percent = Math.abs(percent);
			sb.append(t).append(" ... ");
			sb.append(percent).append("%").append("<br />");
		}
		model.addObject("msg", sb.toString());
		model.setViewName("form2");
		return model;
	}

form2.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>入力フォーム</title>
</head>
<body>

<h1>form2</h1>
<form action="/form2" method="post">
	おなまえ:<input type="text" name="name" />
	<br />
	<input type="submit" value="診断" />
</form>

<hr />
<p th:utext="${msg}"></p>

</body>
</html>

Webアプリ開発(再チャレンジ)

メニューから[新規]-[プロジェクト]を選択する。

SpringBootの中にある「Springスタータープロジェクト」を選択する。
Webの中にある「Spring Web」を選択して「完了」する。

プロジェクト名「demo」を右クリックして[Maven]-[プロジェクトの更新]を選択する。
「OK」をクリックすると画面下のステータスバーに何か処理が動いている表示になる。

プロジェクトの更新が終わったらプロジェクト名「demo」を右クリックして[実行]-[maven install]を選択する。
コンソールにいろいろと表示され、最後のほうに「BUILD SUCCESS」と表示されればOK!

なぜか、SpringBootアプリケーションとして起動しても動作しないので、設定を変更して、別に準備したTomcat上で動作させてみる。

demo プロジェクトを右クリックして「プロパティ」を選択し、左側から「プロジェクト・ファセット」を選択する。

以下の図のように、チェックした状態で「適用して閉じる」をクリックする。

demo を右クリックして「実行」‐「SpringBootアプリケーション」を選択するとWebアプリケーションが起動する。

コンソールに「 Started DemoApplication in 2.426 seconds (JVM running for 2.933)」のような表示が出ていればOK。

画面上に「プロジェクト・エクスプローラー」が表示されていない場合は、メニューバーから「ウィンドウ」‐「パースペクティブ」‐「パースペクティブを開く」‐「その他」を選択する。

パースペクティブの一覧が表示されるので、「JavaEE」を選択して「開く」をクリックする。

コントローラの作成

コントローラクラスを作成する。

プロジェクト・エクスプローラーで「Javaリソース」‐「src/main/java」-「com.example.demo」を右クリックし「新規」‐「クラス」を選択する。

名前に「HelloController」と入力し「完了」をクリック。

http://localhost:8080/hello にアクセスすると、画面上に「Hello World!」と表示される。

静的HTMLファイルの表示

src/main/resource を右クリックして「新規」‐「フォルダ」を選択する。
「public」フォルダを作成する。

public を右クリックし「新規」‐「その他」を選択する。
「HTMLファイル」を選択して index.html を作成する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello index.html</title>
</head>
<style>
h1 {
  color: red;
}
div.border {
	border: solid 2px blue;
	border-radius: 5px;
	padding: 5px;
}
</style>
<body>


<h1>Hello</h1>
<p>Hello index.html</p>

<div class="border">
div タグにボーダーを追加する例
</div>

<hr />

<p>src/main/resources/public/index.html</p>

</body>
</html>

http://localhost:8080/ にアクセスすると、public/index.html の内容が表示される。

コントローラとビューの利用

今回はライブラリの不足のために動作しないが、SpringBootの場合、ControllerとViewを組み合わせてWebサイトを作成する。

src/main/java の com.example.demo を右クリックし「新規」‐「クラス」を選択する。

/test というURLにアクセスが来たら、templates/index.html を表示する仕組みを作成する。

IndexController.java

package com.example.demo;

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

@Controller
public class IndexConroller {
	@RequestMapping("/test")
	public String index() {
		return "index";
	}
}

src/main/resources の temlates を右クリックし「新規」‐「その他」を選択する。
「HTMLファイル」を選択し、 index.html を作成する。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Controller test</title>
</head>
<body>
Hello src/main/resources/templates/index.html
</body>
</html>

サーバーにデータを問い合わせる

Beer クラスを作成する。

Beer.java

package com.example.demo;

public class Beer {
	private String name;
	private int price;
	public Beer(String name, int price) {
		this.name = name;
		this.price = price;
	}
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public int getPrice() {
		return price;
	}
	public void setPrice(int price) {
		this.price = price;
	}

}

ビールのリストを返すコントローラを作成する。

package com.example.demo;

import java.util.ArrayList;
import java.util.List;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class BeerController {
	@RequestMapping("/beer")
	public List<Beer> beers() {
		List<Beer> list = new ArrayList<>();
		list.add(new Beer("一番搾り", 200));
		list.add(new Beer("プレミアムモルツ", 240));
		list.add(new Beer("ギネス", 300));
		return list;
	}
}

ブラウザでJSONデータを受け取れるようになったので、AJAXを使ってデータを受信し、画面を更新するようにしてみる。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello index.html</title>
<script src="jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$.ajax({
	url: '/beer',
	dataType: 'json',
	success: function(data) {
		result(data);
	}
});

function result(data) {
	var div = $('#beers');
	$.each(data, function(i) {
		console.log(data[i]);
		var beer = $('<div>');
		var name = $('<span>').text(data[i].name);
		var price = $('<span>').text(data[i].price + '円');
		beer.append(name);
		beer.append(price);
		div.append(beer);
	});
}
</script>
</head>
<style>
h1 {
  color: red;
}
div.border {
	border: solid 2px blue;
	border-radius: 5px;
	padding: 5px;
}
</style>
<body>


<h1>Hello</h1>
<p>Hello index.html</p>

<div class="border">
div タグにボーダーを追加する例
</div>

<div id="beers"></div>

<hr />

<p>src/main/resources/public/index.html</p>

</body>
</html>

Webアプリ開発

メニューから[新規]-[プロジェクト]を選択する。

SpringBootの中にある「Springスタータープロジェクト」を選択する。
Webの中にある「Spring Web」を選択して「完了」する。

プロジェクト名「demo」を右クリックして[Maven]-[プロジェクトの更新]を選択する。
「OK」をクリックすると画面下のステータスバーに何か処理が動いている表示になる。

プロジェクトの更新が終わったらプロジェクト名「demo」を右クリックして[実行]-[maven install]を選択する。
コンソールにいろいろと表示され、最後のほうに「BUILD SUCCESS」と表示されればOK!

誰もできない!

方針転換

[新規]-[動的Webプロジェクト]を選択する。

「WebContent」を右クリックして[新規]-[HTMLファイル]を選択する。
ファイ名を「index.html」に変更して「完了」する。
適当に index.html の中身を変更する。

プロジェクト名「web」を右クリックし[実行]-[サーバーで実行]を選択する。
Tomcat8.0サーバーを選択する。
「次へ」をクリックし構成済みの枠内に「web」があることを確認して「完了」する。

TDD: テスト駆動開発

勇者のLevelを経験値によって判断するクラス Level を作成する。

package rpg;

public class Level {
	public static int getLevel(int exp) {
		return 1;
	}
}

Level.java を右クリックして[新規]-[その他]を選択する。
Junitテストケースを選択して「次へ」をクリック。
getLevel()メソッドにチェックして「完了」をクリックする。

LevelTest.javaが作成される。
以下のコードを追加する。

package rpg;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class LevelTest {

	@Test
	void testGetLevel() {
		int l = Level.getLevel(0);
		assertThat(l, is(1));
	}

}

仕様を決める。

Level 経験値
1 0~10
2 11~30
3 31~60
4 61~150
5 151~

経験値が0から10まではレベル1で、経験値が11だとレベル1ではないというテストを書く。

package rpg;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class LevelTest {

	@Test
	void testGetLevel1() {
		int l = Level.getLevel(0);
		assertThat(l, is(1));
		l = Level.getLevel(10);
		assertThat(l, is(1));
		l = Level.getLevel(11);
		assertThat(l, not(1));
	}

}

このテストにパスするように、Level.java を修正する。

package rpg;

public class Level {
	public static int getLevel(int exp) {
		if (exp > 10) return 2;
		return 1;
	}
}

徐々にテストを増やしていき、Lebel.javaのコードにはテストにパスするように追加していく。

package rpg;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class LevelTest {

	@Test
	void testGetLevel1() {
		int l = Level.getLevel(0);
		assertThat(l, is(1));
		l = Level.getLevel(10);
		assertThat(l, is(1));
		l = Level.getLevel(11);
		assertThat(l, not(1));
	}

	@Test
	void testGetLevel2() {
		int l = Level.getLevel(10);
		assertThat(l, not(2));
		l = Level.getLevel(11);
		assertThat(l, is(2));
		l = Level.getLevel(30);
		assertThat(l, is(2));
		l = Level.getLevel(31);
		assertThat(l, not(2));
	}

	@Test
	void testGetLevel3() {
		int l = Level.getLevel(30);
		assertThat(l, not(3));
		l = Level.getLevel(31);
		assertThat(l, is(3));
		l = Level.getLevel(60);
		assertThat(l, is(3));
		l = Level.getLevel(61);
		assertThat(l, not(3));
	}

	@Test
	void testGetLevel4() {
		int l = Level.getLevel(60);
		assertThat(l, not(4));
		l = Level.getLevel(61);
		assertThat(l, is(4));
		l = Level.getLevel(150);
		assertThat(l, is(4));
		l = Level.getLevel(151);
		assertThat(l, not(4));
	}
}

Lebel.java

package rpg;

public class Level {
	public static int getLevel(int exp) {
		if (exp > 150) return 5;
		if (exp > 60) return 4;
		if (exp > 30) return 3;
		if (exp > 10) return 2;
		return 1;
	}
}

FizzBuzz問題をTDDで実装する

FuzzBuzzクラスを作成する。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		return null;
	}
}

FizzBuzzTest を作成する。

package hello;

import static org.junit.jupiter.api.Assertions.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		fail("まだ実装されていません");
	}

}

まず、1のときに文字列”1″が返されるという条件のテストを作成する。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		FizzBuzz fb = new FizzBuzz();
		String a = fb.answer(1);
		assertThat(a, is("1"));
	}

}

このテストにパスする最低限のコードを書く。
このような書き方を fake という。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		return "1";
	}
}

fake でテストにパスしたので、テストを追加する。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		FizzBuzz fb = new FizzBuzz();
		String a = fb.answer(1);
		assertThat(a, is("1"));
		a = fb.answer(2);
		assertThat(a, is("2"));
	}

}

テストにパスするようにFizzBuzzを修正する。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		if (i == 2) return "2";
		return "1";
	}
}

テストにパスしたので、テストを追加する。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		FizzBuzz fb = new FizzBuzz();
		String a = fb.answer(1);
		assertThat(a, is("1"));
		a = fb.answer(2);
		assertThat(a, is("2"));
		a = fb.answer(3);
		assertThat(a, is("Fizz"));
	}

}

テストにパスするようにFizzBuzzを修正する。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		if (i == 3) return "Fizz";
		if (i == 2) return "2";
		return "1";
	}
}

テストにパスしたので、テストを追加する。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		FizzBuzz fb = new FizzBuzz();
		String a = fb.answer(1);
		assertThat(a, is("1"));
		a = fb.answer(2);
		assertThat(a, is("2"));
		a = fb.answer(3);
		assertThat(a, is("Fizz"));
		a = fb.answer(4);
		assertThat(a, is("4"));
	}

}

さすがにif文で対応すると重複した処理が増えるので、数値を文字列に変換する部分をまとめる。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		if (i == 3) return "Fizz";
		return String.valueOf(i);
	}
}

5の場合は “Buzz”と返すテストを作成する。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		FizzBuzz fb = new FizzBuzz();
		String a = fb.answer(1);
		assertThat(a, is("1"));
		a = fb.answer(2);
		assertThat(a, is("2"));
		a = fb.answer(3);
		assertThat(a, is("Fizz"));
		a = fb.answer(4);
		assertThat(a, is("4"));
		a = fb.answer(5);
		assertThat(a, is("Buzz"));
	}

}

テストにパスするようにFizzBuzzを修正する。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		if (i == 5) return "Buzz";
		if (i == 3) return "Fizz";
		return String.valueOf(i);
	}
}

6は3の倍数なので “Fizz” と返す。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		FizzBuzz fb = new FizzBuzz();
		String a = fb.answer(1);
		assertThat(a, is("1"));
		a = fb.answer(2);
		assertThat(a, is("2"));
		a = fb.answer(3);
		assertThat(a, is("Fizz"));
		a = fb.answer(4);
		assertThat(a, is("4"));
		a = fb.answer(5);
		assertThat(a, is("Buzz"));
		a = fb.answer(6);
		assertThat(a, is("Fizz"));
	}

}

3の倍数なら “Fizz” と返すようにする。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		if (i == 5) return "Buzz";
		if (i % 3 == 0) return "Fizz";
		return String.valueOf(i);
	}
}

7・8・9はこのままで問題なさそうなので飛ばす。
10は5の倍数なので “Buzz” が返されるはず。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		FizzBuzz fb = new FizzBuzz();
		String a = fb.answer(1);
		assertThat(a, is("1"));
		a = fb.answer(2);
		assertThat(a, is("2"));
		a = fb.answer(3);
		assertThat(a, is("Fizz"));
		a = fb.answer(4);
		assertThat(a, is("4"));
		a = fb.answer(5);
		assertThat(a, is("Buzz"));
		a = fb.answer(6);
		assertThat(a, is("Fizz"));
		a = fb.answer(10);
		assertThat(a, is("Buzz"));
	}

}

3の倍数と同様に、5の倍数は “Buzz” を返すようにする。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		if (i % 5 == 0) return "Buzz";
		if (i % 3 == 0) return "Fizz";
		return String.valueOf(i);
	}
}

11・12・13・14は問題なさそうなので飛ばす。
15の倍数の時は “FizzBuzz” となるので、テストを追加する。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class FizzBuzzTest {

	@Test
	void testAnswer() {
		FizzBuzz fb = new FizzBuzz();
		String a = fb.answer(1);
		assertThat(a, is("1"));
		a = fb.answer(2);
		assertThat(a, is("2"));
		a = fb.answer(3);
		assertThat(a, is("Fizz"));
		a = fb.answer(4);
		assertThat(a, is("4"));
		a = fb.answer(5);
		assertThat(a, is("Buzz"));
		a = fb.answer(6);
		assertThat(a, is("Fizz"));
		a = fb.answer(10);
		assertThat(a, is("Buzz"));
		a = fb.answer(15);
		assertThat(a, is("FizzBuzz"));
	}

}

テストにパスするようにFizzBuzzを修正する。

package hello;

public class FizzBuzz {
	public String answer(int i) {
		if (i % 15 == 0) return "FizzBuzz";
		if (i % 5 == 0) return "Buzz";
		if (i % 3 == 0) return "Fizz";
		return String.valueOf(i);
	}
}

世界のナベアツをテスト駆動開発で実装する

対象となるクラス Nabeatsu を作成する。

package hello;

public class Nabeatsu {
	public String answer(int i) {
		return null;
	}
}

Junitテストケースを作成する。

package hello;

import static org.junit.jupiter.api.Assertions.*;

import org.junit.jupiter.api.Test;

class NabeatsuTest {

	@Test
	void testAnswer() {
		fail("まだ実装されていません");
	}

}

1から3までテストを書いていく。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class NabeatsuTest {

	@Test
	void testAnswer() {
		Nabeatsu n = new Nabeatsu();
		String a = n.answer(1);
		assertThat(a, is("1"));
		a = n.answer(2);
		assertThat(a, is("2"));
		a = n.answer(3);
		assertThat(a, is("さぁ~ん!"));
	}

}

3の倍数はFizzBuzzと同じなので簡単にできる。

package hello;

public class Nabeatsu {
	public String answer(int i) {
		if (i % 3 == 0) return "さぁ~ん!";
		return String.valueOf(i);

	}
}

3の倍数ではないけど3が含まれるパターンに対応する。

package hello;

import static org.hamcrest.CoreMatchers.*;
import static org.junit.Assert.*;

import org.junit.jupiter.api.Test;

class NabeatsuTest {

	@Test
	void testAnswer() {
		Nabeatsu n = new Nabeatsu();
		String a = n.answer(1);
		assertThat(a, is("1"));
		a = n.answer(2);
		assertThat(a, is("2"));
		a = n.answer(3);
		assertThat(a, is("さぁ~ん!"));
		a = n.answer(13);
		assertThat(a, is("さぁ~ん!"));
	}

}

数値を String.valueOf() で文字列に変換し、その中に “3” が含まれるかどうかを調べる。

package hello;

public class Nabeatsu {
	public String answer(int i) {
		if (i % 3 == 0) return "さぁ~ん!";
		String s = String.valueOf(i);
		if (s.contains("3")) return "さぁ~ん!";
		return s;
	}
}

RPG

Cast.java

package rpg;

import java.util.ArrayList;
import java.util.List;

public class Cast {
	private String name;
	private int hp = 10;
	private List<Item> list = new ArrayList<>();

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getHp() {
		return hp;
	}

	public void setHp(int hp) {
		this.hp = hp;
	}

	public void addItem(Item item) {
		list.add(item);
		System.out.println(name + " は " + item.getName() + " をゲットした");
	}

	public void useItem() {
		Item item = list.remove(0);
		System.out.println(name + " は " + item.getName() + " を使った");
		item.use(this);
	}

	public void talk(String s) {
		System.out.println("     ――――――――――");
		System.out.println(name + "< " + s + " |");
		System.out.println("     ――――――――――");
	}

	public void printItems() {
		if (list.size() == 0) {
			System.out.println("アイテムを持っていません");
			return;
		}
		System.out.println("アイテムの一覧を表示します。");
		System.out.println("-----");
		for (Item item : list) {
			System.out.println(item.getName());
		}
	}
}

Player.java

package rpg;

public class Player {

	public static void main(String[] args) {
		Cast cast = new Cast();
		cast.setName("ゆうしゃ");
		cast.talk("こんにちは!");

		Item item = new Yakusou();
		cast.addItem(item);

		item = new Yakusou();
		cast.addItem(item);

		item = new Dokukeshisou();
		cast.addItem(item);

		cast.printItems();
		cast.useItem();
		cast.useItem();
		cast.useItem();
		cast.printItems();
	}

}

Item.java

package rpg;

public abstract class Item {
	private String name;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public abstract void use(Cast cast);
}

Yakusou.java

package rpg;

public class Yakusou extends Item {
	public Yakusou() {
		setName("やくそう");
	}

	@Override
	public void use(Cast cast) {
		int hp = cast.getHp();
		cast.setHp(hp + 10);
		System.out.println(cast.getName() + " のHPが " + cast.getHp() + " に増えた");
	}

}

Dokukeshisou.java

package rpg;

public class Dokukeshisou extends Item {
	public Dokukeshisou() {
		setName("どくけしそう");
	}

	@Override
	public void use(Cast cast) {
		System.out.println(cast.getName() + " のからだからどくがきえた");
	}
}

Player.java が長くなって読みにくくなってきたので、オブジェクト指向っぽく書き直してみる。
別のメソッドに分割したい部分を選択して、メニューから[リファクタリング]-[メソッドの抽出]を選択すると、Eclipseがいい感じで分割してくれる。

package rpg;

public class Player {

	public static void main(String[] args) {
		createBrave();
		createSlime();
	}

	private static void createSlime() {
		Cast slime = new Cast();
		slime.setName("スライム");
		System.out.println(slime.getName() + " があらわれた!");
	}

	private static void createBrave() {
		Cast cast = new Cast();
		cast.setName("ゆうしゃ");
		cast.talk("こんにちは!");

		Item item = new Yakusou();
		cast.addItem(item);

		item = new Yakusou();
		cast.addItem(item);

		item = new Dokukeshisou();
		cast.addItem(item);

		cast.printItems();
		cast.useItem();
		cast.useItem();
		cast.useItem();
		cast.printItems();
	}

}

Player.java

package rpg;

public class Player {

	public static void main(String[] args) {
		Player player = new Player();
		Cast brave = player.createBrave();
		Cast slime = player.createSlime();
		player.fight(brave, slime);
	}

	private Cast createSlime() {
		Cast slime = new Cast();
		slime.setName("スライム");
		System.out.println(slime.getName() + " があらわれた!");
		return slime;
	}

	private Cast createBrave() {
		Cast cast = new Cast();
		cast.setName("ゆうしゃ");
		cast.talk("こんにちは!");

		Item item = new Yakusou();
		cast.addItem(item);

		item = new Yakusou();
		cast.addItem(item);

		item = new Dokukeshisou();
		cast.addItem(item);

		cast.printItems();
		cast.useItem();
		cast.useItem();
		cast.useItem();
		cast.printItems();

		return cast;
	}

	private void fight(Cast c1, Cast c2) {
		int hp;
		while (true) {
			c1.attack(c2);
			hp = c2.getHp();
			if (hp <= 0) {
				System.out.println(c2.getName() + " は死んでしまった");
				break;
			}
			c2.attack(c1);
			hp = c1.getHp();
			if (hp <= 0) {
				System.out.println(c1.getName() + " は死んでしまった");
				break;
			}
		}

	}
}

Gitを使ってソースコードを管理する

プロジェクト名「hello」を右クリックして[チーム]-[プロジェクトの共用]を選択する。

「Gitリポジトリーの構成」画面で「作成」をクリックして新しくGit管理下に置くファイルの保存先フォルダを指定する。

「完了」をクリックすると、プロジェクトがGit管理下に再配置される。

プロジェクト名の右側に「NO HEAD」と表示されればOK。

まだソースコードがGitに登録されていない状態なので、登録する操作を行う。

プロジェクトを右クリックして[チーム]-[コミット]を選択する。

「Gitステージング」のタブが表示されるので、Git管理下に置きたいファイルを選択して「+」をクリックし、「ステージされた変更」の方にファイルを移動させる。

コミットメッセージに「first commit」を入力して「コミット」をクリックする。

ファイル名の右下に黄色いアイコンが表示される。

攻撃力を変えてみる

Cast.java

package rpg;

import java.util.ArrayList;
import java.util.List;

public class Cast {
	private String name;
	private int hp = 10;
	private int power = 5;
	private List<Item> list = new ArrayList<>();

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getHp() {
		return hp;
	}

	public void setHp(int hp) {
		this.hp = hp;
	}

	public int getPower() {
		return power;
	}

	public void setPower(int power) {
		this.power = power;
	}

	public void addItem(Item item) {
		list.add(item);
		System.out.println(name + " は " + item.getName() + " をゲットした");
	}

	public void useItem() {
		Item item = list.remove(0);
		System.out.println(name + " は " + item.getName() + " を使った");
		item.use(this);
	}

	public void talk(String s) {
		System.out.println("     ――――――――――");
		System.out.println(name + "< " + s + " |");
		System.out.println("     ――――――――――");
	}

	public void printItems() {
		if (list.size() == 0) {
			System.out.println("アイテムを持っていません");
			return;
		}
		System.out.println("アイテムの一覧を表示します。");
		System.out.println("-----");
		for (Item item : list) {
			System.out.println(item.getName());
		}
	}

	public void attack(Cast cast) {
		int hp = cast.getHp();
		cast.setHp(hp - power);
		System.out.println(getName() + " が " + cast.getName() + " を攻撃(" + power + "のダメージ)");
	}
}

武器を持てるようにする

Item にならって、抽象クラス Weapon を作成する。
名前と攻撃力があればよさそう。

Weapon.java

package rpg;

public abstract class Weapon {
	private String name;
	private int power;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getPower() {
		return power;
	}

	public void setPower(int power) {
		this.power = power;
	}
}

Cast が武器を装備できるようにする。

Cast.java

package rpg;

import java.util.ArrayList;
import java.util.List;

public class Cast {
	private String name;
	private int hp = 10;
	private int power = 5;
	private Weapon weapon;
	private List<Item> list = new ArrayList<>();

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getHp() {
		return hp;
	}

	public void setHp(int hp) {
		this.hp = hp;
	}

	public int getPower() {
		return power;
	}

	public void setPower(int power) {
		this.power = power;
	}

	public Weapon getWeapon() {
		return weapon;
	}

	public void setWeapon(Weapon weapon) {
		this.weapon = weapon;
		System.out.println(name + " は " + weapon.getName() + "を装備した");
	}

	public void addItem(Item item) {
		list.add(item);
		System.out.println(name + " は " + item.getName() + " をゲットした");
	}

	public void useItem() {
		Item item = list.remove(0);
		System.out.println(name + " は " + item.getName() + " を使った");
		item.use(this);
	}

	public void talk(String s) {
		System.out.println("     ――――――――――");
		System.out.println(name + "< " + s + " |");
		System.out.println("     ――――――――――");
	}

	public void printItems() {
		if (list.size() == 0) {
			System.out.println("アイテムを持っていません");
			return;
		}
		System.out.println("アイテムの一覧を表示します。");
		System.out.println("-----");
		for (Item item : list) {
			System.out.println(item.getName());
		}
	}

	public void attack(Cast cast) {
		int hp = cast.getHp();
		cast.setHp(hp - power);
		System.out.println(getName() + " が " + cast.getName() + " を攻撃(" + power + "のダメージ)");
	}
}

ひのきのぼうを作る。

Hinokinobou.java

package rpg;

public class Hinokinobou extends Weapon {
	public Hinokinobou() {
		setName("ひのきのぼう");
		setPower(3);
	}
}

勇者にひのきのぼうを装備する。

Player.java

	private Cast createBrave() {
		Cast cast = new Cast();
		cast.setName("ゆうしゃ");
		cast.talk("こんにちは!");

		cast.setWeapon(new Hinokinobou());

		Item item = new Yakusou();
		cast.addItem(item);

		item = new Yakusou();
		cast.addItem(item);

		item = new Dokukeshisou();
		cast.addItem(item);

		cast.printItems();
		cast.useItem();
		cast.useItem();
		cast.useItem();
		cast.printItems();

		return cast;
	}

武器を持った分だけ余計にダメージを与えられるようにする。

Cast.java

	public void attack(Cast cast) {
		int hp = cast.getHp();
		int damage = power;
		if (weapon != null) {
			damage += weapon.getPower();
		}
		cast.setHp(hp - damage);
		System.out.println(getName() + " が " + cast.getName() + " を攻撃(" + damage + "のダメージ)");
	}

もう少し強い武器を持たせてスライムを一撃で倒したいので、銅のつるぎを作る。

DounoTsurugi.java

package rpg;

public class DounoTsurugi extends Weapon {
	public DounoTsurugi() {
		setName("銅のつるぎ");
		setPower(5);
	}
}

経験値を増やしてレベルアップしたい

勇者と敵を分けるために、Cast を抽象クラスに変更する。
経験値も追加する。

Cast.java

public abstract class Cast {
	private int exp;
	private String name;
	private int hp = 10;
	private int power = 5;
	private Weapon weapon;
	private List<Item> list = new ArrayList<>();

	public Cast(String name, int power, int exp) {
		this.name = name;
		this.power = power;
		this.exp = exp;
	}

	public int getExp() {
		return exp;
	}

	public void plusExp(int exp) {
		this.exp += exp;
	}

勇者のクラスとスライムのクラスを作成する。
Brave.java

package rpg;

public class Brave extends Cast {
	public Brave() {
		super("ゆうしゃ", 5, 1);
	}
}

Slime.java

package rpg;

public class Slime extends Cast {
	public Slime() {
		super("スライム", 3, 3);
	}
}

戦いに勝ったら経験値を増やす。
Player.java

	private void fight(Cast c1, Cast c2) {
		int hp;
		while (true) {
			c1.attack(c2);
			hp = c2.getHp();
			if (hp <= 0) {
				System.out.println(c2.getName() + " は死んでしまった");
				System.out.println(c1.getName() + " の経験値が " +  c2.getExp() + " 増えた");
				c1.plusExp(c2.getExp());
				break;
			}
			c2.attack(c1);
			hp = c1.getHp();
			if (hp <= 0) {
				System.out.println(c1.getName() + " は死んでしまった");
				break;
			}
		}
	}