またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

なお、記載内容が多くなったため、記事を2つに分けてます。

前編は以下をご参照ください。

SpringSecurity6+MyBatisでroleを使った認可（設定編）

SpringSecurity6系は5.3までと比べるとSecurityConfigの書き方が変わってるので勉強を兼ねて独自のログイン画面を用意しroleを使った認可機能をjavaで作成してみました。 またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

gogorelaxlifeblog.com

2025.03.22

開発環境

私が構築した時の開発環境は以下の通りとなります。

ソース構成

ソース構成は以下の通りです。

login-role-project
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── loginroleproject
│   │   │               ├── config
│   │   │               │   ├── SecurityConfig.java
│   │   │               │   └── SecurityProperties.java
│   │   │               ├── controller
│   │   │               │   ├── AdminController.java
│   │   │               │   ├── LoginController.java
│   │   │               │   └── MemberController.java
│   │   │               ├── entity
│   │   │               │   ├── LoginUsers.java
│   │   │               │   └── UserRole.java
│   │   │               ├── repository
│   │   │               │   ├── LoginUsersMapper.java
│   │   │               │   └── UserRoleMapper.java
│   │   │               ├── security
│   │   │               │   ├── CustomAuthenticationSuccessHandler.java
│   │   │               │   ├── LoginUsersDataInitializer.java
│   │   │               │   └── LoginUsersDetailsService.java
│   │   │               └── LoginRoleProjectApplication.java
│   │   └── resources
│   │       ├── com
│   │       │   └── example
│   │       │       └── loginroleproject
│   │       │           └── repository
│   │       │               ├── LoginUsersMapper.xml
│   │       │               └── UserRoleMapper.xml
│   │       ├── static
│   │       │   └── css
│   │       │       └── styles.css
│   │       ├── templates
│   │       │   ├── admin
│   │       │   │   └── home.html
│   │       │   ├── member
│   │       │   │   └── home.html
│   │       │   └── login.html
│   │       ├── application.yml
│   │       └── schema.sql
└── pom.xml

SQLの作成

MyBatisのmapper.xmlを使ってSQLを使用します。

LoginUsersMapper.xmlを作成します。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.loginroleproject.repository.LoginUsersMapper">
    <select id="findUserByUsername" parameterType="string" resultType="LoginUsers">
        SELECT username, password
        FROM login_users
        WHERE username = #{username}
    </select>
    <insert id="insertUser" parameterType="LoginUsers">
        INSERT INTO login_users (username, password, enabled)
        VALUES (#{username}, #{password}, true);
    </insert>
</mapper> 

namespace=”com.example.loginroleproject.repository.LoginUsersMapper”と指定することで後述のLoginUsersMapper.javaに用意されたメソッドとLoginUsersMapper.xmlに用意された各SQLのid名がリンクします。

リンクすることでLoginUsersMapper.javaからLoginUsersMapper.xmlのSQLが実行できるようになります。

resultType=”LoginUsers”はSELECTの結果をcom.example.loginroleproject.entity.LoginUsersクラスに設定するために指定してます。

parameterType=”LoginUsers”と指定することでLoginUsersクラスのusernameやpassword変数に格納した値がINSERT文のVALUES句のusernameやpasswordに設定されるようにしてます。

複数の値をSQLに渡す必要がある時に便利です。

対してparameterType=”string”は文字列型の値をusernameに設定できるようにしてます。

findUserByUsernameはログイン時などに入力したユーザー名が存在するかをチェックするためのSQLです。

insertUserはアプリ起動時にログインアカウントを生成するためのSQLです。


続いてUserRoleMapper.xmlを作成します。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.loginroleproject.repository.UserRoleMapper">
    <select id="findRolesByUsername" parameterType="string" resultType="UserRole">
        SELECT username, role
        FROM user_roles
        WHERE username = #{username}
    </select>
    <insert id="insertUserRole" parameterType="UserRole">
        INSERT INTO user_roles (username, role)
        VALUES (#{username}, #{role});
    </insert>
</mapper> 

namespace=”com.example.loginroleproject.repository.UserRoleMapper”と指定することで後述のUserRoleMapper.javaに用意されたメソッドとUserRoleMapper.xmlに用意された各SQLのid名がリンクします。

findRolesByUsernameはログインしたユーザーのロールを取得するためのSQLです。

insertUserRoleはアプリ起動時にログインアカウントのロールを設定するためのSQLです。

Entityクラスの作成

後述のMapperインターフェースで使用するEntityクラスを作成します。

LoginUsersクラスを作成します。

package com.example.loginroleproject.entity;

import lombok.Getter;
import lombok.Setter;

/**
 * ログインユーザーを表すエンティティクラス
 */
@Getter
@Setter
public class LoginUsers {
    /**
     * ユーザー名（主キー）
     */
    private String username;

    /**
     * パスワード（ハッシュ化済み）
     */
    private String password;
}

UserRoleクラスを作成します。

package com.example.loginroleproject.entity;

import lombok.Getter;
import lombok.Setter;

/**
 * ユーザーロールを表すエンティティクラス
 */
@Getter
@Setter
public class UserRole {
    /**
     * ユーザー名（外部キー）
     */
    private String username;

    /**
     * ロール名
     */
    private String role;
}

Mapperインターフェースの作成

各Mapper.xmlを使うMapperインターフェースを作成します。

LoginUsersMapperクラスを作成します。

package com.example.loginroleproject.repository;

import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.example.loginroleproject.entity.LoginUsers;

/**
 * ログインユーザーのデータアクセスを担当するインターフェース
 */
@Mapper
public interface LoginUsersMapper {
    /**
     * ユーザー名に基づいてユーザー情報を取得します
     *
     * @param username ユーザー名
     * @return ユーザー情報。存在しない場合はnull
     */
    LoginUsers findUserByUsername(@Param("username") String username);

    /**
     * 新しいユーザーを登録します
     *
     * @param loginUsers 登録するユーザー情報
     */
    void insertUser(LoginUsers loginUsers);
}

MapperアノテーションによってMyBatisがLoginUsersMapperをMapperインターフェースとして自動的に検出します。

こうすることでLoginUsersMapper.javaを通じてLoginUsersMapper.xmlのSQLを使うことができます。


続いてUserRoleMapperクラスを作成し、UserRoleMapper.javaを通じてUserRoleMapper.xmlのSQLを使用します。

package com.example.loginroleproject.repository;

import java.util.List;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Param;
import com.example.loginroleproject.entity.UserRole;

/**
 * ユーザーロールのデータアクセスを担当するインターフェース
 */
@Mapper
public interface UserRoleMapper {
    /**
     * 指定されたユーザー名に紐づくロール一覧を取得します
     *
     * @param username ユーザー名
     * @return ロール一覧
     */
    List<UserRole> findRolesByUsername(@Param("username") String username);

    /**
     * ユーザーにロールを割り当てます
     *
     * @param userRole ユーザーロール情報
     */
    void insertUserRole(UserRole userRole);
}

ログインアカウントを生成するクラスの作成

今回はdata.sqlを使ってログインアカウントを生成しません。

H2のDBにデータを生成するのはdata.sqlを使うのが一般的だと思います。

しかし、data.sqlを使ってデータを生成しても、BCryptPasswordEncoderを使っているためにハッシュが一致せずに正しいパスワードを入力してもエラーとなってしまいます。

そのためアプリ起動時にデータをインサートする処理を実行するためにLoginUsersDataInitializerクラスを作成します。

package com.example.loginroleproject.security;

import java.util.List;
import org.springframework.boot.ApplicationRunner;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;
import com.example.loginroleproject.config.SecurityProperties;
import com.example.loginroleproject.config.SecurityProperties.UsersConfig;
import com.example.loginroleproject.entity.LoginUsers;
import com.example.loginroleproject.entity.UserRole;
import com.example.loginroleproject.repository.LoginUsersMapper;
import com.example.loginroleproject.repository.UserRoleMapper;
import lombok.RequiredArgsConstructor;

/**
 * アプリケーション起動時にユーザーデータを初期化する設定クラス。 application.ymlに定義されたユーザー情報をデータベースに登録します。
 */
@RequiredArgsConstructor
@Component
@Configuration
public class LoginUsersDataInitializer {

    private final LoginUsersMapper loginUsersMapper;
    private final UserRoleMapper userRoleMapper;
    private final PasswordEncoder passwordEncoder;
    private final SecurityProperties securityProperties;

    /**
     * アプリケーション起動時に実行されるBean。 設定されたユーザー情報をデータベースに登録します。
     *
     * @return ApplicationRunner ユーザー初期化を実行するBean
     */
    @Bean
    @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)
    public ApplicationRunner initializeUsers() {
        return args -> {
            List<UsersConfig> users = securityProperties.getUsers();

            if (users == null || users.isEmpty()) {
                return;
            }

            users.forEach(this::initializeUser);
        };
    }

    /**
     * 個別のユーザーを初期化します。
     *
     * @param userConfig ユーザー設定情報
     */
    private void initializeUser(UsersConfig userConfig) {
        String username = userConfig.getUsername();

        if (isUserExists(username)) {
            return;
        }

        createUserWithRoles(username, userConfig.getPassword(), userConfig.getRole());
    }

    /**
     * ユーザーが既に存在するか確認します。
     *
     * @param username 確認するユーザー名
     * @return ユーザーが存在する場合はtrue
     */
    private boolean isUserExists(String username) {
        return loginUsersMapper.findUserByUsername(username) != null;
    }

    /**
     * ユーザーとロールを作成します。
     *
     * @param username ユーザー名
     * @param password パスワード
     * @param role 割り当てるロール
     */
    private void createUserWithRoles(String username, String password, String role) {
        createUser(username, password);
        assignRoleToUser(username, role);
    }

    /**
     * ユーザーを作成します。
     *
     * @param username ユーザー名
     * @param password パスワード
     */
    private void createUser(String username, String password) {
        LoginUsers loginUsers = new LoginUsers();
        loginUsers.setUsername(username);
        loginUsers.setPassword(passwordEncoder.encode(password));
        loginUsersMapper.insertUser(loginUsers);
    }

    /**
     * ユーザーにロールを割り当てます。
     *
     * @param username ユーザー名
     * @param role 割り当てるロール
     */
    private void assignRoleToUser(String username, String role) {
        UserRole userRole = new UserRole();
        userRole.setUsername(username);
        userRole.setRole(role);
        userRoleMapper.insertUserRole(userRole);
    }
}

initializeUsersメソッドではBeanアノテーションを付与することでBeanとしてApplicationRunnerを登録するようにしてます。

また以下の処理をApplicationRunnerとして返却することでApplicationRunnerクラスのrunメソッドを実行した時に以下の処理が実行されるようにしてます。

        return args -> {
            List<UsersConfig> users = securityProperties.getUsers();

            if (users == null || users.isEmpty()) {
                return;
            }

            users.forEach(this::initializeUser);
        };

Springはアプリ起動時にApplicationRunner.runを実行します。

そのため、アプリケーション起動時にBeanとして登録された上記のログインアカウントを生成するインサート処理が実行されるようになります。

以下はDBのトランザクション管理をするためのアノテーションです。

 @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)

