5月, 2017 | Teaching Programming

Spring Bootによるウェブアプリ開発: コレクション(2)

辞書を作る: Mapの利用

Mapとは

「キー」と「値」をペアで扱うコレクション（Listは値だけを扱う）
キーはユニーク（unique、唯一の）になる。同じキーで違う値は登録できない。
キーと値を保存するにはputメソッドを使う。
キーで検索して値を取り出すにはgetメソッドを使う。
Mapはインターフェース。Mapを実装したクラスとしてはHashMapがよく使われる。
教科書P.215〜227

Mapを利用する例として、次の機能を持つ辞書アプリを作ってみよう。

英語をキー、日本語を値として登録できる。
英語から日本語を検索できる。
登録されたデータ一覧を見ることができる。

登録

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

<h2>登録</h2>

<p th:if="${message != null}" th:text="${message}">メッセージ</p>

<form method="post">
    英語: <input name="english" /><br />
    日本語: <input name="japanese" /><br />
    <button type="submit">登録</button>
</form>

<hr />

<a href="search">検索</a> <a href="list">一覧</a>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p th:if="${message != null}" th:text="${message}">メッセージ</p>

英語: <input name="english" /><br />

日本語: <input name="japanese" /><br />

</form>

<hr />

</body>

</html>

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.*;

/**
 * 第6回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture06")
public class Lecture06Controller {

    /**
     * 辞書情報を保存するフィールド
     */
    private Map<String, String> dictionary = new HashMap<>();

    /**
     * 辞書（登録）: get
     */
    @GetMapping("/dictionary/register")
    public String dictionaryRegister() {
        return "lecture06/dictionaryRegister";
    }

    /**
     * 辞書（登録）: post
     */
    @PostMapping("/dictionary/register")
    public String dictionaryRegister(ModelMap modelMap, @RequestParam("english") String english, @RequestParam("japanese") String japanese) {
        dictionary.put(english, japanese);
        modelMap.addAttribute("message", "「" + english + "/" + japanese + "」を登録しました。");
        return "lecture06/dictionaryRegister";
    }

    /**
     * 辞書（検索）: get
     */
    @GetMapping("/dictionary/search")
    public String dictionarySearch() {
        return "lecture06/dictionarySearch";
    }

    /**
     * 辞書（検索）: post
     */
    @PostMapping("/dictionary/search")
    public String dictionarySearch(ModelMap modelMap, @RequestParam("english") String english) {
        String japanese = dictionary.get(english);
        String result;
        if (japanese != null) {
            result = "「" + english + "」の検索結果は「" + japanese + "」です。";
        } else {
            result = "「" + english + "」は登録されていません。";
        }
        modelMap.addAttribute("result", result);
        return "lecture06/dictionarySearch";
    }

    /**
     * 辞書（一覧）
     */
    @GetMapping("/dictionary/list")
    public String dictionaryList(ModelMap modelMap) {
        modelMap.addAttribute("dictionary", dictionary);
        return "lecture06/dictionaryList";
    }

}

/**

* 辞書情報を保存するフィールド

private Map<String, String> dictionary = new HashMap<>();

/**

* 辞書（登録）: get

@GetMapping("/dictionary/register")

public String dictionaryRegister() {

return "lecture06/dictionaryRegister";

}

/**

* 辞書（登録）: post

@PostMapping("/dictionary/register")

public String dictionaryRegister(ModelMap modelMap, @RequestParam("english") String english, @RequestParam("japanese") String japanese) {

dictionary.put(english, japanese);

modelMap.addAttribute("message", "「" + english + "/" + japanese + "」を登録しました。");

return "lecture06/dictionaryRegister";

}

コントローラ、22行目: 辞書の情報を格納するHashSetをフィールドとして定義する。
コントローラ、37行目: putメソッドでMapに登録する。

検索

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

<h2>検索</h2>

<p th:if="${result != null}" th:text="${result}">検索結果</p>

<form method="post">
    英語: <input name="english" /><br />
    <button type="submit">検索</button>
</form>

<hr />

<a href="register">登録</a> <a href="list">一覧</a>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

英語: <input name="english" /><br />

</form>

<hr />

</body>

</html>

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.*;

/**
 * 第6回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture06")
public class Lecture06Controller {

    /**
     * 辞書情報を保存するフィールド
     */
    private Map<String, String> dictionary = new HashMap<>();

    /**
     * 辞書（登録）: get
     */
    @GetMapping("/dictionary/register")
    public String dictionaryRegister() {
        return "lecture06/dictionaryRegister";
    }

    /**
     * 辞書（登録）: post
     */
    @PostMapping("/dictionary/register")
    public String dictionaryRegister(ModelMap modelMap, @RequestParam("english") String english, @RequestParam("japanese") String japanese) {
        dictionary.put(english, japanese);
        modelMap.addAttribute("message", "「" + english + "/" + japanese + "」を登録しました。");
        return "lecture06/dictionaryRegister";
    }

    /**
     * 辞書（検索）: get
     */
    @GetMapping("/dictionary/search")
    public String dictionarySearch() {
        return "lecture06/dictionarySearch";
    }

    /**
     * 辞書（検索）: post
     */
    @PostMapping("/dictionary/search")
    public String dictionarySearch(ModelMap modelMap, @RequestParam("english") String english) {
        String japanese = dictionary.get(english);
        String result;
        if (japanese != null) {
            result = "「" + english + "」の検索結果は「" + japanese + "」です。";
        } else {
            result = "「" + english + "」は登録されていません。";
        }
        modelMap.addAttribute("result", result);
        return "lecture06/dictionarySearch";
    }

    /**
     * 辞書（一覧）
     */
    @GetMapping("/dictionary/list")
    public String dictionaryList(ModelMap modelMap) {
        modelMap.addAttribute("dictionary", dictionary);
        return "lecture06/dictionaryList";
    }

}

