Zenn
😸

Java | Eclipse | Spring Boot | ビューとコントローラ | アプリの起動（ブラウザでページ表示）

2024/12/14に公開
Java
MySQL
Spring Boot
MVC
eclipse
tech

Java

Eclipse | Spring Boot

"ビュー(View)"ファイルの作成

  • トップページのビューを作成してみる。
  • "Spring Boot"で"Thymeleaf"を利用する場合、"ビュー(View)"ファイルは"src/main/resources/templates"フォルダ以下に配置する。

  1. [index.htmlファイルの作成]　src/main/resourcesフォルダの左側に表示されている矢印ボタンをクリックして展開したら、その中にあるtemplatesフォルダを右クリックする。右クリックしたら、「新規 > ファイル」を選択する。"新規ファイルの作成"画面で、ファイル名に「index.html」と入力し、完了ボタンをクリックするすると、[src/main/resources/templates]直下に"index.html"ファイルが作成され、画面右側には作成されたファイルの編集画面が表示される。

  2. htmlタグにxmlns属性を設定する。

<html xmlns:th="https://www.thymeleaf.org">

[xmlns:th="https://www.thymeleaf.org"]という属性は、「このファイルではThymeleafを利用します」と宣言するためのもの。この属性を設定することで、Thymeleafが提供するさまざまな機能がそのファイル内で使えるようになる。

「Hello, world!」というテキストを表示する例

+<!DOCTYPE html>
+<html xmlns:th="https://www.thymeleaf.org">
 <!-- htmlタグに設定しているxmlns:th="https://www.thymeleaf.org"という属性は、
     「このファイルではThymeleafを利用します」と宣言するためのもの。
     この属性を設定することで、Thymeleafが提供するさまざまな機能がそのファイル内で使えるようになる。 -->
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">	
+        <title>Sample View Page</title>	
+    </head>
+    <body>
+        <p>Hello, world!</p>
+    </body>
+</html>

"コントローラ(Controller)"ファイルの作成

  • "Spring Boot"での"コントローラ(Controller)"ファイルは、[src/main/java]フォルダ内の[com.example.プロジェクト名]パッケージ以下に作成する。
  • [com.example.プロジェクト名]パッケージ内には、今後コントローラ以外にもさまざまなファイルを作成していくことになる。このまま[com.example.プロジェクト名]パッケージ直下にファイルを作成していくと管理が大変になってしまうので、新しく「controller」というパッケージを作成してわかりやすく整理する。
  • [src/main/java]フォルダの左側に表示されている矢印ボタンをクリックして展開したら、その中にある[com.example.プロジェクト名]パッケージを右クリック。右クリックしたら、「新規 > パッケージ」を選択。"新規Javaパッケージ"画面が表示されるので、名前に「com.example.プロジェクト名.controller」と入力し（「.controller」を付け足す）、完了ボタンをクリックする。すると、[com.example.プロジェクト名]パッケージ直下に、[controller]パッケージが作成される。
  • 続いてコントローラを作成する。先ほど作成した、[controller]パッケージを右クリックし、「新規 > クラス」を選択する。"新規Javaクラス"画面が表示されるので、名前に「クラス名.java」と入力し、完了ボタンをクリックする。
  • "コントローラ(Controller)"のクラスファイル作成でのポイントは以下の3つ。
"コントローラ(Controller)"のクラスファイル作成でのポイント 備考
クラスに@Controllerアノテーションをつける Spring Bootではクラスに@Controllerアノテーションをつけることで、そのクラスがコントローラとして機能するようになる。
メソッドに@GetMappingアノテーションをつける コントローラ内のメソッドに@GetMappingアノテーションをつけることで、HTTPリクエストのGETメソッドをそのメソッドにマッピング（対応づけ）できる。なお、引数にはマッピングするルートパス（ドメイン名を省略したパス）を指定する。HTTPリクエストのGETメソッド＝単純にページを表示する場合など、サーバーから情報を取得するために使う。HTTPリクエストのPOSTメソッド＝フォームの入力内容を送信してデータの作成や更新を行う場合など、サーバー上のデータを変更するために使う。例えば今回のように@GetMapping("/")アノテーションをつけた場合、アプリのトップページに（GETメソッドで）アクセスされたときにそのメソッドが実行されるようになる。なお、HTTPリクエストのPOSTメソッドをマッピングしたい場合は、@GetMappingアノテーションではなく@PostMappingアノテーションをつける。
呼び出すビューの名前をreturnで返す メソッドの最後では、呼び出すビューの名前をreturnで返します。なお、拡張子の.htmlは省略する点に注意する。例えば今回のようにreturn "index";と記述すれば、[src/main/resources/templates]フォルダ内にある[index.html]が呼び出されることになる。

