0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

【Java研修】Servlet/JSP入門① 環境構築とはじめてのServlet

0
Posted at

はじめに

Webアプリケーション開発の基礎となる Servlet/JSP のハンズオン学習シリーズです。

このシリーズでは、Java研修で学んだ文法をベースに、実際に動くWebアプリケーションを作りながらServlet/JSPを習得していきます。

このシリーズの前提

  • Java基礎文法(変数、条件分岐、ループ、クラス、例外処理)を習得済み
  • HTMLの基本的な構造がわかる

第1回で学ぶこと

  • Webアプリケーションの仕組み(クライアント・サーバーモデル)
  • 開発環境の構築(Eclipse + Tomcat)
  • はじめてのServletを作成して動かす
  • Servletのライフサイクル

1. Webアプリケーションの仕組み

クライアント・サーバーモデル

┌──────────┐         HTTPリクエスト         ┌──────────────┐
│          │  ──────────────────────────→  │              │
│ ブラウザ  │                                │  Webサーバー   │
│(クライアント)│  ←──────────────────────────  │  (Tomcat)    │
│          │         HTTPレスポンス          │              │
└──────────┘                                └──────────────┘
  1. ブラウザが HTTPリクエスト を送信(例:http://localhost:8080/hello
  2. サーバーがリクエストを受け取り、処理を実行
  3. サーバーが HTTPレスポンス(HTML等)を返す
  4. ブラウザがレスポンスを表示

Servlet とは?

Servlet は、Javaでサーバーサイドの処理を書くための仕組みです。

  • HTTPリクエストを受け取る
  • ビジネスロジック(計算、DB操作など)を実行する
  • HTTPレスポンス(HTML)を返す
ブラウザ → Tomcat → Servlet(Javaクラス)→ HTML生成 → ブラウザに返す

2. 開発環境の構築

必要なもの

ツール 用途
JDK 17以降 Java実行環境
Eclipse(Pleiades All in One推奨) 統合開発環境
Apache Tomcat 10 Webサーバー(サーブレットコンテナ)

手順① JDKのインストール

JDKがインストール済みか確認します。

java -version

java version "17.x.x" のように表示されればOKです。

手順② Eclipse のインストール

Pleiades All in One を使うと、Eclipse + Tomcat + 日本語化がセットで入ります。

  1. Pleiades公式サイト にアクセス
  2. 「Eclipse 2024」→「Java」の Full Edition をダウンロード
  3. 解凍して eclipse.exe を起動

手順③ Tomcat の設定

Eclipse に Tomcat を登録します。

  1. Eclipse メニュー → ウィンドウ設定
  2. サーバーランタイム環境追加
  3. Apache Tomcat v10.1 を選択
  4. Tomcat のインストールディレクトリを指定

手順④ 動的Webプロジェクトの作成

  1. ファイル新規動的Webプロジェクト
  2. プロジェクト名:WebStudy
  3. ターゲット・ランタイム:Apache Tomcat v10.1
  4. 完了 をクリック

プロジェクト構成

WebStudy/
├── src/main/java/          ← Servletクラスを置く場所
│   └── servlet/
│       └── HelloServlet.java
├── src/main/webapp/        ← Webリソース
│   ├── WEB-INF/
│   │   └── web.xml         ← 設定ファイル
│   └── index.html          ← 静的ファイル
└── pom.xml / build.gradle  ← ビルドファイル(任意)

3. はじめてのServlet

HelloServlet を作成する

src/main/java に以下のクラスを作成してください。

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        // レスポンスの文字コードを設定
        response.setContentType("text/html; charset=UTF-8");

        // HTMLを出力
        PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE html>");
        out.println("<html>");
        out.println("<head><title>Hello Servlet</title></head>");
        out.println("<body>");
        out.println("<h1>Hello, Servlet!</h1>");
        out.println("<p>はじめてのServletが動きました。</p>");
        out.println("</body>");
        out.println("</html>");
    }
}