/**

* 辞書（検索）: get

@GetMapping("/dictionary/search")

public String dictionarySearch() {

return "lecture06/dictionarySearch";

}

/**

* 辞書（検索）: post

@PostMapping("/dictionary/search")

public String dictionarySearch(ModelMap modelMap, @RequestParam("english") String english) {

String japanese = dictionary.get(english);

String result;

if (japanese != null) {

result = "「" + english + "」の検索結果は「" + japanese + "」です。";

} else {

result = "「" + english + "」は登録されていません。";

}

modelMap.addAttribute("result", result);

return "lecture06/dictionarySearch";

}

コントローラ、55行目: getメソッドでキーから値を得る。登録されていない場合はnullが返ってくる。

一覧

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>辞書</title>
    <style>
        table {
            border-collapse: collapse;
        }
        th, td {
            border: 1px solid black;
        }
    </style>
</head>
<body>

<h2>一覧</h2>

<table>
    <tr>
        <th>英語</th>
        <th>日本語</th>
    </tr>
    <tr th:each="english:${dictionary.keySet()}">
        <td th:text="${english}">英語</td>
        <td th:text="${dictionary.get(english)}">日本語</td>
    </tr>
</table>

<hr />

<a href="register">登録</a> <a href="search">検索</a>

</body>
</html>

<!DOCTYPE html>

<head>

<style>

table {

border-collapse: collapse;

}

th, td {

border: 1px solid black;

}

</style>

</head>

<body>

<table>

<tr>

</tr>

</tr>

</table>

<hr />

</body>

</html>

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.*;

/**
 * 第6回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture06")
public class Lecture06Controller {

    /**
     * 辞書情報を保存するフィールド
     */
    private Map<String, String> dictionary = new HashMap<>();

    /**
     * 辞書（登録）: get
     */
    @GetMapping("/dictionary/register")
    public String dictionaryRegister() {
        return "lecture06/dictionaryRegister";
    }

    /**
     * 辞書（登録）: post
     */
    @PostMapping("/dictionary/register")
    public String dictionaryRegister(ModelMap modelMap, @RequestParam("english") String english, @RequestParam("japanese") String japanese) {
        dictionary.put(english, japanese);
        modelMap.addAttribute("message", "「" + english + "/" + japanese + "」を登録しました。");
        return "lecture06/dictionaryRegister";
    }

    /**
     * 辞書（検索）: get
     */
    @GetMapping("/dictionary/search")
    public String dictionarySearch() {
        return "lecture06/dictionarySearch";
    }

    /**
     * 辞書（検索）: post
     */
    @PostMapping("/dictionary/search")
    public String dictionarySearch(ModelMap modelMap, @RequestParam("english") String english) {
        String japanese = dictionary.get(english);
        String result;
        if (japanese != null) {
            result = "「" + english + "」の検索結果は「" + japanese + "」です。";
        } else {
            result = "「" + english + "」は登録されていません。";
        }
        modelMap.addAttribute("result", result);
        return "lecture06/dictionarySearch";
    }

    /**
     * 辞書（一覧）
     */
    @GetMapping("/dictionary/list")
    public String dictionaryList(ModelMap modelMap) {
        modelMap.addAttribute("dictionary", dictionary);
        return "lecture06/dictionaryList";
    }

}

/**

* 辞書（一覧）

@GetMapping("/dictionary/list")

public String dictionaryList(ModelMap modelMap) {

modelMap.addAttribute("dictionary", dictionary);

return "lecture06/dictionaryList";

}

テンプレート、24行目: keySetメソッドでキーのSetを取得する。Setについては教科書P.205〜214を参照。
テンプレート、26行目: getメソッドでキーから値を得る。

資料

ソースコード

teachingprogramming/lecture2017java2: NCT Java II (2017)

オンラインドキュメント

Tutorial: Using Thymeleaf (ja)

教科書

Map: P.215〜227
Set: P.205〜214

再評価のための復習: コンストラクタ

コンストラクタとは

インスタンス化の時（new演算子を使う時）に実行されるメソッド。

コンストラクタの定義

コンストラクタはメソッドの一種なのでメソッドの定義の仕方とあまり変わらない。下記の点がコンストラクタに特有であることに注意する。
- メソッド名は自由につけられない。コンストラクタはクラス名と同じにする。
- 戻り値（返り値）の型は記述しない。

コンストラクタが定義されているクラスの例

public class Person {
    public String name; // 名前を表すフィールド
    public int age; // 年齢を表すフィールド

    /**
     * 引数なしのコンストラクタ
     */
    public Person() {
        name = "名無し";
        age = 20;
    }

    /**
     * フィールドに値をセットするための引数をもつコンストラクタ
     */
    public Person(String name, int age) {
        this.name = name;
        this.age = age;
    }

    /**
     * 自己紹介をするメソッド
     */
    public void printSelfIntroduction() {
        System.out.println("私の名前は" + name + "で" + age + "歳です。");
    }

}

