🟢 はじめに
これまでの連載で、Spring Bootを使ったタスク管理アプリの「CRUD機能（作成・読取・更新・削除）」が完成し、さらにCSSを使って「北欧カフェ風」の温かみのあるデザインへのリフォームを行いました。
前回の記事はこちら👇
今回は、いよいよバックエンド開発において最もやりがいのある領域、アプリを外部の脅威から守る「鉄壁の結界（Spring Security）」のクエストに挑戦します🛡️
今回は【前編】として、Spring Securityの強力なデフォルト機能を体験し、さらに無骨なログイン画面を「自分だけのオシャレな関所（入り口）」にリフォームするまでの道のりをお届けします！
🚪 「結界」の注文を書き込む
（
Mavenの場合）pom.xmlを開いてください。（
Gradleの場合）build.gradleを開いてください。
まずは、Spring Bootに「セキュリティの機能を使います！」と伝えるために、プロジェクトの設定ファイル（pom.xml）にコードを追記します。
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-security</artifactId> </dependency> <dependency> <groupId>org.thymeleaf.extras</groupId> <artifactId>thymeleaf-extras-springsecurity6</artifactId> </dependency>
VSCodeは、JavaやHTMLの自動整形は得意なのですが、設定や入れている拡張機能によっては「XMLファイル」の保存時（Ctrl + S）に自動整形が発動しないことがよくあります。
プログラム（Maven）は、スペースの数や改行のズレは一切気にせずに文字を読み取ってくれるので、機能としてはこのままでOKなのですが、「どうしても見た目を綺麗に揃えたい！」という場合は、
VSCodeのコード整形ショートカット：
Shift + Alt + F
（Macの場合はShift + Option + F）
を押してみてください。
もし上のようなポップアップが出てきたら、
ポップアップの 「フォーマッタをインストール(I)...」 をクリックします。
すると、VSCodeの左側のメニュー（拡張機能の検索欄）が開き、いくつかの候補が表示されます。
一番上に出てくる、Red Hat が提供している 「XML」 という拡張機能（赤いアイコンが目印です）が業界標準で最もよく使われているため、それを選んで「インストール」を押すのが一番おすすめです。
インストールが完了したら、もう一度 pom.xml の画面に戻って Shift + Alt + F を押してみてください。
🤔 こんなポップアップが出てきたら？
メッセージには、
「A build file was modified. Do you want to synchronize the Java classpath/configuration?（ビルドファイルが変更されました。Javaの設定を同期しますか？）」
と書かれています。
pom.xml は「取り寄せ注文書」です。
今回、注文書に新しく「Spring Securityのコード」を書き込んで保存（Ctrl + S）したため、VSCodeの裏にいる案内人（Javaのシステム）が、
「おっ、注文書（
pom.xml）が書き換えられましたね！今すぐ新しいシステム（Spring Securityのシステム）をインターネットからダウンロードして、使えるように準備（同期）してもいいですか？」
と聞いてくれている状態です。
✅ ボタンを押してシステムを取り寄せる
ここでは、「Always（常に）」 をクリックするのが一番おすすめです！
「Always」を選んでおくと、今後また新しいコード（機能）を pom.xml に書き足した時、いちいち聞いてこなくても「保存されたら自動で裏側でダウンロードしておくね！」という超便利な全自動設定になります。 （※もちろん「Yes」でも今回は問題なく進みます！）
ボタンを押すと、右下でローディングのアイコンが回り、Spring Securityの機能があなたのアプリに組み込まれます。
💻 サーバーを再起動
サーバーを再起動します。
そして、いつものタスク一覧画面（http://localhost:8080/tasks）にアクセスしてみると……？
タスク一覧画面には行けず、「見慣れないログイン画面」に強制的に飛ばされてしまいました😲
自分でIf文などを一切書いていないのに、アプリの全ページに強力な鍵（結界）がかかりました。
これがSpring Securityのデフォルト機能です。
🔑 ターミナルから「合言葉」を探し出す
「えっ、パスワードなんて設定してないけど！？」と焦るかもしれませんが、大丈夫です。
VSCodeのターミナル（黒い画面）のログをよく見てみると……
Using generated security password: xxxx-xxxx-xxxx-xxxx
という、ランダムな合言葉が生成されています。
ログイン画面に戻り、
Username：user（デフォルトのID）
Password：ターミナルで見つけた合言葉
を入力すると……
無事にいつものタスク一覧画面にログインすることができました！
🎨 防空壕のような入り口を「カフェ風の関所」へ
結界は強力ですが、今の入り口はコンクリートむき出しの防空壕のようで、せっかく作った「北欧ナチュラルデザイン」の世界観が台無しです😅
そこで、「北欧カフェ風のおしゃれなドア（オリジナルログイン画面）」にリフォームを行います。
① 関所の番人（SecurityConfig）を配置する
Spring Securityに「細かいルール」を教えるための SecurityConfig.java を作成します。
src/main/java/com/kenichikamoi/taskapp/の中に、新しくconfigというフォルダ（パッケージ）を作ります。（controllerやentityと同じ階層です）その中に
SecurityConfig.javaを作成し、以下のコードを書き込みます。
@Configuration @EnableWebSecurity public class SecurityConfig { @Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http .authorizeHttpRequests(authz -> authz .requestMatchers("/css/**").permitAll() // 👈 超重要！CSSは誰でも通してね！ .anyRequest().authenticated() ) .formLogin(login -> login .loginPage("/login") // オリジナルのログイン画面を使う！ .defaultSuccessUrl("/tasks", true) .permitAll() ); return http.build(); } }
💡 CSSが効かない！？
.requestMatchers("/css/**").permitAll() を書き忘れると、Spring Securityは「デザインのファイルを取りに行く通信」すらも結界で弾いてしまい、画面が真っ白に崩れてしまいます。
「デザインの配達員さんは通してあげてね」という大切なルールです。
② ログイン画面への案内人（Controller）を作る
「オリジナルの /login 画面を使ってね」と設定したので、その画面に案内してくれるControllerを作ります。
controller フォルダの中に、新しく AuthController.java を作成します。（※タスク用と分けることで、コードが整理されて綺麗になります）
package com.kenichikamoi.taskapp.controller; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; @Controller public class AuthController { @GetMapping("/login") public String login() { return "login"; // 「login.html」という景色（画面）を返す魔法 } }
③ カフェ風のログイン画面（login.html）を作る
最後に、templates フォルダの中に、新しく login.html を作成します。
前回導入した『Caveat』（手書き風の筆記体フォント）を活かして、おしゃれなログイン画面を作ります。
<!DOCTYPE html> <html lang="ja" xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>ログイン - Quest Menu</title> <!-- カフェ風デザインのコードを読み込む --> <link rel="stylesheet" th:href="@{/css/style.css}"> </head> <body> <div class="container"> <!-- おしゃれなCaveatフォントを活かしたタイトル --> <h1><span class="en-title">Login</span><br>ギルドへの入場</h1> <!-- パスワードを間違えた時に表示される赤い警告メッセージ --> <div th:if="${param.error}" style="color: #d9534f; text-align: center; margin-bottom: 20px;"> ユーザー名かパスワードが間違っています。 </div> <!-- ログインフォーム --> <!-- th:action="@{/login}" を使うことで、安全な通信（CSRF対策）が自動で行われます --> <form th:action="@{/login}" method="post"> <div style="margin-bottom: 20px;"> <input type="text" name="username" placeholder="ユーザー名 (現在は user)" required> </div> <div style="margin-bottom: 20px;"> <input type="password" name="password" placeholder="パスワード (合言葉)" required> </div> <button type="submit">入場する</button> </form> </div> </body> </html>
🔄 いざ、オリジナル結界の動作確認
これらをすべて保存したら、サーバーを再起動してブラウザで http://localhost:8080/tasks にアクセスしてみてください。
あの無骨なコンクリートの画面の代わりに、「北欧カフェ風のおしゃれなログイン画面」が表示されれば成功です。
※ログインに使うID（user）とパスワード（起動ごとの合言葉）は、先ほどと同じようにターミナルから拾って入力してみてください。
無骨だったデフォルトの画面から一転、インクの温もりを感じるフォントと丸みを帯びた入力フォームが美しい、「北欧ナチュラルデザインの関所」が完成しました。
🗺️ 次回予告
今の状態は「起動するたびにターミナルに表示されるパスワード」を使っています。
実務のアプリでは、こんなことはあり得ませんよね。
次回【後編】では、いよいよ「MySQL（データベース）の中にユーザー名と暗号化されたパスワードを保存し、それと照らし合わせてログインする仕組み」へと進化させたいと思います。
ハッカーの攻撃を防ぐ「BCryptの暗号化」や、Spring Securityの真骨頂である「IoC（制御の反転）」という設計思想について解説したいと思います。
【Java初心者の冒険録】Spring Bootアプリ開発
Javaの基礎を学んだものの、「どうやって実際のWebアプリを作ればいいの？」と迷っていませんか？この連載は、「Spring Boot」を使ってオリジナルの「タスク管理アプリ」をゼロから作り上げるまでの道のりを記録した開発手順まとめです。
冒険の最終目標（開発するアプリ）：「会員管理システムを拡張したタスク管理アプリ」
・基本の
CRUD（作成・読取・更新・削除）機能・
Spring Securityによるログイン・権限管理かつての自分と同じように悩む
Java初心者にとって、少しでも役立つ記事になれば幸いです。
【プロフィール・作品置き場】
Javaの学習記録や、ビジュアルノベル風のオリジナルAI楽曲などをポートフォリオで公開しています！