@Controllerアノテーション | Spring Boot | "コントローラ(Controller)"ファイル作成のポイント

  • "アノテーション"とは日本語で「注釈」という意味。
  • "Spring Boot"では、"@"から始まる短いコードのこと。
  • "Spring Boot"ではクラスに"@Controller"アノテーションをつけることで、そのクラスが"コントローラ(Controller)"として機能するようになる。
package com.example.プロジェクト名.controller;

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

/*
   "Spring Boot"ではクラスに"@Controller"アノテーションをつけることで、
   そのクラスが"コントローラ(Controller)"として機能するようになる。
*/
@Controller
public class HomeController {
    @GetMapping("/")
    public String index() {
        return "index";
    }   
}

@GetMappingアノテーション | Spring Boot | "コントローラ(Controller)"ファイル作成のポイント

  • メソッドに"@GetMapping"アノテーションをつける。
  • コントローラ内のメソッドに"@GetMapping"アノテーションをつけることで、HTTPリクエストのGETメソッドをそのメソッドにマッピング（対応づけ）できる。
  • なお、引数にはマッピングするルートパス（ドメイン名を省略したパス）を指定する。
  • HTTPリクエストのGETメソッド＝単純にページを表示する場合など、サーバーから情報を取得するために使う、HTTPリクエストのPOSTメソッド＝フォームの入力内容を送信してデータの作成や更新を行う場合など、サーバー上のデータを変更するために使う。
  • 例えば"@GetMapping("/")"アノテーションをつけた場合、アプリのトップページに（GETメソッドで）アクセスされたときにそのメソッドが実行されるようになる。
package com.example.プロジェクト名.controller;

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

@Controller
public class HomeController {
    /*
       "@GetMapping("/")"アノテーションをつけた場合、
       アプリのトップページに（GETメソッドで）アクセスされたときに
       そのメソッドが実行されるようになる。
    */
    @GetMapping("/")
    public String index() {
        return "index";
    }   
}

なお、HTTPリクエストのPOSTメソッドをマッピングしたい場合は、"@GetMapping"アノテーションではなく"@PostMapping"アノテーションをつける。

※ HTTP通信について
HTTPとは"HyperText Transfer Protocol（ハイパーテキスト・トランスファー・プロトコル）"の略で、インターネットを利用してWebページやデータを送受信するためのプロトコル（通信規約） のこと。例えばブラウザでYouTubeの気になる動画をクリックしてその動画を表示したり、Twitterで気に入ったツイートにいいねして、それが反映されたりする際にもこのHTTP通信が行われている。HTTP通信では、クライアント（ブラウザ）とサーバー（WebサイトやWebアプリをホストするコンピュータ）の間で情報がやり取りされる。クライアントがサーバーに送信するリクエストには、HTTPメソッド（GET、POST、PUT、PATCH、DELETEなど）のほか、URLやHTTPヘッダーなど、さまざまな情報が含まれている（HTTPヘッダー＝ブラウザの種類やバージョン、Cookie（クッキー）、言語設定などのさまざまな追加情報のこと）。なお、HTTPメソッドは「クライアントがサーバーにおこなってほしい操作」を伝える目的で使われる。

呼出すビュー(View)の名前を"return"で返す | Spring Boot | "コントローラ(Controller)"ファイル作成のポイント

  • メソッドの最後では、呼び出すビューの名前を"return"で返す。
  • なお、 拡張子の.htmlは省略する点に注意する。
  • 例えばreturn "index";と記述すれば、[src/main/resources/templates]フォルダ内にある[index.html]が呼び出されることになる。
package com.example.プロジェクト名.controller;

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

@Controller
public class HomeController {

    @GetMapping("/")
    public String index() {
        /*
           return "index";と記述すれば、
           [src/main/resources/templates]フォルダ内にある
           [index.html]が呼び出されることになる。
        */
        return "index";
        /* ここで、return "index.html"というように拡張子を記載しないように注意！ */
    }   
}

データベースの作成と接続設定 | Spring Boot

概要
[src/main/resources]フォルダ直下にある、"application.properties"ファイルにデータベースの接続設定を記述する。
[src/main/resources]フォルダ直下に、"schema.sql"という名前のファイルを作成してSQL文を書くことで、アプリの起動時にそのSQL文を実行してくれる。
"Bootダッシュボード"でアプリを起動する。
  • "Spring Data JPA"や"MySQL Driver"を依存関係に追加していると、たとえ現時点ではデータベースを使わなくても、アプリとデータベースの接続設定をしておかなければアプリの起動時にエラーが発生してしまう。
  • "Spring Boot"では、[src/main/resources]フォルダ直下にschema.sqlという名前のファイルを作成してSQL文を書くことで、アプリの起動時にそのSQL文を実行してくれる。
  1. データベースを作成する。"Spring Boot"では、[src/main/resources]フォルダ直下にschema.sqlという名前のファイルを作成してSQL文を書くことで、アプリの起動時にそのSQL文を実行してくれる。