public class Person {

public String name; // 名前を表すフィールド

public int age; // 年齢を表すフィールド

/**

* 引数なしのコンストラクタ

public Person() {

name = "名無し";

age = 20;

}

/**

* フィールドに値をセットするための引数をもつコンストラクタ

public Person(String name, int age) {

this.name = name;

this.age = age;

}

/**

* 自己紹介をするメソッド

public void printSelfIntroduction() {

System.out.println("私の名前は" + name + "で" + age + "歳です。");

}

インスタンス化

public class Main {
    public static void main(String[] args) {
        Person person1 = new Person();
        person1.printSelfIntroduction(); // 「私の名前は名無しで20歳です。」と表示される。

        Person person2 = new Person("たろう", 22);
        person2.printSelfIntroduction(); // 「私の名前はたろうで22歳です。」と表示される。
    }
}

public class Main {

public static void main(String[] args) {

Person person1 = new Person();

person1.printSelfIntroduction(); // 「私の名前は名無しで20歳です。」と表示される。

Person person2 = new Person("たろう", 22);

person2.printSelfIntroduction(); // 「私の名前はたろうで22歳です。」と表示される。

}

ポイント

コンストラクタの名前はクラス名と同じでなければならないため、複数のコンストラクタを定義するには（メソッド名で区別できないので）、引数の形（個数、型の並び順）が違っていなければならない。つまりコンストラクタのオーバーロード。（教科書P.72等）
コンストラクタを定義しないクラスには、デフォルトコンストラクタが自動的に生成される（定義したことになる）。デフォルトコンストラクタは、引数なしで何の処理もしない。
ハマりやすいポイント: 引数ありのコンストラクタを定義しただけだと、引数なしでインスタンス化することができない（１つもコンストラクタを定義しない場合にしかデフォルトコンストラクタが生成されないから）。

教科書

<br />

P.74〜77: コンストラクタ
P.72: オーバーロード

Spring Bootによるウェブアプリ開発: コレクション(1)

Formの基礎（前回）のまとめ

前回のプログラム（おみくじ及び例1〜3）の動作を、下記の観点で確認しよう（記述の意味を理解すること）。

@RequestMappingアノテーション
@RequestParamアノテーション
ModelMap型のaddAttributeメソッド
postとgetの違い
@GetMappingアノテーションと@PostMappingアノテーション
th:text属性
th:each属性
th:if属性
@RequestParamアノテーションのrequiredオプション
メソッドのオーバーロード

掲示板の改良: 名前や日付も保存するList

第4回で作った掲示板はコメントだけを保存・表示するものであった。より実用的にするために、投稿者の名前と投稿時間も保存・表示するようにしてみよう。

まず第4回の掲示板を第5回で実行できるようにコピーする（テンプレートのパス等を修正しなければいけないことに注意する）。

どこをどのように変更するか？

テンプレート: フォームに名前の入力欄を加える。
コントローラ: 名前を受け取れるようにする。
コメントを表すBbsCommentクラスを作成: 本文と名前と投稿日時のフィールドを作る。
コントローラ: BbsComment型のインスタンスを作成
コントローラ: コメントを保存するリストの型をList<BbsComment>にする。
コントローラ: BbsComment型のインスタンスを作成し、リストに追加する。
テンプレート: コメントの表示部分を修正する。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>掲示板</title>
</head>
<body>

<ol>
    <li th:each="comment:${commentList}">
        名前: <b th:text="${comment.name}" style="color: green">名前</b>
        <th:block th:text="${comment.date}">投稿日時</th:block><br />
        <p th:text="${comment.body}">コメント本文</p>
    </li>
</ol>

<hr />

<form method="post">
    名前: <input name="name" /><br />
    本文: <input name="body" style="width: 400px"/><br />
    <button type="submit">書き込む</button>
</form>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<ol>

名前: <b th:text="${comment.name}" style="color: green">名前</b>

<th:block th:text="${comment.date}">投稿日時</th:block><br />

<p th:text="${comment.body}">コメント本文</p>

</li>

</ol>

<hr />

名前: <input name="name" /><br />

本文: <input name="body" style="width: 400px"/><br />

</form>

</body>

</html>

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

import java.util.*;

/**
 * 第5回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture05")
public class Lecture05Controller {

    /**
     * 掲示板: コメントを保存しておくフィールド
     */
    private List<BbsComment> commentList = new ArrayList<>();

    /**
     * 掲示板: get
     */
    @GetMapping("/bbs")
    public String bbsGet(ModelMap modelMap) {
        modelMap.addAttribute("commentList", commentList);
        return "lecture05/bbs";
    }

    /**
     * 掲示板: post
     */
    @PostMapping("/bbs")
    public String bbsGet(ModelMap modelMap, @RequestParam("body") String body, @RequestParam("name") String name) {
        BbsComment comment = new BbsComment();
        comment.body = body;
        comment.name = name;
        comment.date = new Date();
        commentList.add(comment);
        modelMap.addAttribute("commentList", commentList);
        return "lecture05/bbs";
    }


    /**
     * 辞書情報を保存するフィールド
     */
    private Map<String, String> dictionary = new HashMap<>();

    /**
     * 辞書（登録）: get
     */
    @GetMapping("/dictionary/register")
    public String dictionaryRegister() {
        return "lecture05/dictionaryRegister";
    }

    /**
     * 辞書（登録）: post
     */
    @PostMapping("/dictionary/register")
    public String dictionaryRegister(ModelMap modelMap, @RequestParam("english") String english, @RequestParam("japanese") String japanese) {
        dictionary.put(english, japanese);
        modelMap.addAttribute("message", "「" + english + "/" + japanese + "」を登録しました。");
        return "lecture05/dictionaryRegister";
    }

    /**
     * 辞書（検索）: get
     */
    @GetMapping("/dictionary/search")
    public String dictionarySearch() {
        return "lecture05/dictionarySearch";
    }

