Teaching Programming - パート 5

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 />

Spring Bootによるウェブアプリ開発: プロジェクトの作成からページの表示まで

プロジェクトの雛形を作成

ブラウザで「http://start.spring.io」にアクセスする。
「Cradle Project」を選択する。
グループIDとして、パッケージ名を入力する。ここでは「ユーザ名.webapp」とする。
アーティファクトIDとしてプロジェクト名を入力する。ここでは「webapp」とする。
利用する依存ライブラリを入力する。名前の一部を入力すると選択肢が現れるのでクリックして選択する。ここでは「Web」と「Thymeleaf」を選択する。
選択されたものが表示されているので「Web」と「Thymeleaf」が選択されていることを確認する。
クリックするとプロジェクトのファイル（ZIPファイル）のダウンロードが始まる。

start.spring.ioでプロジェクト作成

NetBeansでインポート

メニューから[ファイル]→[プロジェクトをインポート]→[ZIPから]を選択し、ダウンロードしたファイル（webapp.zip）を指定してインポートする。

インポート直後の構成

Spring Bootアプリケーションの実行

アプリケーションを実行するためのタスクが定義されているため、それを使う。

プロジェクトを右クリックして、[Task]→[boot]→[bootRun]を選択する。

アプリケーションが立ち上がると、出力ウィンドウの最後に「Started WebappApplication」と表示される。

その1行前に「Tomcat started on port(s): 8080 (http)」と出力されているということは、8080番ポートにアクセスすれば何らかの反応があるはずである。http://localhost:8080/にアクセスしてみよう。

サーバが出力したエラーページ

エラーメッセージが表示されたが、これは、まだコンテンツを返すプログラムを作っていないために表示されるもので、正常な動作である。アプリケーションを終了するには、出力ウィンドウの左側にあるStopボタンをクリックする。

Spring Web MVC frameworkの基礎中の基礎

処理の流れ

これから作るウェブアプリケーションはSpringのWeb MVCフレームワークを利用している。このフレームワークにおける処理の流れを次の図に示す（http://docs.spring.io/spring/docs/current/spring-framework-reference/htmlsingle/#mvc-servletより引用）。

Mvc

フロントコントローラがリクエストを適切なコントローラに渡し、コントローラが出力するデータをビュー（テンプレート）が表示するという仕組み。このうち、自分で作るのは、「コントローラ」と「ビューテンプレート」である。

まずは、単純に「こんにちは」と表示するようにコントローラとテンプレートを作ってみよう。

テンプレートを作る

テンプレートとは雛形のことであり、そこに流し込まれるデータとともに使うことが一般的な使い方であるが、まずはデータの流し込みを想定しないテンプレートを作成してみよう。

まず、テンプレートを格納するディレクトリを作成しよう。Resourcesのtemplatesにlecture03というディレクトリ（パッケージ）を作る。NetBeansのパッケージの表示の仕方によっては、作業が難しい。プロジェクトウィンドウの背景部分を右クリックし、「Javaパッケージの表示方法」を「ツリー」にすると階層構造がわかりやすい。

パッケージをツリーで表示

lecture03を右クリックして新規から「HTMLファイル」を選択する。ファイル名を「hello」と入力する。拡張子は自動でつくので入力しない。作成したら、次のように書き換えよう。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>こんにちは</title>
</head>
<body>
<p>こんにちは</p>
</body>
</html>

<!DOCTYPE html>

<head>

<title>こんにちは</title>

</head>

<body>

<p>こんにちは</p>

</body>

</html>

今の所、次の2点が注意する点で、これ以外は普通のHTMLファイルである。

2行目: xmlns属性はXML名前空間の宣言である。テンプレートエンジンであるThymeleafはHTMLへの埋め込みをXMLによって行うことが大きな特徴である。名前宣言によってThymeleafによる操作をthというプレフィックスで行うことができる。
4行目: 単独で使われるタグ（brやhr等）は後ろに/をつける（XMLのルール）。

コントローラを作る