/* このファイル内のSQL文はアプリが起動する度に実行されるため、
   CREATE TABLE文にIF NOT EXISTSを追加して
   「もしhousesという名前のテーブルが存在しなければ」という条件をつけている。 */
CREATE TABLE IF NOT EXISTS houses (
    id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(50) NOT NULL,  
    image_name VARCHAR(255),
    description VARCHAR(255) NOT NULL,
    price INT NOT NULL,
    capacity INT NOT NULL,
    postal_code VARCHAR(50) NOT NULL,
    address VARCHAR(255) NOT NULL,
    phone_number VARCHAR(50) NOT NULL,
    created_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP,
    updated_at DATETIME NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
);
  1. データベースを作成したらEclipseに戻り、[src/main/resources]フォルダ直下にあるapplication.propertiesというファイルを開く。
    application.propertiesは、アプリが利用するデータベースやメールサーバーなどを設定したり、環境変数を定義したりするためのファイル。
spring.application.name=プロジェクト名
spring.datasource.url=jdbc:mysql://${MYSQL_HOST:localhost}:データーベース接続ポート番号/データーベース名
spring.datasource.username=データーベースユーザー名
spring.datasource.password=データーベースパスワード
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.sql.init.encoding=utf-8
spring.sql.init.mode=always
  1. "application.propertie"ファイルにデーターベース接続情報を追記して保存したら、"Bootダッシュボード"で"Local"内にある"プロジェクト名"を右クリックして"（再）起動"を選択してアプリを起動する。コンソールタブにいろいろ表示されるが、特にエラーが発生していなければ起動は成功。
  .   ____          _            __ _ _
 /\\ / ___'_ __ _ _(_)_ __  __ _ \ \ \ \
( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \
 \\/  ___)| |_)| | | | | || (_| |  ) ) ) )
  '  |____| .__|_| |_|_| |_\__, | / / / /
 =========|_|==============|___/=/_/_/_/
  1. アプリを起動したあと、http://localhost:8080/にアクセスすることで動作を確認できる。
  2. テーブルが作成されてるか確認する。
  3. "Bootダッシュボード"で"Local"内にある"プロジェクト名"を右クリックして"停止"を選択してアプリを起動する。

"モデル(Model)"の作成

"モデル(Model)"を構成する"エンティティ"と"リポジトリ"を作成する。

  • "モデル（Model）"はアプリの「処理」を担当する。
  • 具体的には、データベースとやりとりしてデータの作成、読み取り、更新、削除といった処理を行うのが主な役割。
  • データベース（厳密にいえばデータベースのテーブル）とやりとりするのがモデルの主な仕事なので、モデルはテーブルごとに作成する。
  • Spring Bootでは"モデル(Model)"をさらに役割分担し、以下のようにファイルを分けることが多い。
役割 説明 ファイル名の例
エンティティ（Entity） テーブルの1行をオブジェクトとして表現するためのクラス。エンティティにはテーブルのカラムに対応するフィールドと、それらのフィールドにアクセスするためのゲッター、セッターを定義する。 House.java
サービス（Service） ビジネスロジック（「宿泊人数が定員を超える場合は予約できないようにする」など、そのアプリ固有の処理やルールを実装する部分のこと）を担当する。 HouseService.java
リポジトリ（Repository） データベースにアクセスし、CRUD処理を行う。データはエンティティとしてやり取りする。 HouseRepository.java

エンティティの作成| Spring Boot | "モデル(Model)"の作成

  • エンティティとはテーブルの1行をオブジェクトとして表現するためのクラス。
  • まずはエンティティをまとめて管理するためのentityパッケージを作成する。

  1. entityパッケージおよびHouse.javaファイルの作成

    • [src/main/java]フォルダ内にある"com.example.プロジェクト名"パッケージを右クリック。
    • 右クリックしたら、「新規 > パッケージ」を選択。
    • パッケージの作成画面が表示されたら、名前に「com.example.プロジェクト名.entity」と入力し（「.entity」を付け足す）、完了ボタンをクリック。
    • 続いて、先ほど作成した"entity"パッケージを右クリックし、「新規 > クラス」を選択する。
    • クラスの作成画面が表示されたら、名前に「House.java」と入力し、完了ボタンをクリックする。

  2. House.javaのコーディング。ポイントは以下の5つ。