    /**
     * 辞書（検索）: post
     */
    @PostMapping("/dictionary/search")
    public String dictionarySearch(ModelMap modelMap, @RequestParam("english") String english) {
        String japanese = dictionary.get(english);
        String result;
        if (japanese != null) {
            result = "「" + english + "」の検索結果は「" + japanese + "」です。";
        } else {
            result = "「" + english + "」は登録されていません。";
        }
        modelMap.addAttribute("result", result);
        return "lecture05/dictionarySearch";
    }

    /**
     * 辞書（一覧）
     */
    @GetMapping("/dictionary/list")
    public String dictionaryList(ModelMap modelMap) {
        modelMap.addAttribute("dictionary", dictionary);
        return "lecture05/dictionaryList";
    }

}

/**

* 掲示板: コメントを保存しておくフィールド

private List<BbsComment> commentList = new ArrayList<>();

/**

* 掲示板: get

@GetMapping("/bbs")

public String bbsGet(ModelMap modelMap) {

modelMap.addAttribute("commentList", commentList);

return "lecture05/bbs";

}

/**

* 掲示板: post

@PostMapping("/bbs")

public String bbsGet(ModelMap modelMap, @RequestParam("body") String body, @RequestParam("name") String name) {

BbsComment comment = new BbsComment();

comment.body = body;

comment.name = name;

comment.date = new Date();

commentList.add(comment);

modelMap.addAttribute("commentList", commentList);

return "lecture05/bbs";

}

package net.teachingprogramming.webapp;

import java.util.Date;

/**
 * 掲示板（第5回）のコメントを表すクラス
 */
public class BbsComment {
    /** コメントの本文 */
    public String body;
    /** 投稿者の名前 */
    public String name;
    /** 投稿日時 */
    public Date date;
}

package net.teachingprogramming.webapp;

import java.util.Date;

/**

* 掲示板（第5回）のコメントを表すクラス

public class BbsComment {

/** コメントの本文 */

public String body;

/** 投稿者の名前 */

public String name;

/** 投稿日時 */

public Date date;

}

資料

ソースコード

teachingprogramming/lecture2017java2: NCT Java II (2017)

オンラインドキュメント

Tutorial: Using Thymeleaf (ja)

教科書

Map: P.215〜227
Set: P.205〜214

再評価のための復習: メソッド

メソッドの概念

Method concept

メソッドを呼ぶと定義された処理が実行される
メソッドを呼ぶ時に引数を渡す場合がある。
メソッドを呼ぶと戻り値が返ってくる場合がある。

メソッドの定義

例: int型の数値を2つ足した合計を返すメソッドの定義

メソッド

引数

メソッド名の後ろのカッコの中に、型と引数名を書く。
複数の場合はカンマで区切る
引数がない場合は書かない（カッコは必要）

戻り値（返り値）

戻り値の肩をメソッド名の前に書く。
戻り値はreturn文で指定する。
戻り値がない場合は、戻り値の型として「void」を指定する。return文はなくても良い（あっても良いがreturnの後ろに何も書かない）。

アクセス修飾子

フィールドと同様にアクセス修飾子をつけることで、そのメソッドを呼び出すことのできる呼び出し元を制限することができる。
アクセス修飾子は戻り値の型の前に書く。

処理で使える変数

引数
フィールド
その場で定義した変数

例

class Person {
    /** 年齢 */
    private int age = -1;
    /** 名前 */
    private String name = null;

    /**
     * フィールドageをセットする（セッター）
     */
    public void setAge(int a) {
        age = a;
    }

    /**
     * フィールドnameをセットする（セッター）
     */
    public void setName(String name) {
        // 引数nameとフィールドnameを区別しなければならないことに注意
        this.name = name; 
    }

    /**
     * フィールドが正しくセットされているか確認する
     */
    private boolean checkField() {
        if (name != null && age >= 0) {
            return true;
        } else {
            return false;
        }
        // これは「return name != null && age >= 0;」と書ける。
    }

    /**
     * 自己紹介を行う
     */
    public void printSelfIntroduction() {
        if (checkField()) {
            System.out.println("私の名前は" + name + "で" + age + "歳です。");
        } else {
            System.err.println("フィールドが不正です。");
        }
    }

}