コントローラは、リクエストに対してどのテンプレートを使うか（そしてテンプレートにどのような値を埋め込むか）ということを決定するためのものである。

具体的には@Controllerアノテーションをつけたクラスで、リクエストに対応してメソッドを定義する。メソッドの返り値としてテンプレートを指定する。

package net.teachingprogramming.webapp;

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

import java.time.LocalTime;

/**
 * 第3回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture03")
public class Lecture03Controller {

    @RequestMapping("/hello")
    public String hello() {
        return "lecture03/hello"; // テンプレートのファイル名を返す
    }

    @RequestMapping("/dice")
    public String dice(ModelMap modelMap) {
        int pips = (int)Math.floor(Math.random()*6) + 1;
        modelMap.addAttribute("pips", pips);
        return "lecture03/dice";
    }

    @RequestMapping("/greeting")
    public String greeting(ModelMap modelMap) {
        LocalTime localTime = LocalTime.now();
        int hour = localTime.getHour();
        String message;
        if (4 <= hour && hour < 11) {
            message = "おはよう";
        } else if (11 <= hour && hour < 16){
            message = "こんにちは";
        } else {
            message = "こんばんは";
        }
        modelMap.addAttribute("message", message);
        return "lecture03/greeting";
    }

}

package net.teachingprogramming.webapp;

import org.springframework.stereotype.Controller;

import org.springframework.ui.ModelMap;

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

import java.time.LocalTime;

/**

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

@Controller

@RequestMapping("/lecture03")

public class Lecture03Controller {

@RequestMapping("/hello")

public String hello() {

return "lecture03/hello"; // テンプレートのファイル名を返す

}

@RequestMapping("/dice")

public String dice(ModelMap modelMap) {

int pips = (int)Math.floor(Math.random()*6) + 1;

modelMap.addAttribute("pips", pips);

return "lecture03/dice";

}

@RequestMapping("/greeting")

public String greeting(ModelMap modelMap) {

LocalTime localTime = LocalTime.now();

int hour = localTime.getHour();

String message;

if (4 <= hour && hour < 11) {

message = "おはよう";

} else if (11 <= hour && hour < 16){

message = "こんにちは";

} else {

message = "こんばんは";

}

modelMap.addAttribute("message", message);

return "lecture03/greeting";

}

12行目: コントローラを表すアノテーション
13行目: このコントローラが、「/lecture03」のURLを担当することを表す。
16〜19行目: /hello（つまりhttp://localhost:8080/lecture03/hello）に対応するメソッド
- 16行目: /helloに対応すること表す
- 17行目: 戻り値の型はStringにする。メソッド名はなんでも良い。
- 18行目: テンプレートのルート（resources/templates）から利用するテンプレートの相対パス（拡張子は除く）

20行目以降は次節以降で解説する。

動作を確認

http://localhost:8080/lecture03/helloにブラウザでアクセスしよう。

テンプレートに値を渡す

メソッドにModelMap型の引数を加える。
そのaddAttributeメソッドで名前と値を登録する。
テンプレートでth:text属性を使う。

例1: サイコロ

アクセスするたびに表示される数が変化する。乱数については教科書P.108を参照。

package net.teachingprogramming.webapp;

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

import java.time.LocalTime;

/**
 * 第3回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture03")
public class Lecture03Controller {

    @RequestMapping("/hello")
    public String hello() {
        return "lecture03/hello"; // テンプレートのファイル名を返す
    }

    @RequestMapping("/dice")
    public String dice(ModelMap modelMap) {
        int pips = (int)Math.floor(Math.random()*6) + 1;
        modelMap.addAttribute("pips", pips);
        return "lecture03/dice";
    }

    @RequestMapping("/greeting")
    public String greeting(ModelMap modelMap) {
        LocalTime localTime = LocalTime.now();
        int hour = localTime.getHour();
        String message;
        if (4 <= hour && hour < 11) {
            message = "おはよう";
        } else if (11 <= hour && hour < 16){
            message = "こんにちは";
        } else {
            message = "こんばんは";
        }
        modelMap.addAttribute("message", message);
        return "lecture03/greeting";
    }

}

@RequestMapping("/dice")

public String dice(ModelMap modelMap) {

int pips = (int)Math.floor(Math.random()*6) + 1;

modelMap.addAttribute("pips", pips);

return "lecture03/dice";

}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>ダイス</title>
</head>
<body>
<p>
    <span th:text="${pips}">サイコロの目</span>
</p>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p>

<span th:text="${pips}">サイコロの目</span>

</p>

</body>

</html>

例2: 挨拶

現在時刻によって表示されれる挨拶が変化する。時刻の扱いについては、教科書P.257を参照。

package net.teachingprogramming.webapp;

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

import java.time.LocalTime;

/**
 * 第3回で使うコントローラ
 */