propagation = Propagation.REQUIREDはすでにトランザクションが存在する場合はそのトランザクションを使い、そうでない場合は新しくトランザクションを作るようにする設定となります。

このため、トランザクションを無駄に作成することがないため、パフォーマンスが向上します。

また複数のトランザクションが作成されることにより部分的にコミットされてしまうといったことがありません。

rollbackFor = Exception.classはExceptionクラスとExceptionクラスのサブクラス（つまり何らかの例外）が発生したらロールバックを行うという設定になります。


LoginUsersDataInitializerの全体の流れは以下の通りとなります。

+-------------------------------------------+
|          アプリケーション起動             |
+-------------------+-----------------------+
                    |
                    ▼
+-------------------------------------------+
|       ApplicationRunner#run 実行          |
|     (initializeUsers()メソッド内)         |
+-------------------+-----------------------+
                    |
                    ▼
+-------------------------------------------+
|    SecurityPropertiesからユーザー設定取得  |
|    List<UsersConfig> users = ...         |
+-------------------+-----------------------+
                    |
                    ▼
      +----------------------------+
      |   ユーザーリストが空？     |---はい---> 終了
      +------------+--------------+
                   |
                   | いいえ
                   ▼
      +----------------------------+
      |  ユーザーごとに処理実行    |
      |  users.forEach()          |
      +------------+--------------+
                   |
                   ▼
+-------------------------------------------+
|      initializeUser(UsersConfig)          |
+-------------------+-----------------------+
                    |
                    ▼
      +----------------------------+
      |  ユーザーが既に存在する？  |---はい---> 処理スキップ
      |  isUserExists(username)   |           (次のユーザーへ)
      +------------+--------------+
                   |
                   | いいえ
                   ▼
+-------------------------------------------+
|   createUserWithRoles(username,           |
|                     password, role)       |
+-------------------+-----------------------+
                    |
                    ▼
+-------------------------------------------+
|   createUser(username, password)          |
|    - LoginUsers エンティティ作成          |
|    - パスワードをハッシュ化               |
|    - loginUsersMapper.insertUser()        |
+-------------------+-----------------------+
                    |
                    ▼
+-------------------------------------------+
|   assignRoleToUser(username, role)        |
|    - UserRole エンティティ作成            |
|    - userRoleMapper.insertUserRole()      |
+-------------------+-----------------------+
                    |
                    ▼
      +----------------------------+
      |   次のユーザーに進む      |
      |   (もしあれば)           |
      +----------------------------+

認証用のサービスクラス作成

MyBatisを使う場合、UserDetailsServiceクラスを実装して独自の認証用サービスクラスを作成する必要があります。

そのため、LoginUsersDetailsServiceクラスを作成します。

package com.example.loginroleproject.security;

import java.util.List;
import java.util.stream.Collectors;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Transactional;
import com.example.loginroleproject.entity.LoginUsers;
import com.example.loginroleproject.entity.UserRole;
import com.example.loginroleproject.repository.LoginUsersMapper;
import com.example.loginroleproject.repository.UserRoleMapper;
import lombok.RequiredArgsConstructor;

/**
 * Spring Securityの認証に必要なユーザー情報を提供するサービスクラスです。 データベースに格納されたユーザー情報を取得し、Spring Securityで使用可能な
 * UserDetailsオブジェクトに変換する役割を担います。 トランザクション管理を行い、データの整合性を保ちます。
 */
@RequiredArgsConstructor
@Service
@Transactional(readOnly = true)
public class LoginUsersDetailsService implements UserDetailsService {

    private final LoginUsersMapper loginUsersMapper;
    private final UserRoleMapper userRoleMapper;

    private static final String ROLE_PREFIX = "ROLE_";

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {

        LoginUsers loginUsers = loginUsersMapper.findUserByUsername(username);
        if (loginUsers == null) {
            throw new UsernameNotFoundException("User not found: " + username);
        }

        List<UserRole> userRoles = userRoleMapper.findRolesByUsername(username);
        List<SimpleGrantedAuthority> authorities = userRoles.stream()
                .map(role -> new SimpleGrantedAuthority(ROLE_PREFIX + role.getRole()))
                .collect(Collectors.toList());

        return User.builder().username(loginUsers.getUsername()).password(loginUsers.getPassword())
                .authorities(authorities).build();
    }
}

以下の処理によってログイン画面で入力されたユーザー名がDBに存在するかチェックしてます。

        LoginUsers loginUsers = loginUsersMapper.findUserByUsername(username);
        if (loginUsers == null) {
            throw new UsernameNotFoundException("User not found: " + username);
        }

以下の処理によってログインするユーザーのロールを取得し、SpringSecurityがロールを管理するためのクラスであるSimpleGrantedAuthorityの変数に設定をします。

SpringSecurityでロールを管理するためにはプレフィックスに”ROLE_”という文字列を付与する必要があるのでSimpleGrantedAuthorityの変数に設定する際に付与してます。

        List<UserRole> userRoles = userRoleMapper.findRolesByUsername(username);
        List<SimpleGrantedAuthority> authorities = userRoles.stream()
                .map(role -> new SimpleGrantedAuthority(ROLE_PREFIX + role.getRole()))
                .collect(Collectors.toList());

ログイン画面で入力されたユーザー名、パスワードと先ほど取得したロールを使ってUserDetailsインスタンスを生成して返却します。

        return User.builder().username(loginUsers.getUsername()).password(loginUsers.getPassword())
                .authorities(authorities).build();

loadUserByUsernameメソッドでUserDetailsを返却することで、生成されたUserDetailsインスタンスを使ってSpringが提供するAuthenticationManagerクラスがDBに登録されているパスワードと一致してるか認証を行います。

また、返却したUserDetailsはSpringSecurityによってセッション情報に登録されます。

ログイン画面用のコントローラー作成

ログイン画面用のコントローラーを作成します。

ログイン画面を表示するloginメソッドを用意してます。

package com.example.loginroleproject.controller;

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

/**
 * ログイン関連の画面遷移を制御するコントローラー
 */
@Controller
public class LoginController {

    /**
     * ログイン画面を表示します
     *
     * @return ログイン画面のビュー名
     */
    @GetMapping("/login")
    public String login() {
        return "login";
    }
}

ログイン後画面のコントローラー作成

ログイン後に表示する画面用のコントローラーを作成します。

ロールがADMIN権限のユーザーのみがアクセスできるAdminControllerを作成します。

前編のSecurityConfigによってADMIN権限のみ「/admin」というURLにアクセスできるようにしているため、AdminControllerはADMIN権限専用のコントローラーとなってます。

AdminControllerではADMIN権限のみがアクセスできる「/admin/home.html」を表示するメソッドを用意してます。

package com.example.loginroleproject.controller;

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

/**
 * 管理者専用機能を提供するコントローラークラス /admin/以下のパスにマッピングされたエンドポイントを管理します
 */
@Controller
@RequestMapping("/admin")
public class AdminController {

    /**
     * 管理者用ホーム画面を表示します
     *
     * @return 管理者ホーム画面のビュー名
     */
    @GetMapping("/home")
    public String home() {
        return "admin/home";
    }
}

続いてロールがMEMBER権限のユーザーのみがアクセスできるMemberControllerを作成します。

前編のSecurityConfigによってADMIN権限のみ「/member」というURLにアクセスできるようにしているため、MemberControllerはADMIN権限専用のコントローラーとなってます。

MemberControllerではMEMBER権限のみがアクセスできる「/member/home.html」を表示するメソッドを用意してます。

package com.example.loginroleproject.controller;

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

/**
 * 一般会員専用機能を提供するコントローラークラス /member/以下のパスにマッピングされたエンドポイントを管理します
 */
@Controller
@RequestMapping("/member")
public class MemberController {

    /**
     * 会員用ホーム画面を表示します
     *
     * @return 会員ホーム画面のビュー名
     */
    @GetMapping("/home")
    public String home() {
        return "member/home";
    }
}

ログイン画面とログイン後の画面作成

ログイン画面とログイン後の画面を作成します。

まずはログイン画面であるlogin.htmlです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ログイン - MyApp</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div class="login-container">
    <h2>ログイン</h2>
    <div class="error-message" th:if="${param.error}">
        ユーザー名またはパスワードが間違っています。
    </div>
    <form method="post" th:action="@{/login}">
        <div class="input-group">
            <label for="username">ユーザー名</label>
            <input id="username" name="username" required type="text">
        </div>
        <div class="input-group">
            <label for="password">パスワード</label>
            <input id="password" name="password" required type="password">
        </div>
        <button class="login-button" type="submit">ログイン</button>
    </form>
</div>
</body>
</html>

ログイン画面で使用するCSSとしてstyle.cssを作成します。

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

.login-container h2 {
    margin-bottom: 20px;
}

.input-group {
    margin-bottom: 15px;
    text-align: left;
}

.input-group label {
    display: block;
    margin-bottom: 5px;
}

.input-group input {
    width: 95%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

.login-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
}

.login-button:hover {
    background-color: #0056b3;
}

.error-message {
    color: red;
    margin-bottom: 10px;
}

ADMIN権限のみがアクセスできる「/admin/home.html」を作成します。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>管理者ホーム</title>
</head>
<body>
<h1>管理者ページ</h1>
<p>ようこそ、管理者ユーザーさん！</p>
<div>
    <a href="/logout">ログアウト</a>
</div>
</body>
</html> 

MEMBER権限のみがアクセスできる「/member/home.html」を作成します。

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>会員ホーム</title>
</head>
<body>
<h1>会員ページ</h1>
<p>ようこそ、会員ユーザーさん！</p>
<div>
    <a href="/logout">ログアウト</a>
</div>
</body>
</html> 

アプリ起動用のクラス作成

最後にアプリ起動用のクラスを作成します。

package com.example.loginroleproject;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

/**
 * ログイン認証・認可機能を持つSpring Bootアプリケーションのメインクラスです。 このクラスはアプリケーションのエントリーポイントとして機能し、Spring
 * Boot環境の初期化を行います。
 */
@SpringBootApplication
public class LoginRoleProjectApplication {

    /**
     * アプリケーションのエントリーポイントとなるメインメソッドです。 Spring Boot環境を初期化し、アプリケーションを起動します。
     *
     * @param args コマンドライン引数
     */
    public static void main(String[] args) {
        SpringApplication.run(LoginRoleProjectApplication.class, args);
    }
}

ログイン画面へアクセス

ブラウザでhttp://localhost:8080/loginにアクセスすると以下のようなログイン画面が表示されます。

ユーザー名とパスワードはapplication.ymlの以下の値となります。

  users:
    - username: admin
      password: admin123
      role: ADMIN
    - username: user1
      password: user123
      role: MEMBER
    - username: user2
      password: user456
      role: MEMBER

ADMIN権限でログインしたい場合はユーザー名にadmin、パスワードにadmin123と入力し、ログインボタンを押下すればログインが成功します。

h2-consoleへアクセス

ブラウザでhttp://localhost:8080/h2-consoleへアクセスすると以下のような画面へアクセスできます。

