【Webシステム開発】サーブレットで画面遷移を実装しよう！

SHARE

Webシステム開発講座へようこそ！
今回は サーブレット を利用して、画面遷移の機能を実装していきます。

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

  • JSPをこれから勉強しようとしている人
  • SEとして何か「武器」を身につけたい方
  • サーブレットの仕組みがよくわからない方

前回の画面作成の記事をまだ読んでいない方は、こちらからご確認ください。


【Webシステム開発】cssを利用して画面の見栄えをよくしよう！！

目次 非表示

前回の課題の回答

課題１

画面の背景に影をつけ、立体的に見えるように変更してみてください。
ヒント：box-shadowプロパティを調べてみると良いでしょう。
CSSの文法や例を検索して、自分なりのデザインを作り上げてください。
.login-containerへ以下のプロパティを付与しましょう。「border-radius」を加えることで角を丸めてより見やすくしました、
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 border-radius: 8px;

課題2

ボタンにカーソルが当たるとポインタになるように変更してみてください。
.login-button:hover {
   background-color: #555;
}

サーブレットについて

サーブレット（Java Servlet）とは、Webサーバ上（バックエンド）で動くプログラムのことで、プログラミング言語のJavaを使って作成されています。 動的なWebページの配信システムを実現するためのJavaプログラムです。

サーブレットを利用すると以下のようなことが可能です

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

画面遷移について

画面遷移とは？

画面遷移は、Webアプリケーションやモバイルアプリケーションにおいて、ユーザーがある画面から別の画面へ移動するプロセスを指します。ユーザーが行う操作（ボタンをクリックする、リンクを選択する、フォームを送信するなど）によって、新しい画面が表示されることが「画面遷移」です。

画面遷移はユーザーが何らかの操作を行うことで発生します。一般的な流れは次の通りです。

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

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

画面遷移の種類

画面遷移には主に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;
}

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

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

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: …」と表示されれば成功です。

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 属性で、データ送信先を /AnkiSystem/loginServlet に指定しています。
  • method="GET" を設定することで、ユーザーが入力したデータをURLパラメータとして送信します。

フォームの役割と注意点

  • <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 {
    //request.getDispatcherType()
    RequestDispatcher dispatcher  = request.getRequestDispatcher("/menu.jsp");
    dispatcher.forward(request, response);
}

ポイント解説

  1. RequestDispatcherクラスの役割 RequestDispatcher クラスを使用して、現在のリクエストを menu.jsp に転送します。これにより、サーブレットから次の画面への遷移が可能になります。
  2. 遷移の具体的な流れ
    • request.getRequestDispatcher("/menu.jsp"): 遷移先の画面（この場合は menu.jsp）を指定します。
    • dispatcher.forward(request, response): 現在のリクエストデータとレスポンスを menu.jsp に渡して画面遷移を実現します。

動作確認

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

 

課題

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

課題 1

ログアウトボタンでログイン画面へ遷移するようにしてください。

課題 2

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

今回の内容はいかがでしたでしょうか？
課題2については、セッションの活用方法がポイントになりますので、次回の講義で詳しく解説します！
もし分からないことや気になる点がありましたら、ぜひお気軽にコメントやご意見をお寄せください。お待ちしております！

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

Udemyについての詳しい記事はコチラをご参照ください。


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

コメントを残す

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

前の記事

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

次の記事

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