【Web開発講座#4】Javaサーブレットでログイン後の画面に遷移しよう！初心者でもできるRequestDispatcherの使い方

SHARE

Webシステム開発講座へようこそ！

今回は サーブレット を使って、ログイン画面から別画面への遷移を実装してみましょう。

「そもそもサーブレットって何？」という方にもわかるように、基礎から丁寧に解説していきます。

この記事は次のような方におすすめです：

  • JSPやサーブレットの学習を始めたばかりの方
  • SEとして何か「武器」を身につけたいと考えている方
  • サーブレットの仕組みや動作を理解したい方

前回の「CSSで画面をきれいに整える」講座をまだご覧になっていない方は、こちらからご確認ください。


【Web開発講座#3】CSSを使って画面をきれいに整えよう｜初心者向け実践課題つき！

目次 非表示

前回の課題の回答

課題１

画面の背景に影をつけ、立体的に見えるように変更してみてください。
ヒント：box-shadowプロパティを調べてみると良いでしょう。
CSSの文法や例を検索して、自分なりのデザインを作り上げてください。

例えば、以下のように .login-container にプロパティを追加すると、影がつき、角が丸くなってより見やすくなります。

.login-container {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
}

課題2：ボタンにカーソルを乗せたときに変化をつけよう

ボタンにカーソルが当たるとポインタになるように変更してみてください。
ヒント：CSSの cursor プロパティを使うと、ユーザーへのフィードバックが改善されます。

また、色の変化を加えることで、よりわかりやすいUIになります。

.login-button:hover {
  background-color: #555;
  cursor: pointer;
}

サーブレットについて

サーブレット（Java Servlet）とは、Webサーバ上（バックエンド）で動作するJavaプログラムのことです。
ユーザーの操作に応じて動的にWebページを生成し、配信するための仕組みとして利用されます。

サーブレットを使うことで、以下のような処理が可能になります：

  • 利用者の入力に応じた画面表示（例: ログイン機能や検索結果の表示）
  • 画面遷移や処理の振り分け
  • セッション管理（ログイン状態やカート情報の保持）
  • データベースや外部APIとの連携

画面遷移について

画面遷移とは？

画面遷移とは、ユーザーがアプリケーション内である画面から別の画面へ移動する一連の動作のことです。
ボタンをクリックしたり、リンクを押したり、フォームを送信したりすることで、別の画面が表示される仕組みですね。

画面遷移が行われる一般的な流れは、以下のとおりです：

  • ユーザーの入力（例：ボタンのクリック）
  • リクエスト送信（サーバーにリクエストを送る）
  • サーバーのレスポンス（画面遷移の指示が返される）
  • 新しい画面の表示（新しい画面がユーザーに表示される）

たとえば、ログイン画面で「ログイン」ボタンをクリックすると、
サーバーに「ログイン処理をして、成功したらメニュー画面を表示してほしい」というリクエストが送られます。
サーバーはリクエストに基づいて処理を行い、ログイン成功時はメニュー画面へ遷移させる…といった形です。

画面遷移の種類

画面遷移には主に2つのタイプがあります。

  • サーバーサイド遷移（サーバー側で処理を行い、画面が切り替わる）
  • クライアントサイド遷移（JavaScriptやクライアントサイドの技術を使って画面が切り替わる）

サーバーサイド遷移は、サーバーが処理をした後、別のページをユーザーに表示する方法です。サーブレットで実装することが多いです。今回のシステムで実装するのはコレになります。

画面遷移の具体的な例

  • ログイン画面 → メニュー画面
    ユーザーがログインフォームを入力し、送信ボタンを押すと、ログイン認証後にメニュー画面が表示される。
  • 商品一覧 → 商品詳細ページ
    ユーザーが商品をクリックすると、その商品の詳細情報を表示するページに遷移する。

サーブレットを利用した画面遷移を実装

完成図

それでは実際にサーブレットを利用して画面遷移を実装していきます。
今回の完成図のイメージはコチラ。

ログインボタンを押下することでメニュー画面を表示できるようにします。

作成準備

先にメニュー画面を作成しましょう。プログラムは以下の通りです。

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>暗記沼</title>
    <link rel="stylesheet" href="css/menu.css">
