Angular7 + Bootstrap4でWebアプリを作ろう - 今夜はSpring Bootだけ 環境作りからモックのREST APIを1本作るまで。

こんにちはふるてつです。
Angular でサービスを作るようになり、そろそろサーバが欲しくなってきました。
そこで今日は Spring Boot 環境を作りAPIを1本作るまでを行いたいと思います。
なぜ Spring かというとそれしかできないからですね。選択の余地ありません…

環境の準備（Eclipseのダウンロード）

まずは環境を整えます。何度やっても、わたしはやり方をすぐ忘れちゃいますね。

①Eclipseのダウンロード

まずは基本的なところで Eclipse のダウンロードから始めます。
オールインワンを使いたく。下記のURLですね。
http://mergedoc.osdn.jp/

今回は「4.8 Photon」を使います。クリックします。

ダウンロードする Eclipse ですが、わたしは迷わず「Java」の「Full Edition」を選びます。
エディションについて「Standard Edition」を選び必要なプラグインを入れるやり方もありますが、 大雑把な私には向いてませんので。
上記の画面でダウンロードしたZIPファイルを展開すると Eclipse が出てきます。
（ZIPから解凍するときに回答先のフォルダ名が長かったり階層が深すぎると展開時にエラーメッセージが出るので注意しましょう）

あと日本語化もしておきましょう。職場では Eclipse は英語版と決まっているのですが、個人的には日本語が落ち着きます。
同じサイトからダウンロードしてきた下記のツールを起動します。
「日本語化するアプリケーション」欄に 日本語化したいEclipse の exe ファイルを選択して実行するのみです。

②Spring Boot プラグインと DBeaver プラグインの追加

次はSpring Boot プラグインを Eclipse に追加します。
「メニュー」→「ウィンドウ」→「マーケットプレイス」から「sts」を検索するとプラグインが出てきます。
下のような画面になります。
そもそも Spring Tool Suite (STS) を使う方法もありますが、オールインワンに Spring Boot プラグインを入れる方が Eclipse のバージョンを選べ、こちらのほうがわたしは良いとか思っています。

あと開発時は H2 DB を使いたいので、DBeaver プラグインをいれておきます。これはH2 DB の中身を見るためのツールです。
H2 を使わなければ不要です（本番は PostgreSQL の RDS にする予定ですが）

③Lombokのインストール

Lombok を使用したいのでインストールします（例の getter/setter などを勝手につくってくれるプラグインです）

下記のURLからダウンロードします。 https://projectlombok.org/

このサイトのメニューからダウンロードを選びます。

下の画面にて最新バージョンらしき「1.18.6」をダウンロードします。

中にインストーラーが入っていますので、起動します。
起動してすぐに自分のマシン中の Eclipse を捜しだそうとするようですが、時間がかかり待っていられないので、わたしはいつも手動で Eclipse の場所を指定します。
中段の「Specify location…」ボタンがそれです。Eclipse の exeファイルを選択して「Install / Update」を押します。

終わるとこの画面が出てきます。

ここまでで Eclipse の環境準備は終わりです。

Rest APIの作成

次はプロジェクトを作成し、Restコントローラとモックサービスを作ります。

①プロジェクトの作成

Eclipse のメニューから「新規」→「その他」を選びます。

「Spring スタータープロジェクト」を作成します。

サービスURLはデフォルトのまま、あとは全部自分の好きに設定します。
わたしは、Maven と Gradle 両方の経験がありますが、Gradle の方が便利だと感じそちらを使います。
Javaは 8 のままでしばらくは開発しようとは思います。
どこかのタイミングで 12に変更するかもしれません。

次へをクリックすると下の画面になります。ここで選択したライブラリが Gradle の設定ファイルに登録されます。
まずSpring Bootのバージョンは最新「2.2.0」にして
Web、Lombok、H2、JDBC、MyBatis、Flywayを選択しました。
職場では jOOQ や JPA が使われてますが、 MyBatis にしました。いまだにこれが一番いい気がして…
Spring Securityも含めたいところですが、きちんと時間をとってやりたいので、別途あとから手動で入れようと思います。

作成した後、xxxApplication.java が最初の起動ファイルになります。
（このファイルを右クリックして実行するとサーバが起動します）

②コントローラ / モックサービスの作成

いま私が考えているシステムではログイン画面下に管理者からのお知らせを表示します。
そのお知らせを取得するAPIを作ります。
そこで今回は下記 3ファイルを Eclipse に追加します。