class Person {

/** 年齢 */

private int age = -1;

/** 名前 */

private String name = null;

/**

* フィールドageをセットする（セッター）

public void setAge(int a) {

age = a;

}

/**

* フィールドnameをセットする（セッター）

public void setName(String name) {

// 引数nameとフィールドnameを区別しなければならないことに注意

this.name = name;

}

/**

* フィールドが正しくセットされているか確認する

private boolean checkField() {

if (name != null && age >= 0) {

return true;

} else {

return false;

}

// これは「return name != null && age >= 0;」と書ける。

}

/**

* 自己紹介を行う

public void printSelfIntroduction() {

if (checkField()) {

System.out.println("私の名前は" + name + "で" + age + "歳です。");

} else {

System.err.println("フィールドが不正です。");

}

public class Main {
    public static void main(String[] args) {
        Person person = new Person();
        person.setAge(19);
        person.setName("たろう");
        person.checkField(); // コンパイルエラー（privateなメソッドは呼び出せない）
        person.printSelfIntroduction();
    }
}

public class Main {

public static void main(String[] args) {

Person person = new Person();

person.setAge(19);

person.setName("たろう");

person.checkField(); // コンパイルエラー（privateなメソッドは呼び出せない）

person.printSelfIntroduction();

}

教科書

<br />

P.66: メソッドの定義
P.68: メソッドの呼び出し(1)
P.70: メソッドの呼び出し(2)

Spring Bootによるウェブアプリ開発: Formの基礎

前回の要点

http://start.spring.ioでプロジェクトを作成する。
処理の流れ
テンプレートとコントローラを作る。
テンプレート
- HTMLで記述する。ただし単独で現れるタグは後ろに「/」をつける。
- コントローラから送られてきた値を表示するところで、th:text属性を使う。
コントローラ
- クラスに@Controllerアノテーションをつける。
- クラスとメソッドにつける@RequestMappingアノテーションで担当するURLを指定する。
- メソッドの返り値で利用するテンプレートを指定する。
- テンプレートに値を送り込みたい場合は、メソッドにModelMap型の引数を加え、そのaddAttributeメソッドで名前と値を指定する。
その他
- ポート番号を変える: resourcesにあるapplication.propertiesに「server.port = 18080」などと記述する。

ドキュメント

Formの作成と表示

おみくじアプリを作ってみよう。

処理のシーケンスは次のようになる。

おみくじのシーケンス

名前を入力する（フォームの利用）

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>おみくじ</title>
</head>
<body>

<form action="omikuji_output" method="post">
    名前を入力してください <input name="name" /><br/>
    <button type="submit">おみくじを引く</button>
</form>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

名前を入力してください <input name="name" /><br/>

<button type="submit">おみくじを引く</button>

</form>

</body>

</html>

formタグ: どこからどこまでがフォームかを表す。action属性でどこに送るか指定する。method属性でどのような形で送るかを指定する。
inputタグ: name属性で区別のための名前をつける。この例ではその名前にnameとつけて紛らわしいので注意すること。
buttonタグ: type属性をsubmitとすることで、formの送信ボタンにすることができる。

コントローラ

package net.teachingprogramming.webapp;

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

/**
 * 第4回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture04")
public class Lecture04Controller {

    /**
     * おみくじ: 名前の入力
     */
    @RequestMapping("/omikuji_input")
    public String omikujiInput() {
        return "lecture04/omikuji_input";
    }

    /**
     * おみくじ: 結果の出力
     */
    @RequestMapping("/omikuji_output")
    public String omikujiOutput(ModelMap modelMap, @RequestParam("name") String name) {
        String result = "吉";
        if (Math.random() < 0.5) {
            result = "大吉";
        }
        modelMap.addAttribute("result", result);
        modelMap.addAttribute("name", name);
        return "lecture04/omikuji_output";
    }

}

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

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

import org.springframework.web.bind.annotation.RequestParam;

/**

* 第4回で使うコントローラ

@Controller

@RequestMapping("/lecture04")

public class Lecture04Controller {

/**

* おみくじ: 名前の入力

@RequestMapping("/omikuji_input")

public String omikujiInput() {

return "lecture04/omikuji_input";

}

/**

* おみくじ: 結果の出力

@RequestMapping("/omikuji_output")

public String omikujiOutput(ModelMap modelMap, @RequestParam("name") String name) {

String result = "吉";

if (Math.random() < 0.5) {

result = "大吉";

}

modelMap.addAttribute("result", result);

modelMap.addAttribute("name", name);

return "lecture04/omikuji_output";

}

18〜21行目:「/lecture04/omikuji_input」にアクセスがあると、「lecture04/omikuji_input」がブラウザに送られる。
26〜34行目:「/lecture04/omikuji_output」にアクセスがあると、「lecture04/omikuji_output」がブラウザに送られる。
- 27行目:「フォームから送られてくるパラメータを受け取るための引数」を指定する為に@RequestParamアノテーションをつける。
- 28〜31行目: String型の変数を乱数によって「吉」か「大吉」にする。
- 32行目: 「result」という名前で変数resultをテンプレートに送る。
- 32行目: 「name」という名前で変数nameをテンプレートに送る。

結果の表示

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>おみくじ</title>
</head>
<body>

<p>
    <span th:text="${name}">nameの値</span>さんの今日の運勢は<span th:text="${result}">resultの値</span>です。
</p>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p>

<span th:text="${name}">nameの値</span>さんの今日の運勢は<span th:text="${result}">resultの値</span>です。

</p>

</body>

</html>

コントローラからは「name」と「result」という名前で値が送られてきている。それぞれ、th:text属性で表示する。

例1: 掲示板

テンプレート

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>掲示板</title>
</head>
<body>

<ul>
    <li th:each="comment:${commentList}">
        <th:block th:text="${comment}">コメント</th:block>
    </li>
    <!-- 上とほぼ同じ
    <li th:each="comment:${commentList}" th:text="${comment}">コメント</li>
    -->
</ul>

<hr />

<form method="post">
    <input name="comment" /> <button type="submit">書き込む</button>
</form>

</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<ul>

<th:block th:text="${comment}">コメント</th:block>

</li>

<!-- 上とほぼ同じ

-->

</ul>

<hr />

</form>

</body>

</html>

最初の表示（get）とコメントを書き込む時（post）の両方でこのテンプレートを使う。
formのaction属性は省略すると、同じURLにアクセスすることになる。
リストから一つづつ取り出すのは、th:each属性を使う。コロンの左側でつけた名前でアクセスできる（スコープは、属性をつけた要素の内側）。注意しなければならないのは、繰り返し出力されるのは、th:each属性がついた要素（タグ）だということ。例えば、commentListに3つの文字列が入っていたとしたら、li要素が3つ出力される。
タグ無しで値を出力するのはth:blockタグを使う。

コントローラ

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

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

/**
 * 第4回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture04")
public class Lecture04Controller {

    /**
     * おみくじ: 名前の入力
     */
    @RequestMapping("/omikuji_input")
    public String omikujiInput() {
        return "lecture04/omikuji_input";
    }

    /**
     * おみくじ: 結果の出力
     */
    @RequestMapping("/omikuji_output")
    public String omikujiOutput(ModelMap modelMap, @RequestParam("name") String name) {
        String result = "吉";
        if (Math.random() < 0.5) {
            result = "大吉";
        }
        modelMap.addAttribute("result", result);
        modelMap.addAttribute("name", name);
        return "lecture04/omikuji_output";
    }

    /**
     * 掲示板: コメントを保存しておくフィールド
     */
    private List<String> commentList = new ArrayList<>();
    // private ArrayList<String> commentList = new ArrayList<String>(); // ListとArrayListの関係がよくわからない人向け

    /**
     * 掲示板: get
     */
    @GetMapping("bbs")
    public String bbsGet(ModelMap modelMap) {
        modelMap.addAttribute("commentList", commentList);
        return "lecture04/bbs";
    }

    /**
     * 掲示板: post
     */
    @PostMapping("bbs")
    public String bbsGet(ModelMap modelMap, @RequestParam("comment") String comment) {
        commentList.add(comment);
        modelMap.addAttribute("commentList", commentList);
        return "lecture04/bbs";
    }

    /**
     * じゃんけん: get
     */
    @GetMapping("janken")
    public String janken() {
        return "lecture04/janken";
    }

    /**
     * じゃんけん: post
     */
    @PostMapping("janken")
    public String janken(ModelMap modelMap, @RequestParam("janken") String janken) {
        StringBuilder resultBuilder = new StringBuilder();
        resultBuilder.append("あなたは");
        if (janken.equals("g")) {
            resultBuilder.append("グー");
        } else if (janken.equals("c")) {
            resultBuilder.append("チョキ");
        } else {
            resultBuilder.append("パー");
        }
        resultBuilder.append("を出して");
        double random = Math.random();
        if (random < 0.333) {
            resultBuilder.append("勝ちました。");
        } else if (random < 0.666) {
            resultBuilder.append("負けました。");
        } else {
            resultBuilder.append("引き分けました。");
        }
        modelMap.addAttribute("result", resultBuilder.toString());
        return "lecture04/janken";
    }

    /**
     * アンケート
     */
    @RequestMapping("questionnaire")
    public String questionnaire(ModelMap modelMap,
                           @RequestParam(value = "java", required = false) boolean java,
                           @RequestParam(value = "kotlin", required = false) boolean kotlin,
                           @RequestParam(value = "scala", required = false) boolean scala) {
        StringBuilder resultBuilder = new StringBuilder();
        if (java) {
            resultBuilder.append("Javaがチェックされました。");
        }
        if (kotlin) {
            resultBuilder.append("Kotlinがチェックされました。");
        }
        if (scala) {
            resultBuilder.append("Scalaがチェックされました。");
        }
        modelMap.addAttribute("result", resultBuilder.toString());
        return "lecture04/questionnaire";
    }

}