</head>
<body>
    <div class="menu-container">
        <h1>メニュー画面</h1>
        <div class="menu-buttons">
            <button class="menu-button">問題作成</button>
            <button class="menu-button">成績確認</button>
            <button class="menu-button">トレーニング</button>
            <button class="menu-button">各種設定</button>
        </div>
        <button class="menu-button logout">ログアウト</button>
    </div>
</body>
</html>

/* 基本のリセット */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 全体のスタイル */
body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
}

/* メニュー画面のスタイル */
.menu-container {
    width: 800px;
    height: 500px;
    padding: 2rem;
    background-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ヘッダーのスタイル */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.9rem;
    color: #333;
}

.user-id {
    font-weight: bold;
}

.date {
    font-weight: bold;
}

/* メニュータイトルのスタイル */
.menu-container h1 {
    margin-bottom: 1rem;
    font-size: 1.5rem;
    color: #333;
}

/* ボタンの2列レイアウト */
.menu-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

/* 各メニューボタンのスタイル */
.menu-button {
    padding: 0.75rem;
    font-size: 1rem;
    background-color: #333;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.menu-button:hover {
    background-color: #555;
}

/* ログアウトボタンをメニューの最下部に配置 */
.logout {
    background-color: #d9534f;
    width: 80%;
    margin: 1rem auto 0;   /* 上部にマージンを入れ、中央寄せ */
}

.logout:hover {
    background-color: #c9302c;
}

ログイン成功後に表示されるmenu画面です。ユーザーに次の操作を選択してもらうためのメニュー画面として、今後は「新規登録」や「検索画面」などの機能へつながるようなリンクを設置する予定です。

サーブレットを作成する手順

最初はまず、サーブレットの作成を行いましょう。

STEP.1
サーブレットの作成

「src」フォルダ（通常はプロジェクトエクスプローラー内に表示されます）上で右クリックし、「新規」＞「その他」を選択します。

STEP.2
パッケージの設定

「Javaパッケージ」を com.webpj.ankisystem、クラス名を LoginServlet に設定します。パッケージ名は、小文字で「.（ドット）」を使って階層を表現します。このようにすることで、コードの整理がしやすくなり、プロジェクトが大きくなっても管理が簡単になります。

パッケージは、プロジェクトが複雑になったときにクラスを整理・管理するためのフォルダのようなものです。
STEP.3
サーブレットの完成

作成後、以下のようなコードが自動生成されます。この状態で、ブラウザを使って動作を確認してみましょう。

package com.webpj.ankisystem;

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    /**
     * @see HttpServlet#HttpServlet()
     */
    public LoginServlet() {
        super();
        // TODO Auto-generated constructor stub
    }

    /**
     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        response.getWriter().append("Served at: ").append(request.getContextPath());
    }

    /**
     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
     */
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
        doGet(request, response);
    }

}
STEP.4
完成！実行して確認

完成後、http://localhost:8080/AnkiSystem/LoginServlet にブラウザでアクセスして「Served at: …」と表示されれば成功です。

コード解説

ここでは @WebServlet("/LoginServlet") を使って、LoginServlet.java が /LoginServlet というURLに対応するよう設定しています。このアノテーションを使うことで、web.xmlへの記述なしでサーブレットのURLを指定できます。

補足：

今回のServletでは、GETメソッドで処理を行っていますが、POSTメソッドで送信された場合も doPost() メソッドを通じて同じ処理が実行されるようになっています。実際の開発では、GETとPOSTで別々の処理をするケースも多く、今後の講座で詳しく解説します。

login.jspをサーブレット対応に修正しよう

サーブレットの作成が完了したので、次はJSP側からサーブレットを呼び出す処理を実装していきましょう。以下に、前回作成した login.jsp の修正後のコードを表示します（修正箇所のみを抜粋）。

修正後のJSPコード

<form action="/AnkiSystem/LoginServlet" method="GET">
     <div class="form-group">
         <label for="username">ユーザー名</label>
         <input type="text" id="username" name="username">
     </div>
     <div class="form-group">
         <label for="password">パスワード</label>
         <input type="password" id="password" name="password">
     </div>
 <button type="submit" class="Login-button">ログイン</button>