実行方法

  1. プロジェクトを右クリック → 実行サーバーで実行
  2. Tomcat v10.1 サーバー を選択 → 完了
  3. ブラウザで http://localhost:8080/WebStudy/hello にアクセス

表示結果

ブラウザに以下が表示されます:

Hello, Servlet!

はじめてのServletが動きました。


4. コードの解説

@WebServlet アノテーション

@WebServlet("/hello")

このServletが どのURLで呼ばれるか を指定します。/hello にアクセスすると、このServletが実行されます。

HttpServlet を継承

public class HelloServlet extends HttpServlet {

Servletは HttpServlet クラスを継承して作ります。HTTPメソッド(GET, POST等)に対応するメソッドをオーバーライドします。

doGet メソッド

protected void doGet(HttpServletRequest request, HttpServletResponse response)
引数 役割
HttpServletRequest request クライアントからのリクエスト情報
HttpServletResponse response クライアントへのレスポンス

レスポンスの出力

response.setContentType("text/html; charset=UTF-8");
PrintWriter out = response.getWriter();
out.println("<h1>Hello, Servlet!</h1>");
  1. setContentType でレスポンスの種類と文字コードを設定
  2. getWriter() で出力ストリームを取得
  3. println() でHTMLを出力

5. Servletのライフサイクル

Servletには3つのライフサイクルメソッドがあります。

init() → service() → destroy()
メソッド タイミング 回数
init() Servletが最初に呼ばれたとき 1回のみ
service() リクエストが来るたび(doGet/doPostを呼ぶ) 毎回
destroy() サーバー停止時 1回のみ

ライフサイクルを確認するServlet

package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/lifecycle")
public class LifecycleServlet extends HttpServlet {

    private int accessCount = 0;

    @Override
    public void init() throws ServletException {
        System.out.println("【init】Servletが初期化されました");
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        accessCount++;
        System.out.println("【doGet】アクセス回数: " + accessCount);

        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE html>");
        out.println("<html><body>");
        out.println("<h1>ライフサイクル確認</h1>");
        out.println("<p>このページへのアクセス回数: " + accessCount + "回目</p>");
        out.println("<p>ブラウザを更新(F5)して回数が増えることを確認してください。</p>");
        out.println("</body></html>");
    }

    @Override
    public void destroy() {
        System.out.println("【destroy】Servletが破棄されました");
    }
}

コンソール出力(例):

【init】Servletが初期化されました
【doGet】アクセス回数: 1
【doGet】アクセス回数: 2
【doGet】アクセス回数: 3
(サーバー停止時)
【destroy】Servletが破棄されました

ポイント: init() は最初の1回だけ、doGet() はアクセスのたびに呼ばれます。accessCount はServletのフィールドなので、リクエスト間で値が保持されます。


6. web.xml での設定(従来の方法)

@WebServlet アノテーションの代わりに、web.xml で設定する方法もあります。

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         version="6.0">

    <servlet>
        <servlet-name>HelloServlet</servlet-name>
        <servlet-class>servlet.HelloServlet</servlet-class>
    </servlet>

    <servlet-mapping>
        <servlet-name>HelloServlet</servlet-name>
        <url-pattern>/hello</url-pattern>
    </servlet-mapping>

</web-app>
方法 メリット デメリット
@WebServlet コードと設定が近くて見やすい XMLに一覧がない
web.xml 設定を一元管理できる コードと設定が離れる

現在のプロジェクトでは @WebServlet を使う方法が主流です。


練習問題

問題1:自己紹介Servlet ⭐

自分の名前・趣味・好きなプログラミング言語を表示するServletを作成してください。

  • URLパターン:/profile
  • HTMLの表(<table>)を使って整形
模範解答
package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/profile")
public class ProfileServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();