/**

* 掲示板: コメントを保存しておくフィールド

private List<String> commentList = new ArrayList<>();

// private ArrayList<String> commentList = new ArrayList<String>(); // ListとArrayListの関係がよくわからない人向け

/**

* 掲示板: get

@GetMapping("bbs")

public String bbsGet(ModelMap modelMap) {

modelMap.addAttribute("commentList", commentList);

return "lecture04/bbs";

}

/**

* 掲示板: post

@PostMapping("bbs")

public String bbsGet(ModelMap modelMap, @RequestParam("comment") String comment) {

commentList.add(comment);

modelMap.addAttribute("commentList", commentList);

return "lecture04/bbs";

}

@RequestMappingはgetとpostの両方で実行されるが、@GetMappingと@PostMappingを使うことで、同じURLでgetとpostの処理を別のメソッドに分けて書くことができる。
コントローラ全体

例2: じゃんけん

テンプレート

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>じゃんけん</title>
</head>
<body>

<p th:if="${result != null}" th:text="${result}">
    結果がある場合表示する
</p>

<form method="post">
    <input type="radio" name="janken" value="g" checked="checked"/> グー<br />
    <input type="radio" name="janken" value="c" /> チョキ<br />
    <input type="radio" name="janken" value="p" /> パー<br />
    <button type="submit">じゃんけんする</button>
</form>

</body>
</html>

<!DOCTYPE html>

<head>

<title>じゃんけん</title>

</head>

<body>

結果がある場合表示する

</p>

<button type="submit">じゃんけんする</button>

</form>

</body>

</html>

最初の表示（get）とじゃんけんをした時（post）の両方でこのテンプレートを使う。
th:ifで条件が真（true）の時だけ要素を表示させることができる。ここでは、コントローラからresultが送られてきた時（つまりresultがnullでない）にそれを表示している。
input要素のtype属性は「radio」。checked=”checked”をつけた要素がデフォルトで選択される。
name属性は全て同じにする（nameを同じにすると同一グループとなり排他的選択ができる）。
選択されたボタンのvalue属性がコントローラに送られる。

コントローラ

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

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

/**
 * 第4回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture04")
public class Lecture04Controller {

    /**
     * おみくじ: 名前の入力
     */
    @RequestMapping("/omikuji_input")
    public String omikujiInput() {
        return "lecture04/omikuji_input";
    }

    /**
     * おみくじ: 結果の出力
     */
    @RequestMapping("/omikuji_output")
    public String omikujiOutput(ModelMap modelMap, @RequestParam("name") String name) {
        String result = "吉";
        if (Math.random() < 0.5) {
            result = "大吉";
        }
        modelMap.addAttribute("result", result);
        modelMap.addAttribute("name", name);
        return "lecture04/omikuji_output";
    }

    /**
     * 掲示板: コメントを保存しておくフィールド
     */
    private List<String> commentList = new ArrayList<>();
    // private ArrayList<String> commentList = new ArrayList<String>(); // ListとArrayListの関係がよくわからない人向け

    /**
     * 掲示板: get
     */
    @GetMapping("bbs")
    public String bbsGet(ModelMap modelMap) {
        modelMap.addAttribute("commentList", commentList);
        return "lecture04/bbs";
    }

    /**
     * 掲示板: post
     */
    @PostMapping("bbs")
    public String bbsGet(ModelMap modelMap, @RequestParam("comment") String comment) {
        commentList.add(comment);
        modelMap.addAttribute("commentList", commentList);
        return "lecture04/bbs";
    }

    /**
     * じゃんけん: get
     */
    @GetMapping("janken")
    public String janken() {
        return "lecture04/janken";
    }

    /**
     * じゃんけん: post
     */
    @PostMapping("janken")
    public String janken(ModelMap modelMap, @RequestParam("janken") String janken) {
        StringBuilder resultBuilder = new StringBuilder();
        resultBuilder.append("あなたは");
        if (janken.equals("g")) {
            resultBuilder.append("グー");
        } else if (janken.equals("c")) {
            resultBuilder.append("チョキ");
        } else {
            resultBuilder.append("パー");
        }
        resultBuilder.append("を出して");
        double random = Math.random();
        if (random < 0.333) {
            resultBuilder.append("勝ちました。");
        } else if (random < 0.666) {
            resultBuilder.append("負けました。");
        } else {
            resultBuilder.append("引き分けました。");
        }
        modelMap.addAttribute("result", resultBuilder.toString());
        return "lecture04/janken";
    }

    /**
     * アンケート
     */
    @RequestMapping("questionnaire")
    public String questionnaire(ModelMap modelMap,
                           @RequestParam(value = "java", required = false) boolean java,
                           @RequestParam(value = "kotlin", required = false) boolean kotlin,
                           @RequestParam(value = "scala", required = false) boolean scala) {
        StringBuilder resultBuilder = new StringBuilder();
        if (java) {
            resultBuilder.append("Javaがチェックされました。");
        }
        if (kotlin) {
            resultBuilder.append("Kotlinがチェックされました。");
        }
        if (scala) {
            resultBuilder.append("Scalaがチェックされました。");
        }
        modelMap.addAttribute("result", resultBuilder.toString());
        return "lecture04/questionnaire";
    }

}