５つのエンティティ・コーディング・ポイント 備考
クラスに@Entityアノテーションをつける そのクラスがエンティティとして機能するようになる。テーブルの1行に対応するオブジェクトを「エンティティ（Entity）」と呼ぶ。テーブル内の1行1行を1つのオブジェクトとして管理するクラスには、@Entityアノテーションを付ける。
クラスに@Tableアノテーションをつけ、対応づけるテーブル名を指定する そのエンティティにマッピング（対応づけ）されるテーブル名を指定できる。例えば@Table(name = "houses")と指定すれば、housesテーブルがそのエンティティにマッピングされる。 Javaのようにイコール2つ（==）ではない点、SQLのようにシングルクォーテーション（'）で囲まない点に注意する
クラスに@Dataアノテーションをつけ、ゲッターやセッターなどを自動生成する プロジェクトを作成した際にLombokという依存関係を追加したが、@DataはそのLombokが提供するアノテーションです。クラスに@Dataアノテーションをつけることで、ゲッターやセッターなどを自動生成できる。
各フィールドに@Columnアノテーションをつけ、対応づけるカラム名を指定する そのフィールドにマッピングされるカラム名を指定できる。例えば@Column(name = "image_name")と指定すれば、image_nameカラムがそのフィールドにマッピングされる。なお、カラム名の命名規則はスネークケースが一般的だが、エンティティのフィールド名はローワーキャメルケースで定義するのが一般的。例えばimage_nameカラムであれば、フィールド名はimageNameにする。
"主キー(Primary Key)"には@Idおよび@GeneratedValueアノテーションをつける そのフィールドを"主キー(Primary Key)"に指定できる。また、@GeneratedValueアノテーションをつけてstrategy = GenerationType.IDENTITYを指定することで、テーブル内のAUTO_INCREMENTを指定したカラム（idカラム）を利用して値を生成するようになる。つまり、データの作成時や更新時にidの値を自分で指定しなくても、自動採番されるようになる。
名称 内容
スネークケース 各単語をアンダースコア（_）で区切り、すべての文字を小文字にする（例：image_name）
ローワーキャメルケース 各単語の先頭を大文字にしてつなげる。ただし、最初の単語の先頭は小文字にする（例：imageName）

@Columnアノテーションのinsertable属性とupdatable属性について

  • created_atおよび@updated_atカラムには、@Columnアノテーションでname属性だけでなくinsertable属性とupdatable属性も指定している理由の解説。
  • insertable属性には「そのカラムに値を挿入できるかどうか」、updatable属性には「そのカラムの値を更新できるかどうか」を指定する。両者ともデフォルト値はtrue。
    • これらの属性がtrueのままだと、カラムに挿入したり更新したりする値はアプリ側で管理するため、created_atおよびupdated_atカラムの値を自分で指定しなければならない。
  • 一方で、これらの属性をfalseに設定することで、アプリ側からはカラムに値を挿入したり更新したりできなくなる。逆にいえば、カラムに挿入または更新する値の管理をデータベース側に任せられるということ。
  • 今回、housesテーブルの作成時には、created_atおよびupdated_atカラムのデフォルト値を以下のように設定していた。
Column 内容
created_atカラム DEFAULT CURRENT_TIMESTAMP
updated_atカラム DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
  • insertable属性とupdatable属性をfalseにすることで、データベース側に設定したこれらのデフォルト値（CURRENT_TIMESTAMP）が自動的に挿入されるようになる。
  1. repositoryパッケージおよびHouseRepository.javaファイルの作成
    • リポジトリはデータベースにアクセスし、CRUD処理を行うインターフェース。
    • インターフェース＝メソッドの名前、引数の型、戻り値の型のみを定義したもの（メソッドの具体的な処理内容は記述しない）。複数のクラスに共通の機能を持たせたいときに使う。
    • リポジトリを利用することで、エンティティ（テーブル）に対する処理を自分で書かずに済む。
      1. リポジトリをまとめて管理するためのrepositoryパッケージを作成する。
      2. [src/main/java]フォルダ内にある"com.example.プロジェクト名"パッケージを右クリック。
      3. 右クリックしたら、「新規 > パッケージ」を選択。
      4. パッケージの作成画面が表示されたら、名前に「com.example.プロジェクト名.repository」と入力し（「.repository」を付け足すだけ）、完了ボタンをクリック。
      5. 続いて、先ほど作成したrepositoryパッケージを右クリックし、「新規 > インターフェース」を選択。
      6. インターフェースの作成画面が表示されたら、名前に「HouseRepository.java」と入力し、完了ボタンをクリック。

Discussion