        out.println("<!DOCTYPE html>");
        out.println("<html><head><title>自己紹介</title></head>");
        out.println("<body>");
        out.println("<h1>自己紹介</h1>");
        out.println("<table border='1'>");
        out.println("<tr><th>項目</th><th>内容</th></tr>");
        out.println("<tr><td>名前</td><td>田中太郎</td></tr>");
        out.println("<tr><td>趣味</td><td>プログラミング</td></tr>");
        out.println("<tr><td>好きな言語</td><td>Java</td></tr>");
        out.println("</table>");
        out.println("</body></html>");
    }
}

問題2:現在時刻を表示するServlet ⭐

アクセスするたびに現在の日時を表示するServletを作成してください。

  • URLパターン:/now
  • java.time.LocalDateTime を使用
模範解答
package servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.time.LocalDateTime;
import java.time.format.DateTimeFormatter;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/now")
public class CurrentTimeServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();

        LocalDateTime now = LocalDateTime.now();
        String formatted = now.format(DateTimeFormatter.ofPattern("yyyy年MM月dd日 HH:mm:ss"));

        out.println("<!DOCTYPE html>");
        out.println("<html><body>");
        out.println("<h1>現在時刻</h1>");
        out.println("<p style='font-size: 24px;'>" + formatted + "</p>");
        out.println("<p><a href='/WebStudy/now'>更新する</a></p>");
        out.println("</body></html>");
    }
}

問題3:九九の表Servlet ⭐⭐

九九の表をHTMLテーブルで表示するServletを作成してください。

  • URLパターン:/kuku
  • <table> タグで整形して表示
模範解答
package servlet;

import java.io.IOException;
import java.io.PrintWriter;

import jakarta.servlet.ServletException;
import jakarta.servlet.annotation.WebServlet;
import jakarta.servlet.http.HttpServlet;
import jakarta.servlet.http.HttpServletRequest;
import jakarta.servlet.http.HttpServletResponse;

@WebServlet("/kuku")
public class KukuServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {

        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();

        out.println("<!DOCTYPE html>");
        out.println("<html><head><title>九九の表</title>");
        out.println("<style>");
        out.println("table { border-collapse: collapse; }");
        out.println("td, th { border: 1px solid #333; padding: 8px; text-align: center; width: 40px; }");
        out.println("th { background-color: #ddd; }");
        out.println("</style></head>");
        out.println("<body>");
        out.println("<h1>九九の表</h1>");
        out.println("<table>");

        // ヘッダー行
        out.println("<tr><th>×</th>");
        for (int j = 1; j <= 9; j++) {
            out.println("<th>" + j + "</th>");
        }
        out.println("</tr>");

        // 九九の各行
        for (int i = 1; i <= 9; i++) {
            out.println("<tr><th>" + i + "</th>");
            for (int j = 1; j <= 9; j++) {
                out.println("<td>" + (i * j) + "</td>");
            }
            out.println("</tr>");
        }

        out.println("</table>");
        out.println("</body></html>");
    }
}

まとめ

学んだこと キーワード
Webアプリの仕組み クライアント・サーバーモデル、HTTP
開発環境 Eclipse、Tomcat、動的Webプロジェクト
Servletの基本 HttpServletdoGet()@WebServlet
レスポンスの出力 setContentTypePrintWriter
ライフサイクル init()service()destroy()

次回は HTTPリクエストとレスポンス を詳しく学びます!


シリーズ一覧:Servlet/JSP入門

  1. 👉 環境構築とはじめてのServlet(本記事)
  2. HTTPリクエストとレスポンス
  3. JSPの基礎
  4. フォーム処理(GET/POST)
  5. セッション管理とCookie
  6. MVCパターン(Servlet + JSP)
  7. JDBC連携(データベース操作)
  8. EL式とJSTL
  9. フィルターとリスナー
  10. 総合演習:掲示板アプリを作ろう

著者: @kotaro_ai_lab
AI駆動開発やテック情報を毎日発信しています。フォローお気軽にどうぞ!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?