100

/**

* じゃんけん: get

@GetMapping("janken")

public String janken() {

return "lecture04/janken";

}

/**

* じゃんけん: post

@PostMapping("janken")

public String janken(ModelMap modelMap, @RequestParam("janken") String janken) {

StringBuilder resultBuilder = new StringBuilder();

resultBuilder.append("あなたは");

if (janken.equals("g")) {

resultBuilder.append("グー");

} else if (janken.equals("c")) {

resultBuilder.append("チョキ");

} else {

resultBuilder.append("パー");

}

resultBuilder.append("を出して");

double random = Math.random();

if (random < 0.333) {

resultBuilder.append("勝ちました。");

} else if (random < 0.666) {

resultBuilder.append("負けました。");

} else {

resultBuilder.append("引き分けました。");

}

modelMap.addAttribute("result", resultBuilder.toString());

return "lecture04/janken";

}

getとpostで同じメソッド名となっているが、これをオーバーロードという（教科書P.132）。
StringBuilderは文字列を繋げる時に使える（教科書P.82）。
律儀にコンピュータの手を決定して結果を出力してもいいが、ここでは選択した手に関わらずランダムで結果を出力している。
コントローラ全体

例3: アンケート

テンプレート

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>チェックボックス</title>
</head>
<body>

<p>
    好きなプログラミング言語はどれですか？
</p>

<form method="get">
    Java <input type="checkbox" name="java" /><br />
    Kotlin <input type="checkbox" name="kotlin" /><br />
    Scala <input type="checkbox" name="scala" /><br />
    <button type="submit">送信</button>
</form>

<p th:if="${result != null}" th:text="${result}">
    チェックボックスを送信した結果。
</p>

</body>
</html>

<!DOCTYPE html>

<head>

<title>チェックボックス</title>

</head>

<body>

<p>

好きなプログラミング言語はどれですか？

</p>

Java <input type="checkbox" name="java" /><br />

Kotlin <input type="checkbox" name="kotlin" /><br />

Scala <input type="checkbox" name="scala" /><br />

</form>

チェックボックスを送信した結果。

</p>

</body>

</html>

チェックボックスはname属性で区別する。

コントローラ

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;

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

/**
 * 第4回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture04")
public class Lecture04Controller {

    /**
     * おみくじ: 名前の入力
     */
    @RequestMapping("/omikuji_input")
    public String omikujiInput() {
        return "lecture04/omikuji_input";
    }

    /**
     * おみくじ: 結果の出力
     */
    @RequestMapping("/omikuji_output")
    public String omikujiOutput(ModelMap modelMap, @RequestParam("name") String name) {
        String result = "吉";
        if (Math.random() < 0.5) {
            result = "大吉";
        }
        modelMap.addAttribute("result", result);
        modelMap.addAttribute("name", name);
        return "lecture04/omikuji_output";
    }

    /**
     * 掲示板: コメントを保存しておくフィールド
     */
    private List<String> commentList = new ArrayList<>();
    // private ArrayList<String> commentList = new ArrayList<String>(); // ListとArrayListの関係がよくわからない人向け

    /**
     * 掲示板: get
     */
    @GetMapping("bbs")
    public String bbsGet(ModelMap modelMap) {
        modelMap.addAttribute("commentList", commentList);
        return "lecture04/bbs";
    }

    /**
     * 掲示板: post
     */
    @PostMapping("bbs")
    public String bbsGet(ModelMap modelMap, @RequestParam("comment") String comment) {
        commentList.add(comment);
        modelMap.addAttribute("commentList", commentList);
        return "lecture04/bbs";
    }

    /**
     * じゃんけん: get
     */
    @GetMapping("janken")
    public String janken() {
        return "lecture04/janken";
    }

    /**
     * じゃんけん: post
     */
    @PostMapping("janken")
    public String janken(ModelMap modelMap, @RequestParam("janken") String janken) {
        StringBuilder resultBuilder = new StringBuilder();
        resultBuilder.append("あなたは");
        if (janken.equals("g")) {
            resultBuilder.append("グー");
        } else if (janken.equals("c")) {
            resultBuilder.append("チョキ");
        } else {
            resultBuilder.append("パー");
        }
        resultBuilder.append("を出して");
        double random = Math.random();
        if (random < 0.333) {
            resultBuilder.append("勝ちました。");
        } else if (random < 0.666) {
            resultBuilder.append("負けました。");
        } else {
            resultBuilder.append("引き分けました。");
        }
        modelMap.addAttribute("result", resultBuilder.toString());
        return "lecture04/janken";
    }

    /**
     * アンケート
     */
    @RequestMapping("questionnaire")
    public String questionnaire(ModelMap modelMap,
                           @RequestParam(value = "java", required = false) boolean java,
                           @RequestParam(value = "kotlin", required = false) boolean kotlin,
                           @RequestParam(value = "scala", required = false) boolean scala) {
        StringBuilder resultBuilder = new StringBuilder();
        if (java) {
            resultBuilder.append("Javaがチェックされました。");
        }
        if (kotlin) {
            resultBuilder.append("Kotlinがチェックされました。");
        }
        if (scala) {
            resultBuilder.append("Scalaがチェックされました。");
        }
        modelMap.addAttribute("result", resultBuilder.toString());
        return "lecture04/questionnaire";
    }

}

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

