【Java研修】Servlet/JSP入門③ JSPの基礎

Posted at 2026-02-16

はじめに

Servlet/JSP入門の第3回は JSPの基礎 です。

前回までServletでHTMLを出力していましたが、out.println() でHTMLを1行ずつ書くのは大変でした。JSPを使えば、HTMLの中にJavaコードを埋め込む形で、より直感的にWebページを作成できます。

第3回で学ぶこと

JSPとは何か（Servletとの関係）
JSPの基本要素（スクリプトレット、式、宣言）
JSPディレクティブ（page、include、taglib）
JSP暗黙オブジェクト
JSPコメント
ファイルのインクルード

1. JSPとは？

JSP（JavaServer Pages）の概要

JSP は、HTMLの中にJavaコードを埋め込んで動的なWebページを作る技術です。

Servletの場合（Javaの中にHTMLを書く）:
  out.println("<h1>Hello</h1>");
  out.println("<p>名前: " + name + "</p>");

JSPの場合（HTMLの中にJavaを書く）:
  <h1>Hello</h1>
  <p>名前: <%= name %></p>

JSPとServletの関係

実は、JSPは内部的にServletに変換されて実行されます。

┌───────────┐    変換     ┌──────────────┐    コンパイル   ┌───────────┐
│  JSPファイル │  ──────→  │  Javaソース    │  ────────→   │  Servlet  │
│ (hello.jsp) │          │ (hello_jsp.java)│            │  (実行)    │
└───────────┘            └──────────────┘               └───────────┘

項目	Servlet	JSP
記述方法	Javaの中にHTMLを記述	HTMLの中にJavaを記述
向いている処理	ビジネスロジック、制御	画面表示（ビュー）
ファイル拡張子	`.java`	`.jsp`
配置場所	`src/main/java/`	`src/main/webapp/`

はじめてのJSP

src/main/webapp/hello.jsp を作成します。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head><title>はじめてのJSP</title></head>
<body>
    <h1>Hello, JSP!</h1>
    <p>現在時刻: <%= new java.util.Date() %></p>
</body>
</html>

ブラウザで http://localhost:8080/WebStudy/hello.jsp にアクセスすると表示されます。

2. JSPの基本要素

JSPには3つの主要なスクリプト要素があります。

スクリプトレット（`<% %>`）

Javaのコードをそのまま書けます。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head><title>スクリプトレット</title></head>
<body>
    <h1>1から10までの合計</h1>
    <%
        int sum = 0;
        for (int i = 1; i <= 10; i++) {
            sum += i;
        }
    %>
    <p>合計: <%= sum %></p>

    <h2>偶数リスト</h2>
    <ul>
    <% for (int i = 2; i <= 10; i += 2) { %>
        <li><%= i %></li>
    <% } %>
    </ul>
</body>
</html>

式（`<%= %>`）

Javaの式を評価し、その結果を出力します。out.print() と同じ意味です。

<p>名前: <%= "田中太郎" %></p>
<p>計算結果: <%= 10 + 20 %></p>
<p>現在時刻: <%= java.time.LocalDateTime.now() %></p>

注意: <%= %> の中にはセミコロン（;）を書きません。

書き方	正しい？
`<%= 10 + 20 %>`	OK
`<%= 10 + 20; %>`	NG（セミコロン不要）

宣言（`<%! %>`）

Servletクラスのフィールドやメソッドを宣言します。

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head><title>宣言の例</title></head>
<body>
    <%!
        private int count = 0;

        private String greet(String name) {
            return "こんにちは、" + name + "さん！";
        }
    %>
    <%
        count++;
    %>
    <h1><%= greet("田中") %></h1>
    <p>このページへのアクセス回数: <%= count %> 回</p>
</body>
</html>

3つの要素まとめ

要素	構文	用途	Servletでの対応
スクリプトレット	`<% ... %>`	Javaコードの実行	`service()` メソッド内のコード
式	`<%= ... %>`	値の出力	`out.print(...)`
宣言	`<%! ... %>`	フィールド・メソッド宣言	クラスのメンバー

3. JSPディレクティブ