@Controller
@RequestMapping("/lecture03")
public class Lecture03Controller {

    @RequestMapping("/hello")
    public String hello() {
        return "lecture03/hello"; // テンプレートのファイル名を返す
    }

    @RequestMapping("/dice")
    public String dice(ModelMap modelMap) {
        int pips = (int)Math.floor(Math.random()*6) + 1;
        modelMap.addAttribute("pips", pips);
        return "lecture03/dice";
    }

    @RequestMapping("/greeting")
    public String greeting(ModelMap modelMap) {
        LocalTime localTime = LocalTime.now();
        int hour = localTime.getHour();
        String message;
        if (4 <= hour && hour < 11) {
            message = "おはよう";
        } else if (11 <= hour && hour < 16){
            message = "こんにちは";
        } else {
            message = "こんばんは";
        }
        modelMap.addAttribute("message", message);
        return "lecture03/greeting";
    }

}

@RequestMapping("/greeting")

public String greeting(ModelMap modelMap) {

LocalTime localTime = LocalTime.now();

int hour = localTime.getHour();

String message;

if (4 <= hour && hour < 11) {

message = "おはよう";

} else if (11 <= hour && hour < 16){

message = "こんにちは";

} else {

message = "こんばんは";

}

modelMap.addAttribute("message", message);

return "lecture03/greeting";

}

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <title>挨拶</title>
</head>
<body>
<p>
    <span th:text="${message}">ここがmessageで置き換わる</span>
</p>
</body>
</html>

<!DOCTYPE html>

<head>

</head>

<body>

<p>

<span th:text="${message}">ここがmessageで置き換わる</span>

</p>

</body>

</html>

インスタンス化

クラスは「型の設計図」のこと。
クラス（設計図）からインスタンス（実体）を作ることができる。
インスタンス化: インスタンスを作ること。
インスタンス化はnew演算子を使う。
コンストラクタはインスタンス化の時に使われるメソッド（今後解説する）で、その時に使われる引数を記述する。下の例は引数なし。

インスタンス化

1行でまとめて書くこともできる。

Person person2 = new Person();

1	Person person2 = new Person();

エラーになる例

person3がインスタンス化されていない（注: 厳密には「初期化されていない」）ためコンパイルエラー（コンパイル時にエラーになってコンパイルできない）になる。

Person person3;
System.out.println(person3.age);

1 2	Person person3; System.out.println(person3.age);

コンパイルできる（person4はnullで初期化されている）が、実行時にエラーになる（ランタイムエラー）。person4がインスタンス化されてない（実態がない）のに使おうとしたため。

Person person4 = null;
System.out.println(person4.age);

1 2	Person person4 = null; System.out.println(person4.age);

基本型（プリミティブ型）は？

インスタンス化が必要なのは参照型（クラス型）
newは使わない。
初期化は必要

次はOK。

int a;
a = 1;
System.out.println(a);

int a;

a = 1;

System.out.println(a);

1行で書くのもOK。

int b = 2;
System.out.println(b);

1 2	int b = 2; System.out.println(b);

初期化がないのはNG（コンパイルエラー）。

int c;
System.out.println(c);

1 2	int c; System.out.println(c);