/**

* アンケート

@RequestMapping("questionnaire")

public String questionnaire(ModelMap modelMap,

@RequestParam(value = "java", required = false) boolean java,

@RequestParam(value = "kotlin", required = false) boolean kotlin,

@RequestParam(value = "scala", required = false) boolean scala) {

StringBuilder resultBuilder = new StringBuilder();

if (java) {

resultBuilder.append("Javaがチェックされました。");

}

if (kotlin) {

resultBuilder.append("Kotlinがチェックされました。");

}

if (scala) {

resultBuilder.append("Scalaがチェックされました。");

}

modelMap.addAttribute("result", resultBuilder.toString());

return "lecture04/questionnaire";

}

チェックボックスは、チェックをしたときにしかパラメータが送信されない。そのため、デフォルトの@RequestParamではエラーになる。
パラメータが送信されなくてもエラーにならないようにするには、「required = false」とする。
チェックされているときはtrue、チェックされてない時（パラメータが無い時）は、falseになる。
コントローラ全体

教科書

<br />

再評価のための復習: フィールド

最もシンプルなフィールドの定義

型名フィールド名;

これにアクセス修飾子や初期化がつく。

フィールド定義の例

import java.util.Date;

public class FieldExample {
    // プリミティブ型、初期化無し
    int num1;

    // プリミティブ型、初期化有り
    int num2 = 100;

    // クラス型（String型）、初期化無し
    String str1;

    // クラス型（String型）、初期化有り
    String str2 = "あいうえお";

    // クラス型（Date型）、初期化無し
    Date someday;

    // クラス型（Date型）、初期化有り
    Date now = new Date();

    // アクセス修飾子無し（パッケージが同じならアクセス可）
    double a = 1.0;

    // アクセス修飾子public（どのクラスからでもアクセス可）
    public double b = 2.0;

    // アクセス修飾子private（外部からはアクセス不可）
    private double c = 3.0;

    // アクセス修飾子protected（パッケージが同じならアクセス可）
    protected double d = 4.0;
}

import java.util.Date;

public class FieldExample {

// プリミティブ型、初期化無し

int num1;

// プリミティブ型、初期化有り

int num2 = 100;

// クラス型（String型）、初期化無し

String str1;

// クラス型（String型）、初期化有り

String str2 = "あいうえお";

// クラス型（Date型）、初期化無し

Date someday;

// クラス型（Date型）、初期化有り

Date now = new Date();

// アクセス修飾子無し（パッケージが同じならアクセス可）

double a = 1.0;

// アクセス修飾子public（どのクラスからでもアクセス可）

public double b = 2.0;

// アクセス修飾子private（外部からはアクセス不可）

private double c = 3.0;

// アクセス修飾子protected（パッケージが同じならアクセス可）

protected double d = 4.0;

}

外部からのアクセス（アクセス修飾子の違い）

public class Main {
    public static void main(String[] args) {
        FieldExample f = new FieldExample();

        // MainとFieldExampleが同じパッケージならOK
        f.a = 10.0;

        // OK
        f.b = 20.0;

        // エラーでコンパイルできない
        f.c = 20.0;

        // MainとFieldExampleが同じパッケージならOK
        f.d = 10.0;
    }
}

public class Main {

public static void main(String[] args) {

FieldExample f = new FieldExample();

// MainとFieldExampleが同じパッケージならOK

f.a = 10.0;

// OK

f.b = 20.0;

// エラーでコンパイルできない

f.c = 20.0;

// MainとFieldExampleが同じパッケージならOK

f.d = 10.0;

}

教科書

<br />