Connectボタンを押すと以下のような画面が表示できます。

この画面では上記のようにSQLを実行でき、H2上の各テーブルのデータを見ることができるので便利です。

なお、記載内容が多くなったため、記事を2つに分けてます。

前編は以下をご参照ください。

SpringSecurity6+MyBatisでroleを使った認可（設定編）

SpringSecurity6系は5.3までと比べるとSecurityConfigの書き方が変わってるので勉強を兼ねて独自のログイン画面を用意しroleを使った認可機能をjavaで作成してみました。 またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

gogorelaxlifeblog.com

2025.03.22

またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

なお、記載内容が多くなったため、記事を2つに分けてます。

後編は以下をご参照ください。

SpringSecurity6+MyBatisでroleを使った認可（実装編）

SpringSecurity6系は5.3までと比べるとSecurityConfigの書き方が変わってるので勉強を兼ねて独自のログイン画面を用意しroleを使った認可機能をjavaで作成してみました。 またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

gogorelaxlifeblog.com

2025.03.22

開発環境

私が構築した時の開発環境は以下の通りとなります。

ソース構成

ソース構成は以下の通りです。

login-role-project
├── src
│   ├── main
│   │   ├── java
│   │   │   └── com
│   │   │       └── example
│   │   │           └── loginroleproject
│   │   │               ├── config
│   │   │               │   ├── SecurityConfig.java
│   │   │               │   └── SecurityProperties.java
│   │   │               ├── controller
│   │   │               │   ├── AdminController.java
│   │   │               │   ├── LoginController.java
│   │   │               │   └── MemberController.java
│   │   │               ├── entity
│   │   │               │   ├── LoginUsers.java
│   │   │               │   └── UserRole.java
│   │   │               ├── repository
│   │   │               │   ├── LoginUsersMapper.java
│   │   │               │   └── UserRoleMapper.java
│   │   │               ├── security
│   │   │               │   ├── CustomAuthenticationSuccessHandler.java
│   │   │               │   ├── LoginUsersDataInitializer.java
│   │   │               │   └── LoginUsersDetailsService.java
│   │   │               └── LoginRoleProjectApplication.java
│   │   └── resources
│   │       ├── com
│   │       │   └── example
│   │       │       └── loginroleproject
│   │       │           └── repository
│   │       │               ├── LoginUsersMapper.xml
│   │       │               └── UserRoleMapper.xml
│   │       ├── static
│   │       │   └── css
│   │       │       └── styles.css
│   │       ├── templates
│   │       │   ├── admin
│   │       │   │   └── home.html
│   │       │   ├── member
│   │       │   │   └── home.html
│   │       │   └── login.html
│   │       ├── application.yml
│   │       └── schema.sql
└── pom.xml

pom.xml

必要なライブラリを導入するためにpom.xmlを以下のように記述します。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.4.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>login-role-project</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>login-role-project</name>
    <description>login-role-project</description>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-validation</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.4</version>
        </dependency>

        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <annotationProcessorPaths>
                        <path>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </path>
                    </annotationProcessorPaths>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

application.ymlの作成

アプリの設定を行うapplication.ymlを以下のように記述します。

spring:
  datasource:
    url: jdbc:h2:mem:testdb
    driver-class-name: org.h2.Driver
    username: sa
    password:
  h2:
    console:
      enabled: true
      path: /h2-console

logging:
  level:
    org.springframework.security: DEBUG

security:
  login-url: /login
  logout-url: /logout
  permit-urls:
    - /login
    - /css/**
    - /js/**
    - /images/**
  users:
    - username: admin
      password: admin123
      role: ADMIN
    - username: user1
      password: user123
      role: MEMBER
    - username: user2
      password: user456
      role: MEMBER
  roles:
    admin: ADMIN
    user: MEMBER
  paths:
    admin: /admin/**
    user: /member/**
  h2-console-url: /h2-console/**

mybatis:
  type-aliases-package: com.example.loginroleproject.entity
  configuration:
    map-underscore-to-camel-case: true

以下を指定することでh2をDBとして使用することしてます。h2のDBにログインする時のpasswordは未入力で大丈夫です。

なお、h2は軽量でローカルでの開発には便利ですが、安定性やスケーラビリティに欠けるので商用利用はしないように留意ください。

spring:
  datasource:
    url: jdbc:h2:mem:testdb
    driver-class-name: org.h2.Driver
    username: sa
    password:

以下はh2のDBの中身を見れるようにh2-consoleを有効化してます。

h2:
  console:
    enabled: true
    path: /h2-console

以下はデバッグ用にSpringSecurityのログレベルをDEBUGに指定してます。

org.springframework.security: DEBUG

securityプリフィックス以下にある値は後述で示すSecurityPropertiesクラスで使用してます。

例えばlogin-urlにはログイン用のURLを記載します。

permit-urlsには未認証でもアクセスできるURLを記載します。

CSSやJSや画像などの静的ファイルは未認証でもアクセスできないと使用できないため許可します。

  login-url: /login
  logout-url: /logout
  permit-urls:
    - /login
    - /css/**
    - /js/**
    - /images/**

usersにはログインで使用するユーザー名とパスワードを記載します。

  users:
    - username: admin
      password: admin123
      role: ADMIN
    - username: user1
      password: user123
      role: MEMBER
    - username: user2
      password: user456
      role: MEMBER

rolesにはどのようなロールがあるかを記載します。

  roles:
    admin: ADMIN
    user: MEMBER

type-aliases-packageで指定したパッケージ配下のクラスはパッケージ名を省略してMyBatisのXMLで使用できます。

map-underscore-to-camel-case: trueを指定することでデータベースのカラム名をキャメルケースに自動変換できるようにします。

mybatis:
  type-aliases-package: com.example.loginproject.entity
  configuration:
    map-underscore-to-camel-case: true

schema.sqlの作成

アプリケーション起動時にDBのテーブルが作成されるようにschema.sqlを作成します。

CREATE TABLE IF NOT EXISTS LOGIN_USERS (
    USERNAME VARCHAR (50) PRIMARY KEY,
    PASSWORD VARCHAR (100) NOT NULL,
    ENABLED BOOLEAN NOT NULL
);

CREATE TABLE IF NOT EXISTS USER_ROLES (
    USERNAME VARCHAR (50) NOT NULL,
    ROLE VARCHAR (20) NOT NULL,
    PRIMARY KEY (USERNAME, ROLE),
    FOREIGN KEY (USERNAME) REFERENCES LOGIN_USERS (USERNAME)
);

application.ymlを扱うクラスの作成

application.ymlにlogin-urlといったログイン用のURLなどを定数として定義しました。

それらの定数を扱うためのクラスであるSecurityPropertiesクラスを作成します。

package com.example.loginroleproject.config;

import java.util.List;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
import org.springframework.validation.annotation.Validated;
import jakarta.validation.constraints.NotBlank;
import jakarta.validation.constraints.NotEmpty;
import lombok.Getter;
import lombok.Setter;

@Getter
@Setter
@Component
@Validated
@ConfigurationProperties(prefix = "security")
public class SecurityProperties {
    @NotBlank(message = "Login URL must be specified")
    private String loginUrl;

    @NotBlank(message = "Logout URL must be specified")
    private String logoutUrl;

    @NotEmpty(message = "Permit URLs must be specified")
    private List<String> permitUrls;

    @NotEmpty(message = "Users must be configured")
    private List<UsersConfig> users;

    private RolesConfig roles;

    private PathsConfig paths;

    @NotBlank(message = "H2 console URL must be specified")
    private String h2ConsoleUrl;

    @Getter
    @Setter
    public static class UsersConfig {
        @NotBlank(message = "Username must be specified")
        private String username;

        @NotBlank(message = "Password must be specified")
        private String password;

        @NotBlank(message = "Role must be specified")
        private String role;
    }

    @Getter
    @Setter
    public static class RolesConfig {
        @NotBlank(message = "Admin role must be specified")
        private String admin;

        @NotBlank(message = "User role must be specified")
        private String user;
    }

    @Getter
    @Setter
    public static class PathsConfig {
        @NotBlank(message = "Admin path must be specified")
        private String admin;

        @NotBlank(message = "User path must be specified")
        private String user;
    }
}

lombokのgetterとsetterアノテーションによってgetterとsetterメソッドを自作しないで自動的に生成されるようにしてます。


Validated、NotBlankとNotEmptyアノテーションによってymlファイルから値を読み込んだ時に値がない場合にエラーとなるようにしてます。

アプリ起動時にバリデーションが行われることでアプリ起動に必要な値がすべて揃ってるかをチェックしてます。

なお、コレクションフレームワーク（List型）はNotBlankが使用できないため、NotEmptyでチェックしてます。


ConfigurationPropertiesアノテーションによってapplication.yml上のsecurityプレフィックス配下にあるものをすべてこのクラスの変数に格納するようにしてます。

permit-urlsプレフィックスが以下のようにハイフンを使って複数値を定義しているため、List<String>でpermitUrlsを宣言してます。

  permit-urls:
    - /login
    - /css/**
    - /js/**
    - /images/**

usersプレフィックスが複数の項目を持つため、UsersConfigというインナークラスを作成しています。

rolesとpathsプレフィックスも複数の項目を持つため、RolesConfigとPathsConfigというインナークラスを作成してます。

  users:
    - username: admin
      password: admin123
      roles:
        - ADMIN
    - username: user1
      password: user123
      roles:
        - MEMBER
    - username: user2
      password: user456
      roles:
        - MEMBER

SpringSecurityの設定

SpringSecurityの設定を行うクラスを作成します。

package com.example.loginroleproject.config;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;
import com.example.loginroleproject.security.CustomAuthenticationSuccessHandler;
import lombok.RequiredArgsConstructor;

/**
 * Spring Securityの設定クラス 認証・認可の設定とセキュリティ関連の設定を行います
 */
@RequiredArgsConstructor
@Configuration
public class SecurityConfig {
    private static final String X_FRAME_OPTIONS_HEADER = "X-Frame-Options";
    private static final String X_FRAME_OPTIONS_SAMEORIGIN = "SAMEORIGIN";
    private static final String X_FRAME_OPTIONS_DENY = "DENY";

    private final SecurityProperties securityProperties;
    private final CustomAuthenticationSuccessHandler authenticationSuccessHandler;