ディレクティブは、JSPページ全体の設定を行う命令です。<%@ ... %> の形式で記述します。

pageディレクティブ

JSPページの属性を設定します。

<%@ page language="java"
         contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"
         import="java.util.List, java.util.ArrayList"
         errorPage="error.jsp"
         session="true" %>

属性	意味	デフォルト値
`contentType`	レスポンスのContent-Type	`text/html; charset=ISO-8859-1`
`pageEncoding`	JSPファイルの文字コード	`ISO-8859-1`
`import`	Javaクラスのインポート	なし
`session`	セッションを使うか	`true`
`errorPage`	エラー時の遷移先JSP	なし
`isErrorPage`	エラーページかどうか	`false`

importの書き方

<%-- 複数クラスをカンマ区切り --%>
<%@ page import="java.util.List, java.util.ArrayList" %>

<%-- または複数行に分けて書く --%>
<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="java.time.LocalDateTime" %>

includeディレクティブ

別のファイルの内容をJSPに取り込みます（コンパイル時）。

<%@ include file="header.jsp" %>
<h1>メインコンテンツ</h1>
<%@ include file="footer.jsp" %>

taglibディレクティブ

タグライブラリ（JSTLなど）を使用する宣言です。（詳細は第8回で学びます）

<%@ taglib prefix="c" uri="jakarta.tags.core" %>

4. JSP暗黙オブジェクト

JSPでは、宣言しなくてもすぐに使える 暗黙オブジェクト が用意されています。

オブジェクト	型	説明
`request`	`HttpServletRequest`	リクエスト情報
`response`	`HttpServletResponse`	レスポンス情報
`session`	`HttpSession`	セッション情報
`application`	`ServletContext`	アプリケーション全体の情報
`out`	`JspWriter`	出力ストリーム
`config`	`ServletConfig`	Servlet設定情報
`pageContext`	`PageContext`	ページコンテキスト
`page`	`Object`	JSP自身（`this`と同じ）
`exception`	`Throwable`	例外オブジェクト（エラーページのみ）

暗黙オブジェクトの使用例

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head><title>暗黙オブジェクト</title></head>
<body>
    <h1>暗黙オブジェクトの確認</h1>
    <table border="1">
        <tr><th>項目</th><th>値</th></tr>
        <tr><td>リクエストURI</td><td><%= request.getRequestURI() %></td></tr>
        <tr><td>HTTPメソッド</td><td><%= request.getMethod() %></td></tr>
        <tr><td>セッションID</td><td><%= session.getId() %></td></tr>
        <tr><td>サーバー情報</td><td><%= application.getServerInfo() %></td></tr>
        <tr><td>コンテキストパス</td><td><%= request.getContextPath() %></td></tr>
    </table>

    <%-- outオブジェクトを使った出力 --%>
    <% out.println("<p>outオブジェクトで出力しています</p>"); %>
</body>
</html>

暗黙オブジェクトのスコープ

┌─────────────────────────────────────────────────┐
│ application スコープ（アプリケーション全体で共有）    │
│  ┌──────────────────────────────────────────┐   │
│  │ session スコープ（ユーザーごとに共有）       │   │
│  │  ┌──────────────────────────────────┐    │   │
│  │  │ request スコープ（1回のリクエスト内）│    │   │
│  │  │  ┌──────────────────────────┐    │    │   │
│  │  │  │ page スコープ（1ページ内） │    │    │   │
│  │  │  └──────────────────────────┘    │    │   │
│  │  └──────────────────────────────────┘    │   │
│  └──────────────────────────────────────────┘   │
└─────────────────────────────────────────────────┘

5. JSPコメント

JSPには2種類のコメントがあります。

<%-- これはJSPコメントです（ブラウザに送信されない） --%>

<!-- これはHTMLコメントです（ブラウザに送信される） -->

種類	構文	ブラウザに送信	ソースに表示
JSPコメント	`<%-- ... --%>`	されない	されない
HTMLコメント	`<!-- ... -->`	される	される

<%-- この部分はクライアントに一切送信されません --%>
<!-- この部分はHTMLソースに表示されます -->