○DTO
entiry/InformationDto.java

○モックサービス
mockService/MockInformationService.java

○コントローラ
controller/InformationRestController.java

Eclipse 画面の左端パッケージエクスプローラーではこのような構成になります。

まずDTOについてですが、
@Data は Lombok 用のアノテーションです。
このアノテーションを書くと getter / setter が自動的に作られます。
@AllArgsConstructor も Lombok 用のアノテーションです。
このアノテーションを書くと その名前の通り、すべての引数を渡すコンストラクタが自動的に作られます。

package com.weekenditlaboratory.entity.dto;
import lombok.AllArgsConstructor;
import lombok.Data;

@Data
@AllArgsConstructor
public class InformationDto {
    private String date;
    private String information;
    private String detail;
}

次にモックサービスです。
@Service は Spring のアノテーションです。
これは Spring でいうところのいわゆるサービス（ビジネスロジック）につけるアノテーションです。
今回はモックを作りたくDBに接続せずに固定値を返すようにします。
List<InformationDto> を返す、#searchAll() メソッドを追加しました。

package com.weekenditlaboratory.mockService;
import java.util.ArrayList;
import java.util.List;
import org.springframework.stereotype.Service;
import com.weekenditlaboratory.entity.dto.InformationDto;

@Service
public class MockInformationService {
    public List<InformationDto> searchAll(){
        InformationDto informationDto1 = new InformationDto("2019/3/1","運用停止のお知らせ","メンテナンスのため月末の0:00～2:00まで運用を停止します。");
        InformationDto informationDto2 = new InformationDto("2018/2/1","運用停止のお知らせ","メンテナンスのため月末の0:00～2:00まで運用を停止します。");
        InformationDto informationDto3 = new InformationDto("2018/1/1","運用開始","運用を開始します。");
        List<InformationDto> res = new ArrayList<InformationDto>();
        res.add(informationDto1);
        res.add(informationDto2);
        res.add(informationDto3);
        return res;
    }
}

最後にコントローラ
@RequiredArgsConstructor は lombok のアノテーションで、クラス中で「static final」宣言したオブジェクトのコンストラクタを自動的に作ります。
この場合、Spring が Lombok で作ったコンストラクタに合わせて mockInformationService を DI してくれます。
そして他は Spring のアノテーションです。

@RestController は Rest 用のアノテーションです。もちろん他の形式のコントローラもあります。例えば Thymeleaf だと @Controller。
@RequestMapping アノテーションは http リクエストの URL を指定します。
@CrossOrigin はクロスドメイン接続を許す設定です。
Angular をng serve で動かした場合クロスドメイン制約にかかり接続できず一時的にクロスドメインを許しました。
※本来はコントローラに書くべきではなく Spring Security の設定ファイルなど１ケ所に書き、さらにローカル環境のみでの設定にすべきですが、今回はまだお試し中なので、アノテーションを直接書き込みました。

@GetMapping は Rest でいうところの http メソッド の GET が呼ばれた場合に動くコントローラのメソッドを指定しています。
つまり http://example/api/informations が GET で呼ばれた場合には InformationRestController の #getInformations() が動きます。
そしてそのメソッド内でモックサービスが呼ばれ InformationDto のリストが Spring の中で Json に変換されてhttp のレスポンスとして返されます。

package com.weekenditlaboratory.controller;
import java.util.List;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import com.weekenditlaboratory.entity.dto.InformationDto;
import com.weekenditlaboratory.mockService.MockInformationService;
import lombok.RequiredArgsConstructor;

@RequiredArgsConstructor
@RestController
@RequestMapping("api/informations")
@CrossOrigin
public class InformationRestController {
    private final MockInformationService mockInformationService;
    @GetMapping
    public List<InformationDto> getInformations(){
        return mockInformationService.searchAll();
    }
}

ここまで来たら Spring を起動して Angular とつないでみます。
下記のログイン画面の下、お知らせが今日のAPIを使っている場所です。
とりいそぎ無事繋がりました。

しばらくは Spring側 はモックサービスのみを作り Angular の製造がある程度落ち着いてから、 DBを使った本物のサービスに変えていきたいと思っています。

今日の感想

今日は Spring の記事を書きました。何度も繰り返した手順ですが、こうやってブログに書くとまた新鮮に思えます。
Angular 以外のところに時間をかけてしまいましたが、次回こそは Angular で http 通信をおこなうところを書きたいと思います。
では、お疲れ様でした。