    /**
     * Spring Securityの設定を構成します
     *
     * @param http HttpSecurityオブジェクト
     * @return 設定済みのSecurityFilterChain
     * @throws Exception 設定中にエラーが発生した場合
     */
    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(auth -> auth
                .requestMatchers(securityProperties.getPermitUrls().toArray(String[]::new)).permitAll()
                .requestMatchers(securityProperties.getH2ConsoleUrl()).permitAll()
                .requestMatchers(securityProperties.getPaths().getAdmin()).hasRole(securityProperties.getRoles().getAdmin())
                .requestMatchers(securityProperties.getPaths().getUser()).hasRole(securityProperties.getRoles().getUser())
                .anyRequest().authenticated()
            )
            .formLogin(login -> login
                .loginPage(securityProperties.getLoginUrl())
                .successHandler(authenticationSuccessHandler)
                .permitAll()
            )
            .logout(logout -> logout
                .logoutRequestMatcher(new AntPathRequestMatcher(securityProperties.getLogoutUrl()))
                .logoutSuccessUrl(securityProperties.getLoginUrl())
                .permitAll()
            )
            .csrf(csrf -> csrf
                .ignoringRequestMatchers(securityProperties.getH2ConsoleUrl())
            )
            .headers(headers -> headers
                .addHeaderWriter((request, response) -> {
                    if (new AntPathRequestMatcher(securityProperties.getH2ConsoleUrl()).matches(request)) {
                        response.setHeader(X_FRAME_OPTIONS_HEADER, X_FRAME_OPTIONS_SAMEORIGIN);
                    } else {
                        response.setHeader(X_FRAME_OPTIONS_HEADER, X_FRAME_OPTIONS_DENY);
                    }
                })
            );
        return http.build();
    }

    /**
     * パスワードエンコーダーを提供します
     *
     * @return BCryptPasswordEncoderのインスタンス
     */
    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

RequiredArgsConstructorアノテーションはfinal修飾子が付与されたメンバ変数を引数に持つコンストラクタを自動生成します。

これによって以下のようなコンストラクタを作らずともSecurityPropertiesクラスをインジェクションできるようにし、SecurityConfigクラスでSecurityPropertiesとCustomAuthenticationSuccessHandlerクラスを使用可能としてます。

    public SecurityConfig(final SecurityProperties securityProperties, final CustomAuthenticationSuccessHandler authenticationSuccessHandler) {
        this.securityProperties = securityProperties;
        this.authenticationSuccessHandler = authenticationSuccessHandler;
    }

以下によってapplication.ymlのpermit-urlsとh2-console-urlプレフィックスで定義したURLについてはログイン認証をせずにアクセスできるようにしてます。

.requestMatchers(securityProperties.getPermitUrls().toArray(String[]::new)).permitAll()
.requestMatchers(securityProperties.getH2ConsoleUrl()).permitAll()

以下によって「/admin/**」というURLはAdminロールを持つユーザーのみアクセスできるようにしてます。

「/member/**」というURLはMemberロールを持つユーザーのみアクセスできるようにしてます。

この制御によってroleによる認可を実現しています。

.requestMatchers(securityProperties.getPaths().getAdmin()).hasRole(securityProperties.getRoles().getAdmin())
.requestMatchers(securityProperties.getPaths().getUser()).hasRole(securityProperties.getRoles().getUser())

以下によってログイン画面はapplication.ymlのlogin-urlプレフィックスに定義したURLであることを指定してます。

.loginPage(securityProperties.getLoginUrl())

以下によってログイン成功時の処理はCustomAuthenticationSuccessHandlerクラスを実行するように指定してます。

CustomAuthenticationSuccessHandlerは後続で作成するクラスになります。

.successHandler(authenticationSuccessHandler)

logoutRequestMatcherによってログアウトの処理を実行するURLを指定してます。

logoutSuccessUrlによってログアウト処理が成功した後のリダイレクト先のURLを指定してます。

.logoutRequestMatcher(new AntPathRequestMatcher(securityProperties.getLogoutUrl()))
.logoutSuccessUrl(securityProperties.getLoginUrl())

以下によってh2-consoleのみcsrfトークンを無効化してます。

.csrf(csrf -> csrf
    .ignoringRequestMatchers(securityProperties.getH2ConsoleUrl())
)

以下によってh2-consoleのみiframeを使用可能にしてます。

.headers(headers -> headers
    .addHeaderWriter((request, response) -> {
        if (new AntPathRequestMatcher(securityProperties.getH2ConsoleUrl()).matches(request)) {
            response.setHeader(X_FRAME_OPTIONS_HEADER, X_FRAME_OPTIONS_SAMEORIGIN);
        } else {
            response.setHeader(X_FRAME_OPTIONS_HEADER, X_FRAME_OPTIONS_DENY);
        }
    })
);

以下によってパスワードの暗号化にBCryptPasswordEncoderを使用するように指定してます。

@Bean
public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
}

ログイン成功時のHandlerクラス作成

ログイン成功時のHandlerクラスを作成します。

package com.example.loginroleproject.security;

import java.io.IOException;
import java.util.Collection;
import org.springframework.security.core.Authentication;
import org.springframework.security.core.GrantedAuthority;
import org.springframework.security.core.authority.SimpleGrantedAuthority;
import org.springframework.security.web.authentication.AuthenticationSuccessHandler;
import org.springframework.stereotype.Component;
import com.example.loginroleproject.config.SecurityProperties;
import jakarta.servlet.ServletException;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;
import lombok.RequiredArgsConstructor;

/**
 * ユーザーのロールに基づいて適切なURLにリダイレクトするカスタム認証成功ハンドラー
 */
@Component
@RequiredArgsConstructor
public class CustomAuthenticationSuccessHandler implements AuthenticationSuccessHandler {

    private static final String ROLE_PREFIX = "ROLE_";
    private final SecurityProperties securityProperties;

    /**
     * 認証成功時に呼び出され、ユーザーのロールに応じた適切なURLにリダイレクトします
     * 
     * @param request リクエスト
     * @param response レスポンス
     * @param authentication 認証情報
     * @throws IOException I/O例外が発生した場合
     * @throws ServletException サーブレット例外が発生した場合
     */
    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, HttpServletResponse response,
            Authentication authentication) throws IOException, ServletException {

        Collection<? extends GrantedAuthority> authorities = authentication.getAuthorities();

        // 管理者ロールを持つ場合は管理者ホーム画面へリダイレクト
        if (authorities.contains(new SimpleGrantedAuthority(
                ROLE_PREFIX + securityProperties.getRoles().getAdmin()))) {
            response.sendRedirect("/admin/home");
        } else {
            // それ以外の場合は会員ホーム画面へリダイレクト
            response.sendRedirect("/member/home");
        }
    }
}

AuthenticationSuccessHandlerインターフェースを実装することでログイン成功時に実行される処理をカスタマイズしてます。

SpringSecurityが管理しているセッション情報からauthenticationを取得し、ログイン後に管理者ロールを持つユーザーとそうでないユーザーによって呼び出すコントローラーを分けるようにしてます。

セッション情報の登録は後編に記すLoginUsersDetailsServiceで行っています。

なお、記載内容が多くなったため、記事を2つに分けてます。

後編は以下をご参照ください。

SpringSecurity6+MyBatisでroleを使った認可（実装編）

SpringSecurity6系は5.3までと比べるとSecurityConfigの書き方が変わってるので勉強を兼ねて独自のログイン画面を用意しroleを使った認可機能をjavaで作成してみました。 またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

gogorelaxlifeblog.com

2025.03.22

またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

なお、記載内容が多くなったため、記事を2つに分けてます。

前編は以下をご参照ください。

SpringSecurity6+MyBatisで独自ログイン認証（設定編）

SpringSecurity6系は5.3までと比べるとSecurityConfigの書き方が変わってるので勉強を兼ねて独自のログイン画面を用意し認証機能をjavaで作成してみました。 またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

gogorelaxlifeblog.com

2025.03.16

開発環境

私が構築した時の開発環境は以下の通りとなります。

ソース構成

ソース構成は以下の通りです。

• login-project
  • src
    • main
      • java
        • com
          • example
            • loginproject
              • config
                • LoginUsersDataInitializer.java
                • SecurityConfig.java
                • SecurityProperties.java
              • controller
                • LoginController.java
              • entity
                • LoginUsers.java
              • mapper
                • LoginUsersMapper.java
              • service
                • LoginUsersDetailsService.java
        • LoginProjectApplication.java
      • resources
        • com
          • example
            • loginproject
              • mapper
                • LoginUsersMapper.xml
        • static
          • css
            • style.css
          • templates
            • home.html
            • login.html
        • application.yml
        • schema.sql
  • pom.xml

SQLの作成

MyBatisのmapper.xmlを使ってSQLを使用します。

LoginUsersMapper.xmlを作成します。

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.loginproject.mapper.LoginUsersMapper">
    <select id="findUserByUsername" parameterType="string" resultType="LoginUsers">
        SELECT username, password
        FROM login_users
        WHERE username = #{username}
    </select>
    <insert id="insertUser" parameterType="LoginUsers">
        INSERT INTO login_users (username, password, enabled)
        VALUES (#{username}, #{password}, true);
    </insert>
</mapper>

namespace=”com.example.loginproject.mapper.LoginUsersMapper”と指定することで後述のLoginUsersMapper.javaに用意されたメソッドとLoginUsersMapper.xmlに用意された各SQLのid名がリンクします。

リンクすることでLoginUsersMapper.javaからLoginUsersMapper.xmlのSQLが実行できるようになります。

resultType=”LoginUsers”はSELECTの結果をcom.example.loginproject.entity.LoginUsersクラスに設定するために指定してます。

parameterType=”LoginUsers”と指定することでLoginUsersクラスのusernameやpassword変数に格納した値がINSERT文のVALUES句のusernameやpasswordに設定されるようにしてます。

複数の値をSQLに渡す必要がある時に便利です。

対してparameterType=”string”は文字列型の値をusernameに設定できるようにしてます。

findUserByUsernameはログイン時などに入力したユーザー名が存在するかをチェックするためのSQLです。

insertUserはアプリ起動時にログインアカウントを生成するためのSQLです。

Entityクラスの作成

後述のMapperインターフェースで使用するEntityクラスを作成します。

LoginUsersクラスを作成します。

package com.example.loginproject.entity;

import lombok.Data;

@Data
public class LoginUsers {
    private String username;
    private String password;
}

Mapperインターフェースの作成

LoginUsersMapper.xmlを使うMapperインターフェースを作成します。

LoginUsersMapperクラスを作成します。

package com.example.loginproject.mapper;

import com.example.loginproject.entity.LoginUsers;
import org.apache.ibatis.annotations.Mapper;

@Mapper
public interface LoginUsersMapper {
    LoginUsers findUserByUsername(String username);
    void insertUser(LoginUsers loginUsers);
}

MapperアノテーションによってMyBatisがLoginUsersMapperをMapperインターフェースとして自動的に検出します。

こうすることでLoginUsersMapper.javaを通じてLoginUsersMapper.xmlのSQLを使うことができます。

ログインアカウントを生成するクラスの作成

今回はdata.sqlを使ってログインアカウントを生成しません。

H2のDBにデータを生成するのはdata.sqlを使うのが一般的だと思います。

しかし、data.sqlを使ってデータを生成しても、BCryptPasswordEncoderを使っているためにハッシュが一致せずに正しいパスワードを入力してもエラーとなってしまいます。

そのためアプリ起動時にデータをインサートする処理を実行するためにLoginUsersDataInitializerクラスを作成します。

package com.example.loginproject.config;

import com.example.loginproject.entity.LoginUsers;
import com.example.loginproject.mapper.LoginUsersMapper;
import lombok.RequiredArgsConstructor;
import org.springframework.boot.ApplicationRunner;
import org.springframework.context.annotation.Bean;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.stereotype.Component;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

@RequiredArgsConstructor
@Component
public class LoginUsersDataInitializer {

    private final LoginUsersMapper loginUsersMapper;
    private final PasswordEncoder passwordEncoder;
    private final SecurityProperties securityProperties;

    @Bean
    @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)
    public ApplicationRunner dataInitializer() {
        return args -> {
            if (loginUsersMapper.findUserByUsername(securityProperties.getDebugUser().getUsername()) == null) {
                LoginUsers loginUsers = new LoginUsers();
                loginUsers.setUsername(securityProperties.getDebugUser().getUsername());
                loginUsers.setPassword(passwordEncoder.encode(securityProperties.getDebugUser().getPassword()));
                loginUsersMapper.insertUser(loginUsers);
            }
        };
    }
}