<%-- 開発メモ: この処理は後で修正する --%>
<p>表示されるコンテンツ</p>

ベストプラクティス: サーバー側の処理に関するコメントは <%-- --%> を使い、HTMLの構造に関するコメントは  を使いましょう。

6. ファイルのインクルード

JSPでは、他のファイルを取り込む方法が2つあります。

includeディレクティブ（静的インクルード）

<%@ include file="header.jsp" %>

コンパイル時 にファイルの内容が挿入される
取り込むファイルの内容がそのまま結合される
変更時はJSPの再コンパイルが必要

jsp:includeアクション（動的インクルード）

<jsp:include page="header.jsp" />

実行時 にファイルの出力結果が挿入される
取り込むファイルは独立してコンパイルされる
パラメータを渡すことが可能

比較と使い分け

項目	`<%@ include %>`	`<jsp:include />`
タイミング	コンパイル時（静的）	実行時（動的）
パラメータ	渡せない	渡せる
変更の反映	再コンパイルが必要	即時反映
パフォーマンス	速い	やや遅い
用途	ヘッダー・フッターなど固定部分	動的に内容が変わる部分

実践例：共通レイアウト

header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>Webアプリ</title>
    <style>
        body { font-family: sans-serif; margin: 20px; }
        .header { background-color: #336699; color: white; padding: 10px; }
        .footer { background-color: #ddd; padding: 10px; margin-top: 20px; }
    </style>
</head>
<body>
<div class="header">
    <h1>Webアプリケーション</h1>
</div>

footer.jsp

<div class="footer">
    <p>&copy; 2025 WebStudy. All rights reserved.</p>
</div>
</body>
</html>

main.jsp

<%@ include file="header.jsp" %>

<h2>メインコンテンツ</h2>
<p>ここがページの内容です。</p>
<p>現在時刻: <%= new java.util.Date() %></p>

<%@ include file="footer.jsp" %>

jsp:include でパラメータを渡す

<jsp:include page="greeting.jsp">
    <jsp:param name="userName" value="田中" />
</jsp:include>

greeting.jsp 側で受け取る：

<p>こんにちは、<%= request.getParameter("userName") %> さん！</p>

練習問題

問題1：自己紹介ページ（JSP版） ⭐

以下の要件で自己紹介ページを作成してください。

ファイル名：profile.jsp
HTMLのテーブルで名前・年齢・趣味・好きな言語を表示
現在の日時を java.time.LocalDateTime で表示
ページタイトルは「自己紹介」

模範解答

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ page import="java.time.LocalDateTime, java.time.format.DateTimeFormatter" %>
<!DOCTYPE html>
<html>
<head><title>自己紹介</title></head>
<body>
    <h1>自己紹介</h1>
    <%
        String name = "田中太郎";
        int age = 23;
        String hobby = "プログラミング";
        String language = "Java";
        String now = LocalDateTime.now().format(DateTimeFormatter.ofPattern("yyyy年MM月dd日 HH:mm:ss"));
    %>
    <table border="1">
        <tr><th>項目</th><th>内容</th></tr>
        <tr><td>名前</td><td><%= name %></td></tr>
        <tr><td>年齢</td><td><%= age %> 歳</td></tr>
        <tr><td>趣味</td><td><%= hobby %></td></tr>
        <tr><td>好きな言語</td><td><%= language %></td></tr>
    </table>
    <p>表示日時: <%= now %></p>
</body>
</html>

問題2：掛け算の表をJSPで表示 ⭐⭐

1から9までの掛け算の表（九九表）をJSPで作成してください。

ファイル名：kuku.jsp
<table> で整形して表示
ヘッダー行・ヘッダー列をつける
スクリプトレットとHTMLを組み合わせて実装

模範解答

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>九九の表</title>
    <style>
        table { border-collapse: collapse; }
        td, th { border: 1px solid #333; padding: 8px; text-align: center; width: 40px; }
        th { background-color: #ddd; }
    </style>
</head>
<body>
    <h1>九九の表</h1>
    <table>
        <tr>
            <th>&times;</th>
            <% for (int j = 1; j <= 9; j++) { %>
                <th><%= j %></th>
            <% } %>
        </tr>
        <% for (int i = 1; i <= 9; i++) { %>
        <tr>
            <th><%= i %></th>
            <% for (int j = 1; j <= 9; j++) { %>
                <td><%= i * j %></td>
            <% } %>
        </tr>
        <% } %>
    </table>
</body>
</html>

問題3：ヘッダー・フッター共通化 ⭐⭐

以下の3つのJSPファイルを作成し、共通のヘッダーとフッターを使って複数ページを作成してください。

common/header.jsp : 共通ヘッダー（ナビゲーションリンク付き）
common/footer.jsp : 共通フッター（著作権表示）
menu.jsp : メニューページ（ヘッダーとフッターをインクルード）
メニューページにはリンクを3つ以上表示すること

模範解答

common/header.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>WebStudyアプリ</title>
    <style>
        body { font-family: sans-serif; margin: 0; padding: 0; }
        .header { background-color: #336699; color: white; padding: 15px; }
        .header a { color: white; margin-right: 15px; text-decoration: none; }
        .header a:hover { text-decoration: underline; }
        .content { padding: 20px; }
        .footer { background-color: #eee; padding: 10px; text-align: center; margin-top: 30px; }
    </style>
</head>
<body>
<div class="header">
    <strong>WebStudy</strong>
    <a href="menu.jsp">メニュー</a>
    <a href="profile.jsp">自己紹介</a>
    <a href="kuku.jsp">九九の表</a>
</div>
<div class="content">

common/footer.jsp

</div>
<div class="footer">
    <p>&copy; 2025 WebStudy. All rights reserved.</p>
    <p>現在時刻: <%= new java.util.Date() %></p>
</div>
</body>
</html>

menu.jsp

<%@ include file="common/header.jsp" %>

<h1>メニュー</h1>
<ul>
    <li><a href="profile.jsp">自己紹介ページ</a> - 自己紹介を表示します</li>
    <li><a href="kuku.jsp">九九の表</a> - 九九の表を表示します</li>
    <li><a href="hello.jsp">Hello JSP</a> - はじめてのJSPページ</li>
</ul>

<h2>このアプリについて</h2>
<p>Servlet/JSP入門の練習用アプリケーションです。</p>

<%@ include file="common/footer.jsp" %>

まとめ

学んだこと	キーワード
JSPとServletの関係	JSPはServletに変換されて実行される
スクリプト要素	`<% %>`（スクリプトレット）、`<%= %>`（式）、`<%! %>`（宣言）
ディレクティブ	`<%@ page %>`、`<%@ include %>`、`<%@ taglib %>`
暗黙オブジェクト	`request`、`response`、`session`、`application`、`out`
コメント	`<%-- JSPコメント --%>`、`<!-- HTMLコメント -->`
インクルード	`<%@ include %>`（静的）、`<jsp:include />`（動的）

次回は フォーム処理（GET/POST） を学びます！

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

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

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

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up

【Java研修】Servlet/JSP入門③ JSPの基礎

はじめに

第3回で学ぶこと

1. JSPとは？

JSP（JavaServer Pages）の概要

JSPとServletの関係

はじめてのJSP

2. JSPの基本要素

スクリプトレット（<% %>）

式（<%= %>）

宣言（<%! %>）

3つの要素まとめ

3. JSPディレクティブ

pageディレクティブ

importの書き方

includeディレクティブ

taglibディレクティブ

4. JSP暗黙オブジェクト

暗黙オブジェクトの使用例

暗黙オブジェクトのスコープ

5. JSPコメント

6. ファイルのインクルード

includeディレクティブ（静的インクルード）

jsp:includeアクション（動的インクルード）

比較と使い分け

実践例：共通レイアウト

jsp:include でパラメータを渡す

練習問題

問題1：自己紹介ページ（JSP版） ⭐

問題2：掛け算の表をJSPで表示 ⭐⭐

問題3：ヘッダー・フッター共通化 ⭐⭐

まとめ

スクリプトレット（`<% %>`）

式（`<%= %>`）

宣言（`<%! %>`）