基本型でnullは扱えないのでNG（コンパイルエラー）。

int d = null;
System.out.println(d);

1 2	int d = null; System.out.println(d);

ビルドとは

ソフトウェアのビルド（英: build）は、ソースコードファイルを独立したソフトウェア生成物に変換するコンピュータ上で実行されるプロセス、またはその結果を指す。ビルドにおいて最も重要なのはコンパイルプロセスであり、ソースコードファイルを実行ファイルに変換する。

ビルド (ソフトウェア) – Wikipedia

要するに「コードを書いた後に実行できるようするまでにする作業」のこと。これまでは、NetBeansで行ってきた（「ファイルの実行」をクリックすることで、コンパイルが行われ実行された）。

Javaを用いた開発に使われるビルドツール

Ant
Maven
Gradle
etc…

Android用の開発環境であるAndroid StudioではGradleが採用されている。

NetBeansでGradleを使う

プラグイン

Gradle Supportプラグインをインストールすることで、Gradleベースのプロジェクトを作成・管理することができる。

プラグインを確認

インストール済みにあることを確認する。

プロジェクトの作成

Single Gradle Projectを選択。

プロジェクトを選択

プロジェクト名とメインクラス（メインメソッドを作るクラス）を指定する。メインクラスは完全修飾クラス名（パッケージ名を頭につける）で指定する。

プロジェクト名とメインクラス

プロジェクトには、メインクラス（Main.java）とビルドスクリプト（build.gradleとsettings.gradle）が作成される。

プロジェクトの構造

実行する

Main.javaに書き加える。

System.out.println("はじめてのGradle");

1	System.out.println("はじめてのGradle");

プロジェクトを右クリックして、Runをクリック。

runタスクの実行

出力ウィンドウに出力される。

出力ウィンドウ

外部のライブラリを使う

これまで、JDKに含まれるライブラリ（クラス）を使ってきたが、世の中には様々なライブラリが公開されている。ライブラリをプロジェクトに取り込んで使ってみよう。

GradleはMavenのリポジトリ（ライブラリが保管されているサーバ）からライブラリをダウンロードする機能があるので、Mavenのリポジトリから利用するライブラリを探すのが簡単だ。

今回は、HTMLパーサ（HTMLを解釈してあれこれするためのソフト）のJsoupを使ってみよう。MavenのリポジトリのJsoup 1.10.2のページにある、Gradle用の記述をコピーし、build.gradleのdependenciesにペーストする。

Mavenレポジトリからコピー

apply plugin: 'java'

sourceCompatibility = '1.8'
[compileJava, compileTestJava]*.options*.encoding = 'UTF-8'

if (!hasProperty('mainClass')) {
    ext.mainClass = 'd00000.sandbox.Main'
}

repositories {
    mavenCentral()
}

dependencies {
    testCompile group: 'junit', name: 'junit', version: '4.10'

    // https://mvnrepository.com/artifact/org.jsoup/jsoup
    compile group: 'org.jsoup', name: 'jsoup', version: '1.10.2'

}

apply plugin: 'java'

sourceCompatibility = '1.8'

[compileJava, compileTestJava]*.options*.encoding = 'UTF-8'

if (!hasProperty('mainClass')) {

ext.mainClass = 'd00000.sandbox.Main'

}

repositories {

mavenCentral()

}

dependencies {

testCompile group: 'junit', name: 'junit', version: '4.10'

// https://mvnrepository.com/artifact/org.jsoup/jsoup

compile group: 'org.jsoup', name: 'jsoup', version: '1.10.2'

}

プロジェクトを右クリックして、Reload Projectをクリックすると、依存ライブラリがダウンロードされ、プロジェクトに追加される。

Dependenciesに追加される

Jsoupの利用例

ニュースのサイトからニュースのタイトル一覧を取得しよう。