dataInitializerメソッドではBeanアノテーションを付与することでBeanとしてApplicationRunnerを登録するようにしてます。

また以下の処理をApplicationRunnerとして返却することでApplicationRunnerクラスのrunメソッドの中身を以下の処理にしてます。

            if (loginUsersMapper.findUserByUsername(securityProperties.getDebugUser().getUsername()) == null) {
                LoginUsers loginUsers = new LoginUsers();
                loginUsers.setUsername(securityProperties.getDebugUser().getUsername());
                loginUsers.setPassword(passwordEncoder.encode(securityProperties.getDebugUser().getPassword()));
                loginUsersMapper.insertUser(loginUsers);
            }

Springはアプリ起動時にApplicationRunner.runを実行します。

そのため、アプリケーション起動時にBeanとして登録された上記のログインアカウントを生成するインサート処理が実行されるようになります。

以下はDBのトランザクション管理をするためのアノテーションです。

 @Transactional(propagation = Propagation.REQUIRED, rollbackFor = Exception.class)

propagation = Propagation.REQUIREDはすでにトランザクションが存在する場合はそのトランザクションを使い、そうでない場合は新しくトランザクションを作るようにする設定となります。

このため、トランザクションを無駄に作成することがないため、パフォーマンスが向上します。

また複数のトランザクションが作成されることにより部分的にコミットされてしまうといったことがありません。

rollbackFor = Exception.classはExceptionクラスとExceptionクラスのサブクラス（つまり何らかの例外）が発生したらロールバックを行うという設定になります。

認証用のサービスクラス作成

MyBatisを使う場合、UserDetailsServiceクラスを実装して独自の認証用サービスクラスを作成する必要があります。

そのため、LoginUsersDetailsServiceクラスを作成します。

package com.example.loginproject.service;

import com.example.loginproject.entity.LoginUsers;
import com.example.loginproject.mapper.LoginUsersMapper;
import lombok.RequiredArgsConstructor;
import org.springframework.security.core.userdetails.User;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;

@RequiredArgsConstructor
@Service
public class LoginUsersDetailsService implements UserDetailsService {

    private final LoginUsersMapper loginUsersMapper;

    @Override
    public UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {
        LoginUsers loginUsers = loginUsersMapper.findUserByUsername(username);
        if (loginUsers == null) {
            throw new UsernameNotFoundException("User not found: " + username);
        }

        return User.builder()
                .username(loginUsers.getUsername())
                .password(loginUsers.getPassword())
                .build();
    }
}

以下の処理によってログイン画面で入力されたユーザー名がDBに存在するかチェックしてます。

        LoginUsers loginUsers = loginUsersMapper.findUserByUsername(username);
        if (loginUsers == null) {
            throw new UsernameNotFoundException("User not found: " + username);
        }

存在している場合、ログイン画面で入力されたユーザー名とパスワードを使ってUserDetailsインスタンスを生成します。

        return User.builder()
                .username(loginUsers.getUsername())
                .password(loginUsers.getPassword())
                .build();

生成されたUserDetailsインスタンスを使ってSpringが提供するAuthenticationManagerクラスがDBに登録されているパスワードと一致してるか認証を行います。

ログイン画面用のコントローラー作成

ログイン画面用のコントローラーを作成します。

package com.example.loginproject.controller;

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

@Controller
public class LoginController {

    @GetMapping("/login")
    public String login() {
        return "login";
    }

    @GetMapping("/home")
    public String home() {
        return "home";
    }
}

ログイン画面を表示するloginメソッドとログイン成功時の画面を表示するhomeメソッドを用意してます。

ログイン画面とログイン後の画面作成

ログイン画面とログイン後の画面を作成します。

まずはログイン画面であるlogin.htmlです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>ログイン - MyApp</title>
    <link rel="stylesheet" th:href="@{/css/style.css}">
</head>
<body>
<div class="login-container">
    <h2>ログイン</h2>
    <div th:if="${param.error}" class="error-message">
        ユーザー名またはパスワードが間違っています。
    </div>
    <form th:action="@{/login}" method="post">
        <div class="input-group">
            <label for="username">ユーザー名</label>
            <input type="text" id="username" name="username" required>
        </div>
        <div class="input-group">
            <label for="password">パスワード</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit" class="login-button">ログイン</button>
    </form>
</div>
</body>
</html>

ログイン画面で使用するCSSとしてstyle.cssを作成します。

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}
.login-container {
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}
.login-container h2 {
    margin-bottom: 20px;
}
.input-group {
    margin-bottom: 15px;
    text-align: left;
}
.input-group label {
    display: block;
    margin-bottom: 5px;
}
.input-group input {
    width: 95%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.login-button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px;
    width: 100%;
    border-radius: 5px;
    cursor: pointer;
}
.login-button:hover {
    background-color: #0056b3;
}
.error-message {
    color: red;
    margin-bottom: 10px;
}

続いてログイン後の画面であるhome.htmlです。

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Home</title>
</head>
<body>
    <h1>Welcome Home!</h1>
    <p>ログイン成功しました</p>
</body>
</html>

アプリ起動用のクラス作成

最後にアプリ起動用のクラスを作成します。

package com.example.loginproject;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class LoginProjectApplication {

    public static void main(String[] args) {
        SpringApplication.run(LoginProjectApplication.class, args);
    }

}

ログイン画面へアクセス

ブラウザでhttp://localhost:8080/loginにアクセスすると以下のようなログイン画面が表示されます。

ユーザー名とパスワードはapplication.ymlの以下の値となります。

  debug-user:
    username: user
    password: password

そのため、ユーザー名にuser、パスワードにpasswordと入力し、ログインボタンを押下すればログインが成功します。

h2-consoleへアクセス

ブラウザでhttp://localhost:8080/h2-consoleへアクセスすると以下のような画面へアクセスできます。

Connectボタンを押すと以下のような画面が表示できます。

この画面では上記のようにSQLを実行でき、H2上の各テーブルのデータを見ることができるので便利です。

なお、記載内容が多くなったため、記事を2つに分けてます。

前編は以下をご参照ください。

SpringSecurity6+MyBatisで独自ログイン認証（設定編）

SpringSecurity6系は5.3までと比べるとSecurityConfigの書き方が変わってるので勉強を兼ねて独自のログイン画面を用意し認証機能をjavaで作成してみました。 またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

gogorelaxlifeblog.com

2025.03.16

またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

なお、記載内容が多くなったため、記事を2つに分けてます。

後編は以下をご参照ください。

SpringSecurity6+MyBatisで独自ログイン認証（実装編）

SpringSecurity6系は5.3までと比べるとSecurityConfigの書き方が変わってるので勉強を兼ねて独自のログイン画面を用意し認証機能をjavaで作成してみました。 またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

gogorelaxlifeblog.com

2025.03.16

開発環境

私が構築した時の開発環境は以下の通りとなります。

ソース構成

ソース構成は以下の通りです。

• login-project
  • src
    • main
      • java
        • com
          • example
            • loginproject
              • config
                • LoginUsersDataInitializer.java
                • SecurityConfig.java
                • SecurityProperties.java
              • controller
                • LoginController.java
              • entity
                • LoginUsers.java
              • mapper
                • LoginUsersMapper.java
              • service
                • LoginUsersDetailsService.java
        • LoginProjectApplication.java
      • resources
        • com
          • example
            • loginproject
              • mapper
                • LoginUsersMapper.xml
        • static
          • css
            • style.css
          • templates
            • home.html
            • login.html
        • application.yml
        • schema.sql
  • pom.xml

pom.xml

必要なライブラリを導入するためにpom.xmlを以下のように記述します。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.4.3</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>login-project</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>login-project</name>
    <description>login-project</description>
    <url/>
    <licenses>
        <license/>
    </licenses>
    <developers>
        <developer/>
    </developers>
    <scm>
        <connection/>
        <developerConnection/>
        <tag/>
        <url/>
    </scm>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-security</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>3.0.4</version>
        </dependency>

        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <optional>true</optional>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>org.springframework.security</groupId>
            <artifactId>spring-security-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.apache.maven.plugins</groupId>
                <artifactId>maven-compiler-plugin</artifactId>
                <configuration>
                    <annotationProcessorPaths>
                        <path>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </path>
                    </annotationProcessorPaths>
                </configuration>
            </plugin>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <configuration>
                    <excludes>
                        <exclude>
                            <groupId>org.projectlombok</groupId>
                            <artifactId>lombok</artifactId>
                        </exclude>
                    </excludes>
                </configuration>
            </plugin>
        </plugins>
    </build>

</project>

application.ymlの作成

アプリの設定を行うapplication.ymlを以下のように記述します。

spring:
  datasource:
    url: jdbc:h2:mem:testdb
    driver-class-name: org.h2.Driver
    username: sa
    password:
  h2:
    console:
      enabled: true
      path: /h2-console

logging:
  level:
    org.springframework.security: DEBUG