</form>

修正のポイント

  • form タグの action 属性で、入力されたユーザー情報を LoginServlet に送信しています。これにより、ユーザーがログインボタンを押すと、LoginServlet が呼び出されて画面遷移処理が行われます。
  • method="GET" を設定することで、ユーザーが入力したデータをURLパラメータとして送信します。methodにはGETとPOSTがあり、それぞれの違いについては次回以降の記事で詳しく説明します。

フォームの役割と注意点

  • <form> タグは、ユーザーが入力したデータをサーバーに送信するための仕組みです。
  • GETメソッドはURLにデータを表示するため、機密性の高い情報（例: パスワード）の送信には注意が必要です。この例では学習目的で使用しています。

動作確認

修正が完了したら、ブラウザでフォームを送信してみましょう。URLに以下のような形式でデータが表示されれば成功です。

http://localhost:8080/AnkiSystem/LoginServlet?username=入力した値&password=入力した値

サーブレットの実装

それではサーブレット側の方の実装を行いましょう。
LoginServlet.javaの一部を以下のように変更します。

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    RequestDispatcher dispatcher  = request.getRequestDispatcher("/menu.jsp"); // menu.jsp への遷移を設定
    dispatcher.forward(request, response); // リクエストとレスポンスを menu.jsp に転送
}
ポイント解説
  1. RequestDispatcherクラスの役割 RequestDispatcher クラスを使用して、現在のリクエストを menu.jsp に転送します。これにより、サーブレットから次の画面への遷移が可能になります。
  2. 遷移の具体的な流れ
    • request.getRequestDispatcher("/menu.jsp"): 遷移先の画面（この場合は menu.jsp）を指定します。
    • dispatcher.forward(request, response): 現在のリクエストデータとレスポンスを menu.jsp に渡して画面遷移を実現します。
    • 今回は、リクエストとレスポンスの情報をそのまま渡したいので forward() を使用しています。これにより、リクエストスコープの値もそのまま次の画面に引き継がれます。逆に sendRedirect() は新しいリクエストとして扱われるため、情報は引き継がれません。
動作確認

修正が完了したら、ログイン画面で「ログイン」ボタンを押してみましょう。正しく設定されていれば、ログイン画面から menu.jsp に遷移するはずです。ブラウザのURLや表示内容を確認してください。

 

課題

講義を受けるだけでは本当に一人前にはなれません。自分で調べ、手を動かして実践することが何よりも大切です。
以下の課題に挑戦し、ぜひネットで調べながら完成させてみましょう。

課題 1

「ログアウト」ボタンを押すと、ログイン画面に遷移するようにしてください。

課題 2

ログイン成功時、ログインしたユーザー名をメニュー画面に表示するようにしてください。
ヒント: サーブレットでリクエストスコープ（request.setAttribute）を使用してデータを渡し、JSPでそのデータを表示する仕組みを考えてみましょう。

さいごに

今回の内容はいかがでしたでしょうか？
課題2では、セッションの活用方法が重要なポイントになります。
この部分は、次回の講義で詳しく解説しますので、お楽しみに！

「ここがうまくいかない…」「こういう場合はどうするの？」など、
分からないことや気になる点がありましたら、ぜひお気軽にコメントください！
あなたの疑問が、他の方の学びにもつながります。

「記事の更新を待てない！」「すぐに動画で学びたい！」という方には、Udemyでの動画学習がおすすめです。
私自身も利用して、基礎から応用までしっかりと学べたので、非常に助かりました！ぜひ一度チェックしてみてください。
多彩な講座から自分に合った講座を探そう！

Udemyについてもっと詳しく知りたい方は、こちらもどうぞ！


おすすめの教材【Udemy】の紹介！！利用時のおすすめも含めて

コメントを残す

メールアドレスが公開されることはありません。 ※ が付いている欄は必須項目です


reCaptcha の認証期間が終了しました。ページを再読み込みしてください。

前の記事

スマート家電デビューに最適！SwitchBot製品の魅力につい…

次の記事

【図解付き】簡単！SwitchBot ボットの設定方法を解説