注意: ブラウザで人間が操作するのではなく、機械的にページを取得する行為は一般に「ウェブスクレイピング（Web scraping）」というが、スクレイピングが想定されていない場合が多い（あるいは明示的に禁止されている）。ウェブから情報を取得するときには、まず専用のAPIがあるかどうか確認しよう。またスクレイピングによって情報を取得する場合も、その頻度を調整するなど、迷惑をかけないようにしよう（提供する側の立場としては、そもそもスクレイピングして欲しくない場合が多い）。

package d00000.sandbox;

import java.io.IOException;
import java.io.UnsupportedEncodingException;
import java.net.URLEncoder;
import org.jsoup.Connection;
import org.jsoup.Jsoup;
import org.jsoup.nodes.Document;
import org.jsoup.nodes.Element;
import org.jsoup.select.Elements;

public class Main {
    /**
     * @param args the command line arguments
     */
    public static void main(String[] args) {
        // 検索する文字列
        String searchWord = "静岡";

        // ニュースのURL
        String url = null;
        try {
            url = "ニュースサイトのURL/?p="+ URLEncoder.encode(searchWord, "UTF-8") +"オプション等";
        } catch (UnsupportedEncodingException ex) {
            System.err.println("encodingが不正です。");
            System.exit(1);
        }

        // 取得したページ
        Document document = null;
        try {
            Connection connection = Jsoup.connect(url);
            document = connection.get();
            // 上の2行を1行で書くと
            // document = Jsoup.connect(url).get();
        } catch (IOException ex) {
            System.err.println("ページ取得に失敗しました。");
            System.exit(1);
        }

        // 結果の出力
        Elements titleElements = document.select("h2"); // CSSのセレクタで要素（複数）を取得
        for (Element element : titleElements) { // タイトルの要素を1つ取り出す。　
            System.out.println(element.text()); // 要素のテキストノードを画面に表示する。
        }
    }
}

package d00000.sandbox;

import java.io.IOException;

import java.io.UnsupportedEncodingException;

import java.net.URLEncoder;

import org.jsoup.Connection;

import org.jsoup.Jsoup;

import org.jsoup.nodes.Document;

import org.jsoup.nodes.Element;

import org.jsoup.select.Elements;

public class Main {

/**

* @param args the command line arguments

public static void main(String[] args) {

// 検索する文字列

String searchWord = "静岡";

// ニュースのURL

String url = null;

try {

url = "ニュースサイトのURL/?p="+ URLEncoder.encode(searchWord, "UTF-8") +"オプション等";

} catch (UnsupportedEncodingException ex) {

System.err.println("encodingが不正です。");

System.exit(1);

}

// 取得したページ

Document document = null;

try {

Connection connection = Jsoup.connect(url);

document = connection.get();

// 上の2行を1行で書くと

// document = Jsoup.connect(url).get();

} catch (IOException ex) {

System.err.println("ページ取得に失敗しました。");

System.exit(1);

}

// 結果の出力

Elements titleElements = document.select("h2"); // CSSのセレクタで要素（複数）を取得

for (Element element : titleElements) { // タイトルの要素を1つ取り出す。　

System.out.println(element.text()); // 要素のテキストノードを画面に表示する。

}

例外処理

教科書[P.65]を参照。

ポイント:

例外（exception、エラーのこと）が発生したらcatch節に飛ぶ。
例外の種類
- チェック例外: 必ずtryでチェックしなければならない。
- 非チェック例外: チェックしなくて良い。例えば、0で除算など。

再評価のための復習: クラスの概要

クラスとは

クラスとは型の設計図のこと。注: ここではわかりやすさのため設計図に例えるが、設計図の比喩が適切でない場合もあるので注意すること。「適切でない場合」については今後解説する。
クラスから作られるものをインスタンス（実体）という。
基本的に、1クラス1ファイルで定義する。ファイル名は「クラス名.java」とする。
クラスにはメンバーによって構成される（クラスの中にかけるのはメンバーだけ）。
メンバーの種類にはフィールドとメソッドがある（フィールドとメソッド以外のものはない）。
[慣例] クラス名は大文字ではじめる。
[慣例] フィールド名とメソッド名は小文字ではじめる。

クラスの構造