security:
  login-url: /login
  home-url: /home
  permit-urls:
    - /login
    - /css/**
    - /js/**
    - /images/**
  debug-user:
    username: user
    password: password
  h2-console-url: /h2-console/**

mybatis:
  type-aliases-package: com.example.loginproject.entity
  configuration:
    map-underscore-to-camel-case: true

datasourceプレフィックスのpasswordは未入力で大丈夫です。

以下はh2のDBの中身を見れるようにh2-consoleを有効化してます。

h2:
  console:
    enabled: true
    path: /h2-console

以下はデバッグ用にSpringSecurityのログレベルをDEBUGに指定してます。

org.springframework.security: DEBUG

securityプリフィックス以下にある値は後述で示すSecurityPropertiesクラスで使用してます。

例えばlogin-urlにはログイン用のURLを記載します。

permit-urlsには未認証でもアクセスできるURLを記載します。

CSSやJSや画像などの静的ファイルは未認証でもアクセスできないと使用できないため許可します。

type-aliases-packageで指定したパッケージ配下のクラスはパッケージ名を省略してMyBatisのXMLで使用できます。

map-underscore-to-camel-case: trueを指定することでデータベースのカラム名をキャメルケースに自動変換できるようにします。

mybatis:
  type-aliases-package: com.example.loginproject.entity
  configuration:
    map-underscore-to-camel-case: true

schema.sqlの作成

アプリケーション起動時にDBのテーブルが作成されるようにschema.sqlを作成します。

CREATE TABLE IF NOT EXISTS login_users (
    username VARCHAR(50) PRIMARY KEY,
    password VARCHAR(100) NOT NULL,
    enabled BOOLEAN NOT NULL
);

application.ymlを扱うクラスの作成

application.ymlにlogin-urlといったログイン用のURLなどを定数として定義しました。

それらの定数を扱うためのクラスであるSecurityPropertiesクラスを作成します。

package com.example.loginproject.config;

import lombok.Data;
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;

import java.util.List;

@Data
@Component
@ConfigurationProperties(prefix = "security")
public class SecurityProperties {
    private String loginUrl;
    private String homeUrl;
    private List<String> permitUrls;
    private DebugUser debugUser;

    private String h2ConsoleUrl;

    @Data
    public static class DebugUser {
        private String username;
        private String password;
    }
}

lombokのDataアノテーションによってgetterとsetterメソッドを自作しないで自動的に生成されるようにしてます。

ConfigurationPropertiesアノテーションによってapplication.yml上のsecurityプレフィックス配下にあるものをすべてこのクラスの変数に格納するようにしてます。

permit-urlsプレフィックスが以下のようにハイフンを使って複数値を定義しているため、List<String>でpermitUrlsを宣言してます。

  permit-urls:
    - /login
    - /css/**
    - /js/**
    - /images/**

debug-userプレフィックスが複数の項目を持つため、DebugUserというインナークラスを作成しています。

  debug-user:
    username: user
    password: password

SpringSecurityの設定

SpringSecurityの設定を行うクラスを作成します。

package com.example.loginproject.config;

import lombok.RequiredArgsConstructor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.web.SecurityFilterChain;
import org.springframework.security.web.util.matcher.AntPathRequestMatcher;

@RequiredArgsConstructor
@Configuration
public class SecurityConfig {

    private final SecurityProperties securityProperties;

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        final String X_FRAME_OPTIONS = "X-Frame-Options";
        final String X_FRAME_OPTIONS_SAMEORIGIN = "SAMEORIGIN";
        final String X_FRAME_OPTIONS_DENY = "DENY";

        http
                .authorizeHttpRequests(auth -> auth
                        .requestMatchers(securityProperties.getPermitUrls().toArray(String[]::new)).permitAll()
                        .requestMatchers(securityProperties.getH2ConsoleUrl()).permitAll()
                        .anyRequest().authenticated()
                )
                .formLogin(login -> login
                        .loginPage(securityProperties.getLoginUrl())
                        .defaultSuccessUrl(securityProperties.getHomeUrl(), true)
                        .permitAll()
                )
                .csrf(csrf -> csrf
                        .ignoringRequestMatchers(securityProperties.getH2ConsoleUrl())
                )
                .headers(headers -> headers
                        .addHeaderWriter((request, response) -> {
                            if (new AntPathRequestMatcher(securityProperties.getH2ConsoleUrl()).matches(request)) {
                                response.setHeader(X_FRAME_OPTIONS, X_FRAME_OPTIONS_SAMEORIGIN);
                            } else {
                                response.setHeader(X_FRAME_OPTIONS, X_FRAME_OPTIONS_DENY);
                            }
                        })
                );
        return http.build();
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

RequiredArgsConstructorアノテーションはfinal修飾子が付与されたメンバ変数を引数に持つコンストラクタを自動生成します。

これによって以下のようなコンストラクタを作らずともSecurityPropertiesクラスをインジェクションできるようにし、SecurityConfigクラスでSecurityPropertiesクラスを使用可能としてます。

public SecurityConfig(final SecurityProperties securityProperties) {
    this.securityProperties = securityProperties;
}

以下によってapplication.ymlのpermit-urlsとh2-console-urlプレフィックスで定義したURLについてはログイン認証をせずにアクセスできるようにしてます。

.requestMatchers(securityProperties.getPermitUrls().toArray(String[]::new)).permitAll()
 .requestMatchers(securityProperties.getH2ConsoleUrl()).permitAll()

以下によってログイン画面はapplication.ymlのlogin-urlプレフィックスに定義したURLであることを指定してます。

.loginPage(securityProperties.getLoginUrl())

以下によってログイン後の画面はapplication.ymlのhome-urlプレフィックスに定義したURLであることを指定してます。

.defaultSuccessUrl(securityProperties.getHomeUrl(), true)

以下によってh2-consoleのみcsrfトークンを無効化してます。

.csrf(csrf -> csrf
        .ignoringRequestMatchers(securityProperties.getH2ConsoleUrl())
)

以下によってh2-consoleのみiframeを使用可能にしてます。

.headers(headers -> headers
        .addHeaderWriter((request, response) -> {
            if (new AntPathRequestMatcher(securityProperties.getH2ConsoleUrl()).matches(request)) {
                response.setHeader(X_FRAME_OPTIONS, X_FRAME_OPTIONS_SAMEORIGIN);
            } else {
                response.setHeader(X_FRAME_OPTIONS, X_FRAME_OPTIONS_DENY);
            }
        })
);

以下によってパスワードの暗号化にBCryptPasswordEncoderを使用するように指定してます。

@Bean
public PasswordEncoder passwordEncoder() {
    return new BCryptPasswordEncoder();
}

なお、記載内容が多くなったため、記事を2つに分けてます。

後編は以下をご参照ください。

SpringSecurity6+MyBatisで独自ログイン認証（実装編）

SpringSecurity6系は5.3までと比べるとSecurityConfigの書き方が変わってるので勉強を兼ねて独自のログイン画面を用意し認証機能をjavaで作成してみました。 またMyBatisとH2 Databaseを使うことでDB構築をせずとも、手軽にDBと連携できるようにしてみました。

gogorelaxlifeblog.com

2025.03.16

開発環境

私が構築した時の開発環境は以下の通りとなります。

aprのインストール

apacheをインストールするために必要となるapr（Apache Portable Runtime）をインストールします。

sudo apt install gcc
sudo apt install make
cd /usr/local/src
sudo wget https://dlcdn.apache.org//apr/apr-1.7.4.tar.gz
sudo tar xvf apr-1.7.4.tar.gz
cd apr-1.7.4/
sudo ./configure --prefix=/opt/apr/apr-1.7.4
sudo make
sudo make test
sudo make install

apr-utilのインストール

同じくapacheをインストールするために必要となるapr-utilをインストールします。

cd /usr/local/src
sudo apt install libexpat1-dev
sudo wget https://dlcdn.apache.org//apr/apr-util-1.6.3.tar.gz
sudo tar xvf apr-util-1.6.3.tar.gz
cd apr-util-1.6.3/
sudo ./configure --prefix=/opt/apr-util/apr-util-1.6.3 --with-apr=/opt/apr/apr-1.7.4
sudo make
sudo make test
sudo make install

apacheのインストール

続いてapacheのインストールをします。

cd /usr/local/src
sudo apt install libpcre3-dev
sudo apt install libssl-dev
sudo wget http://archive.apache.org/dist/httpd/httpd-2.4.57.tar.gz
sudo tar xvf httpd-2.4.57.tar.gz
cd httpd-2.4.57/
sudo ./configure --enable-ssl --enable-rewrite --enable-so --with-apr=/opt/apr/apr-1.7.4 --with-apr-util=/opt/apr-util/apr-util-1.6.3
sudo make
sudo make install

mod_sslの導入

https通信ができるようにmod_sslを導入します。

cd /usr/local/src/httpd-2.4.57/modules/ssl/
sudo /usr/local/apache2/bin/apxs -c mod_ssl.c
sudo /usr/local/apache2/bin/apxs -i -a -c -I /usr/include/openssl -I ../md -D HAVE_OPENSSL=1 -lcrypto -lssl *.c

mod_rewriteの導入

リダイレクト処理が行えるようにmod_rewriteを導入します。

cd /usr/local/src/httpd-2.4.57/modules/mappers
sudo /usr/local/apache2/bin/apxs -i -a -n rewrite mod_rewrite.la

mod_proxyの導入

tomcatと連携できるようにmod_proxyを導入します。

cd /usr/local/src/httpd-2.4.57/modules/proxy
sudo /usr/local/apache2/bin/apxs -i -a -c mod_proxy.c proxy_util.c
sudo /usr/local/apache2/bin/apxs -i -a -c mod_proxy_ajp.c ajp_*.c

apacheのサービス起動 

systemctlコマンドを使ってapacheが起動できるようにapache2.serviceを作成します。

sudo vi /usr/lib/systemd/system/apache2.service

[Unit]
Description=Apache 2
After=network.target

[Service]
Type=oneshot
ExecStart=/usr/local/apache2/bin/apachectl start
ExecStop=/usr/local/apache2/bin/apachectl stop
RemainAfterExit=yes
User=root
Group=root

[Install]
WantedBy=multi-user.target

最後にapacheを起動します。

sudo systemctl start apache2

ブラウザ上で「http://localhost」にアクセスし、「It works！」と表示されればapacheは正常に動作してます。

Spring Batch4から5でのバージョンアップに伴い、JobBuilderFactoryなどが非推奨となってたので勉強も兼ねて作成してみました。

開発環境

私が構築した時の開発環境は以下の通りとなります。

ソース構成

環境を作った際のソース構成は以下の通りです。

• springBatchSample
  • src
    • main
      • java
        • com.example.batchprocessing
          • BatchConfiguration.java
          • JobCompletionNotificationListener.java
          • Person.java
          • PersonTasklet.java
          • SpringBatchSampleApplication.java
      • resource
        • application.yml
        • sample-data.csv
        • schema-all.sql
  • pom.xml

pom.xml

必要なライブラリを導入するためにpom.xmlを以下のように記述します。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://maven.apache.org/POM/4.0.0"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.2.0</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <groupId>com.example</groupId>
    <artifactId>springBatchSample</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>springBatchSample</name>
    <description>springBatchSample</description>
    <properties>
        <java.version>17</java.version>
    </properties>
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-batch</artifactId>
        </dependency>

        <dependency>
            <groupId>com.h2database</groupId>
            <artifactId>h2</artifactId>
            <scope>runtime</scope>
        </dependency>
    </dependencies>

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

</project>

spring-boot-starter-batchを指定することでSpringBatch5系と必要なライブラリを導入してます。

またデータベースのはh2を使いますのでh2のライブラリを導入してます。

resources配下資材の準備

resources配下資材の作成をします。

アプリの設定を行うapplication.ymlを以下のように記述します。

spring:
  datasource:
    driver-class-name: org.h2.Driver
    url: jdbc:h2:mem:testdb
    username: sa
    password:
sql:
  init:
    schema-locations: classpath:sql/schema-all.sql

passwordは未入力で大丈夫です。

サンプル用のCSVファイルであるsample-data.csvを以下のように記述します。

Jill,Doe
Joe,Doe
Justin,Doe
Jane,Doe
John,Doe

データベース内にテーブルを作成するためのschema-all.sqlを以下のように記述します。

DROP TABLE people IF EXISTS;

CREATE TABLE people
(
    person_id  BIGINT AUTO_INCREMENT PRIMARY KEY,
    first_name VARCHAR(20),
    last_name  VARCHAR(20)
);

ビジネスクラスの作成

データを保持するためのクラスであるPersonクラスを作成します。

package com.example.batchprocessing;

public record Person(String firstName, String lastName) {
}

recordクラスとして作成しているため、コンパイル時は以下のようなコードが生成されるのでコンストラクタやgetterを記述する必要がありません。

package com.example.batchprocessing;

public record Person(String firstName, String lastName) {
    public Person(String firstName, String lastName) {
        this.firstName = firstName;
        this.lastName = lastName;
    }

    public String firstName() {
        return this.firstName;
    }

    public String lastName() {
        return this.lastName;
    }
}

taskletクラスの作成

Taskletの実装クラスであるPersonTaskletを作成します。

package com.example.batchprocessing;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.batch.core.StepContribution;
import org.springframework.batch.core.scope.context.ChunkContext;
import org.springframework.batch.core.step.tasklet.Tasklet;
import org.springframework.batch.item.Chunk;
import org.springframework.batch.item.ItemStreamReader;
import org.springframework.batch.item.ItemWriter;
import org.springframework.batch.repeat.RepeatStatus;
import org.springframework.stereotype.Component;

@Component
public class PersonTasklet implements Tasklet {

    private static final Logger log = LoggerFactory.getLogger(PersonTasklet.class);

    final ItemStreamReader<Person> reader;

    final ItemWriter<Person> writer;

    public PersonTasklet(ItemStreamReader<Person> reader, ItemWriter<Person> writer) {
        this.reader = reader;
        this.writer = writer;
    }

    @Override
    public RepeatStatus execute(StepContribution contribution, ChunkContext chunkContext) throws Exception {

        Person person;

        Chunk<Person> personList = new Chunk<>();

        try {
            reader.open(chunkContext.getStepContext().getStepExecution().getExecutionContext());

            while ((person = reader.read()) != null) {
                String firstName = person.firstName().toUpperCase();
                String lastName = person.lastName().toUpperCase();
                Person transformedPerson = new Person(firstName, lastName);
                personList.add(person);
                log.info("Converting ({}) into ({})", person, transformedPerson);
            }

            writer.write(personList);

        } finally {
            reader.close();
        }
        return RepeatStatus.FINISHED;
    }
}

PersonクラスのfirstNameやlastNameにCSVファイルの各レコードが格納されます。

それらの値をUpperCaseに変換した上でListに格納し、writer.writeに引数として渡します。

ジョブ構成クラスの作成

バッチのジョブを構成するBatchConfigurationクラスを作成します。

package com.example.batchprocessing;

import org.springframework.batch.core.Job;
import org.springframework.batch.core.Step;
import org.springframework.batch.core.job.builder.JobBuilder;
import org.springframework.batch.core.repository.JobRepository;
import org.springframework.batch.core.step.builder.StepBuilder;
import org.springframework.batch.item.database.JdbcBatchItemWriter;
import org.springframework.batch.item.database.builder.JdbcBatchItemWriterBuilder;
import org.springframework.batch.item.file.FlatFileItemReader;
import org.springframework.batch.item.file.builder.FlatFileItemReaderBuilder;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.core.io.ClassPathResource;
import org.springframework.transaction.PlatformTransactionManager;

import javax.sql.DataSource;

@Configuration
public class BatchConfiguration {

    @Bean
    public Job job(JobRepository jobRepository, Step step1,
                   JobCompletionNotificationListener listener) {
        return new JobBuilder("taskletJob", jobRepository)
                .listener(listener)
                .start(step1)
                .build();
    }

    @Bean
    public Step step1(JobRepository jobRepository,
                      PlatformTransactionManager transactionManager, PersonTasklet personTasklet) {
        return new StepBuilder("personTasklet", jobRepository)
                .tasklet(personTasklet, transactionManager)
                .build();
    }

    @Bean
    public FlatFileItemReader<Person> reader() {
        return new FlatFileItemReaderBuilder<Person>()
                .name("personItemReader")
                .resource(new ClassPathResource("sample-data.csv"))
                .delimited()
                .names("firstName", "lastName")
                .targetType(Person.class)
                .build();
    }

    @Bean
    public JdbcBatchItemWriter<Person> writer(DataSource dataSource) {
        return new JdbcBatchItemWriterBuilder<Person>()
                .sql("INSERT INTO people (first_name, last_name) VALUES (:firstName, :lastName)")
                .dataSource(dataSource)
                .beanMapped()
                .build();
    }
}

jobメソッドでジョブを構成してます。

startでstep1を指定することで最初にstep1を実行するように指定してます。

またlistenerにJobCompletionNotificationListenerを登録することでジョブ完了後に指定した処理が行えるようにしてます。

step1メソッドではPersonTaskletをtaskletとして実行するように登録を行ってます。

readerメソッドとwriterメソッドはPersonTaskletで使用される処理になります。

readerメソッドはsample-data.csv読み込んでPersonクラスに値を設定します。

writerメソッドはpeopleテーブルのfirst_nameとlast_nameをインサートする処理になります。

ジョブ完了クラスの作成

ジョブ完了後に実行するJobCompletionNotificationListenerを作成します。

package com.example.batchprocessing;

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.batch.core.BatchStatus;
import org.springframework.batch.core.JobExecution;
import org.springframework.batch.core.JobExecutionListener;
import org.springframework.jdbc.core.DataClassRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;

@Component
public class JobCompletionNotificationListener implements JobExecutionListener {

    private static final Logger log = LoggerFactory.getLogger(JobCompletionNotificationListener.class);

    private final JdbcTemplate jdbcTemplate;

    public JobCompletionNotificationListener(JdbcTemplate jdbcTemplate) {
        this.jdbcTemplate = jdbcTemplate;
    }

    @Override
    public void afterJob(JobExecution jobExecution) {
        if (jobExecution.getStatus() == BatchStatus.COMPLETED) {
            log.info("!!! JOB FINISHED! Time to verify the results");

            jdbcTemplate
                    .query("SELECT first_name, last_name FROM people", new DataClassRowMapper<>(Person.class))
                    .forEach(person -> log.info("Found <{{}}> in the database.", person));
        }
    }
}

SpringApplication実行クラスの作成

最後にSpringBatchを実行するためのSpringBatchSampleApplicationを作成します。

package com.example.batchprocessing;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class SpringBatchSampleApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringBatchSampleApplication.class, args);
    }

}

実行すると以下の赤枠の通り、名字と名前がUpperCaseに変換されてます。

この記事では手順を説明させていただきます。

Playwrightとは

PlaywrightとはWebブラウザを自動操作するためのライブラリです。

自動操作ができるため、E2Eテストの効率化に用いられます。

Microsoftが開発してますが、EdgeだけでなくChrome、Firefox、Safariでも使用できます。

開発環境

後述の操作を行った時の環境は以下の通りとなります。

mavenを用意

Javaのコードを自動生成するためにはmavenが必要になるので用意します。

以下のページから「apache-maven-X.X.X-bin.zip」をダウンロードします（私がダウンロードしたのはバージョン3.9.3でした）。

Download Apache Maven – Maven

maven.apache.org

ダウンロードしたmavenを適当なフォルダに解凍します。

私は以下のように「C:\sample」に解凍しました。

続いてVSCodeのコンソールからmavenのコマンドが実行できるように環境変数を追加します。

以下のように「Path」にmavenのbinフォルダを追加します。

mavenプロジェクト作成

vscodeを起動してコマンドパレットから「Java:Create Java Project」を選択します。

「Maven create from archetype」を選択します。

「maven-archetype-quickstart」を選択します。

mavenのバージョンを選択します。

私は「1.4」を選択しました。

パッケージ名を入力します。任意の名称で大丈夫です。

ここでは「com.example」とします。

プロジェクト名を入力します。任意の名称で大丈夫です。

ここでは「demo」とします。

次に現在作成中のmavenプロジェクトの保存先を選択します。

ここでは「D:\Project\playwright_sample」とします。

続いてvscodeのターミナル上でコマンドが実行されるので入力を行っていきます。

ターミナル上で入力が必要な箇所のみ抜粋して以下に記載します。

Define value for property 'version' 1.0-SNAPSHOT: :　← 何も入力せずEnterキー押下。
 Y: :　← 何も入力せずEnterキー押下。

コード自動生成

作成したmavenプロジェクトのフォルダをvscodeで開きます。

pom.xmlのdependenciesタグ内に以下の緑字を追加します。

今回はplaywrightの1.35.1をインストールしてます。

  <dependencies>
    …
    <dependency>
      <groupId>com.microsoft.playwright</groupId>
      <artifactId>playwright</artifactId>
      <version>1.35.1</version>
    </dependency>
  </dependencies>

vscodeのターミナル上でpom.xmlがある場所に移動します。

その後に以下のコマンドを実行します。

今回は例としてamazonでの操作内容を自動生成するために「www.amazon.co.jp」を指定してます。

mvn exec:java -e -D exec.mainClass=com.microsoft.playwright.CLI -D exec.args="codegen www.amazon.co.jp"

以下のようにブラウザが立ち上がります。

右側に表示されてるPlaywright Inspectorに自動生成されたコードが出力されます。

実際にコードの自動生成を行った様子は以下の通りです。

Amazonで「アーマードコア6」を検索してみました😁

Playwright Inspectorに自動生成されたコードが出力されてます。

自動生成されたコードは以下のものとなります。

import com.microsoft.playwright.*;
import com.microsoft.playwright.options.*;
import static com.microsoft.playwright.assertions.PlaywrightAssertions.assertThat;
import java.util.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      Browser browser = playwright.chromium().launch(new BrowserType.LaunchOptions()
        .setHeadless(false));
      BrowserContext context = browser.newContext();
      Page page = context.newPage();
      page.navigate("https://www.amazon.co.jp/");
      page.getByPlaceholder("検索 Amazon.co.jp").click();
      page.getByPlaceholder("検索 Amazon.co.jp").fill("アーマードコア６");
      page.getByPlaceholder("検索 Amazon.co.jp").press("Enter");
      Page page1 = page.waitForPopup(() -> {
        page.getByRole(AriaRole.LINK, new Page.GetByRoleOptions().setName("【PS5】ARMORED CORE Ⅵ FIRES OF RUBICON 【数量限定特典】MELANDER C3 G13 特別仕様「TENDERFOOT」 同梱")).first().click();
      });
      page1.getByRole(AriaRole.BUTTON, new Page.GetByRoleOptions().setName("今すぐご予約ください")).click();
    }
  }
}

JavaScriptのコード自動生成

JavaScriptの場合はmavenなど何も必要がなく、以下のコマンドを実行するだけです。

npx playwright codegen www.amazon.co.jp

修理キットを購入して修理したら約1,000円で治せました（任天堂に修理依頼出すと4,400円と高いし時間かかる・・・）

この記事ではどのようにして修理したかを紹介しますね😁

修理キットの購入

自分で修理するのにドライバーとかを用意するとサイズが合わず再度購入・・・

といったことが目に見えてたので、楽天市場でセット商品を購入しました。

修理するのに必要な道具が全部付いてます👍

楽天の買い回りセールとSPUを使って購入したので、当時は定価1,340円のところポイントが300ポイント程度ついて約1,000円で購入できました。

修理方法

修理キットを使った修理方法を説明しますね😀

ドライバが３本付属してますが、一番小さいドライバのみ使用しました。

ドライバで赤丸4箇所のネジを外します。

ネジは小さいのでティッシュの上などに置いて無くさないようにすると良いです。

手でコントローラーのフタを少し開けます。

あまり空けすぎると折れてしまうので力を入れすぎないように。

隙間に修理キットに付属してるヘラを差し込みます。

ヘラを差し込んだ時の状態を別角度から写してます。

蓋を開けたらリチウム電池を外します。

リチウム電池の隙間にヘラを差し込みます。

ヘラを差し込んだ時の状態を別角度から写してます。

ドライバで赤丸5箇所のネジを外します。

次の画像状態にするために矢印方向（逆時計回り）にパーツを回します。

パーツを回したことで動線がつながった状態で基盤が見えました。

次にピンセットを使います。

赤丸の灰色部分をピンセットでつまみ、次の画像のように右側に倒します。

灰色部分を右側に倒した状態です。

ピンセットで銅線をつまんで引き抜きます。

今度は赤丸の黒色部分をピンセットでつまみ、左側に倒します。

ピンセットで銅線をつまんで引き抜きます。

赤丸2箇所のネジを外します。

片方だけ一気に外すと上手く外れないため、交互に2つのネジを回して徐々に外していきます。

なお、左下のネジは銅線を持ち上げながら外してください。

赤丸がスティック部分になります。これを素手で取り外します。

修理キットに付属している新しいスティックをはめ込みます。

今度は先程までと逆の手順を踏んでコントローラーを組み立てます。

赤丸箇所のネジをはめます。

ピンセットで銅線をつまんで元の位置に差し込みます。

赤丸の黒色部分をピンセットでつまみ、右側に倒してロックします。

こちらの銅線もつまんで元の位置に差し込みます。

赤丸の灰色部分をピンセットでつまみ、左側に倒してロックします。

もし画像のようにL（R）ボタンが外れてしまった時についても説明します。

赤丸箇所にバネをはめ込みます。

また、青丸箇所のようにL（R）ボタンの突起箇所をコントローラー本体部分に差し込んでロックするようにします。

矢印方向（時計回り）にパーツを回します。

パーツを元の位置に戻したら、赤丸5箇所のネジをはめます。

リチウム電池を元の位置に戻します。

赤丸4箇所のネジをはめたら終了です。

あとはSwitchで動作確認をしましょう。

なお、私は当時以下の動画を見ながら修理しましたので参考までに貼っておきますね😀

生まれたばかりでマイナンバーカードもなかったため、子供の保険証と医療証でスマホアプリから口座開設をしました。

この記事ではその時の手順を説明していきたいと思います。

口座開設の申し込みページ表示

まずはWebページから口座開設の申し込みを行う必要があります。

12歳以下の子供限定ですが、以下のページから申し込みし、開設した口座に入金をすると1,000円もらえるのでオススメです！

https://www.rakuten-bank.co.jp/account/campaign/kids/

www.rakuten-bank.co.jp

上記ページから申し込みボタンを押すと口座開設申込情報入力画面が表示されます。

口座開設申込情報で何を入力したか

12歳以下の子供の口座を申し込みの場合は、「お客さま情報」と「その他お客さま情報」に子供の情報を入力します。

余談ですが我が家の息子は当時0歳児だったので無職を選択しました😀。

次にキャッシュカードの選択ですが、16歳未満の場合はデビットカードとクレジットカードは作れません。そのため楽天銀行キャッシュカード一択となります。

16歳以上の場合はデビットカード機能付きのものが作成できます。

18歳以上の場合はクレジットカード機能付きのものが作成できます。

しかし、デビットカードやクレジットカード機能付きの楽天銀行カードを保持した状態で、楽天カードや楽天プレミアムカードを作成したり、家族カードを作成したりすることができません。

自由度が低くなるため、16歳以上の場合でも楽天銀行キャッシュカードを作成することをオススメします。

以下のページに楽天銀行カード（楽天カード一体型）を保持した状態で楽天カードを2枚目のカードとして持てないことが書いてます。

https://help.rakuten-bank.net/faq/show/13967?site_domain=individual

help.rakuten-bank.net

続いて「本人確認書類と提出方法の選択」で提出書類を選択します。

「住民票写しの原本」を選択すると郵送のみ可能です。

子供の本人確認書類は以下のものから2点選択します。

• マイナンバーカード
• パスポート
• 住民基本台帳カード
• カード型健康保険証
• 各種福祉手帳

申し込みページの更新が追いついてないのか、医療証の選択欄が存在せず「あれ？」と思いますが、医療証を本人確認書類として使用したい場合は「各種福祉手帳」を選択してもらえれば大丈夫です。

私は「カード型健康保険証」と「各種福祉手帳」を選択して「カード型健康保険証」と「医療証」の写真を提出しました。

なお、以下のページ上でも医療証は本人確認書類として使えることが書かれてます。

口座開設 本人確認書類｜楽天銀行

楽天銀行の口座開設お申込後、本人確認書類の提出は「楽天銀行アプリ」から行うのがおすすめ。本人確認書類を撮影して送信するだけ！郵送での提出より約5日も早く口座開設できるので、すぐに取引を始めたいかたはぜひご利用ください。

www.rakuten-bank.co.jp

親権者の本人確認書類は以下のものから2点選択します。

• 運転免許証/運転履歴証明書
• マイナンバーカード
• パスポート
• 住民基本台帳カード
• カード型健康保険証
• 各種年金手帳/各種福祉手帳
• 公共料金の領収書/国税又は地方税の領収書等

私は「運転免許証/運転履歴証明書」と「マイナンバーカード」を選択して「運転免許証」と「マイナンバーカード」の写真を提出しました。

書類提出方法の選択は「スマートフォンアプリで送付する」を選択しました。

「スマートフォンアプリで送付する」を選択した場合、楽天銀行アプリをインストールする必要があります。

楽天銀行アプリで残高照会や振込がもっと簡単に｜楽天銀行

楽天銀行アプリは振込手続きが２４時間可能！スマートフォンアプリなら、楽天銀行をもっと便利に使えます。楽天銀行（旧イーバンク銀行）

www.rakuten-bank.co.jp

なお、子供が12歳以下の場合は「スマートフォンアプリで送付する」か「郵送で提出する」のいずれかになります。

13歳以上の場合は、上記2つの提出方法に加え、「配達員へ提示する」方法があります。

入力を全て行い、申込完了まで進むと、楽天銀行から申込受付を知らせるメールが届きます。

そのメール内に登録番号とアクセスキーが書いてるのですが、楽天銀行アプリから必要書類を提出する際に使うので無くさないでくださいね💦

楽天銀行アプリから必要書類を提出

スマホから楽天銀行アプリを起動します。

ログイン画面を表示し、画面中央の「本人確認書類などを送る」をタップします。

画面中央の「口座開設」をタップします。

楽天銀行からのメールに記載がある登録番号とアクセスキー、子供の生年月日を入力します。

次に口座申込時に選択した本人確認書類を選択します。

ここでも申し込みページと同じく更新が追いついてないのか、医療証の選択欄が存在しません。

医療証を子供の本人確認書類として使用したい場合は「各種福祉手帳」を選択してもらえれば大丈夫です。

私は子供の本人確認書類として「カード型健康保険証」と「各種福祉手帳」を選択し、「カード型健康保険証」と「医療証」の写真を提出しました。

親権者の本人確認書類は「運転免許証/運転履歴証明書」と「マイナンバーカード」を選択し、「運転免許証」と「マイナンバーカード」の写真を提出しました。

なお、「カード型健康保険証」は裏面の住所に現住所が記載されてる必要があります。

その他注意事項は以下のページに記載してるのでご参照ください。

口座開設 本人確認書類｜楽天銀行

楽天銀行の口座開設お申込後、本人確認書類の提出は「楽天銀行アプリ」から行うのがおすすめ。本人確認書類を撮影して送信するだけ！郵送での提出より約5日も早く口座開設できるので、すぐに取引を始めたいかたはぜひご利用ください。

www.rakuten-bank.co.jp

その後に書類の写真撮影を行い、提出することで必要書類の提出は完了となります。

申し込み内容と提出書類に問題なければ約1週間程度で口座情報が記載された書類とキャッシュカードが簡易書留で届きます👍

しかし、Reactの勉強をするにあたりデバッグできると理解が早まるのでVSCodeでデバッグできるようにしました。

そのため、同じ環境を作ろうとしてる方の手助けになれば幸いです🙇

開発環境

私が構築した時の開発環境は以下の通りとなります。

ソース構成

デバッグ環境を作った際のソース構成は以下の通りです。

• reactsample
  • .vscode
    • launch.json
  • node_modules
  • src
    • js
      • components
        • Header
          • Title.js
        • Footer.js
        • Header.js
        • Layout.js
      • main.js
    • index.html
    • main.min.js
  • package-lock.json
  • package.json
  • webpack.config.js

webpack.config.js

Reactは実行時にトランスパイルされるため、コンパイル前のソースにブレークポイントを配置してもデバッグできません。

そのため、SourceMapを使ってコンパイル前のソースでもデバッグできるようにします。

SourceMapはコンパイル前とコンパイル後の対応関係を示したものになります。

SourceMapが使えるようにwebpack.config.jsへ以下を追加します。

devtool: 'inline-source-map'

なお、上記の設定を入れるとブラウザの開発者ツール上で「webpack://」配下に「webpack」というフォルダが作成されます。

・設定前

・設定後

launch.json

VSCodeでデバッグ実行するために必要となるlaunch.jsonを作成します。

「実行とデバッグ」から「launch.jsonファイルを作成します。」のリンクをクリックします。

「Webアプリ（Chrome）」を選択します。

launch.jsonが作成されるので以下の緑文字を追加します。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}/src",
            "sourceMapPathOverrides": {
                "webpack:///*": "${webRoot}/*",
            }
        }
    ]
}

webRootはプロジェクト上のどこにソースファイルがあるかを指定する箇所になります。

今回のソース構成はsrcフォルダ配下にデバッグ対象のファイルがあるため、

webRootを「 “${workspaceFolder}/src”」としてます。

sourceMapPathOverridesはSourceMapとVSCode用のソースの場所を紐づける箇所です。

SourceMapは以下の画像の通り、「webpack://」配下にあるため「”webpack:///*”: “${webRoot}/*”」としてます。

デバッグ実行例

それではデバッグしてみましょう。

なお、以前は「Debugger for Chrome」という拡張機能がありましたが、今のVSCodeには標準でJavaScript Debuggerが入ってるためデバッグのために拡張機能を入れる必要はないです。

以下のコマンドを実行して開発モードでサーバを起動します。

webpack serve --mode development

ブレークポイントを配置して「F5」キーでデバッグ実行します。

ブラウザ上で画面操作をすると以下の例のようにブレークポイントで停止するようになります。