サーブレット&JSPの基本｜JSPを作成して実行する

JSPファイルを作って、URLで実行する。ランダムに変わるWebページでJSPの動きを体験しよう

JSPの基本文法を学んだら、次は実際にJSPファイルを作成してブラウザで実行してみましょう。

JSPファイルは、HTMLファイルと同じように src/main/webapp の下に配置して、ブラウザからURLを指定してリクエストします。サーブレットと同じようにサーバ側で処理されますが、URLパターンを設定する必要はありません。JSPファイルは、基本的にファイル名をURLに含めて実行します。

今回は、アクセスするたびにおすすめランチがランダムに変わるJSPファイルを作成します。Javaの処理でランチ候補を選び、その結果をHTMLの中に表示します。サーブレットで out.println を何度も書いていた処理と比べると、JSPではHTMLを自然な形で書けることが分かります。

プロジェクト名は study、JSPファイル名は lunch.jsp とします。保存場所は src/main/webapp です。完成後は、次のURLで実行できます。

http://localhost:8080/study/lunch.jsp

JSPファイルのURL

JSPファイルを実行するには、ブラウザからJSPファイルへリクエストを送ります。リクエストの方法は、HTMLファイルやサーブレットを実行するときとよく似ています。

主な実行方法は次の2つです。

方法内容
方法①ブラウザを起動してURLを入力する
方法②Eclipseの実行機能を利用する

ブラウザで直接実行する場合は、Tomcat11(Java25)などのアプリケーションサーバーを起動しておく必要があります。

Eclipseの実行機能を使う場合は、JSPファイルを選択して右クリックし、実行 → サーバーで実行を選択します。HTMLファイルを実行したときと同じ感覚で操作できます。

JSPファイルのURL形式

JSPファイルのURLは、次の形式になります。

http://サーバ名/アプリケーション名/webappからのパス

Tomcatをローカル環境で動かしている場合、サーバ名とポート番号は localhost:8080 になります。プロジェクト名が study の場合、URLの途中には study が入ります。

たとえば、src/main/webapp の直下に lunch.jsp を作成した場合、URLは次のようになります。

http://localhost:8080/study/lunch.jsp

もし src/main/webapp/menu の中に lunch.jsp を作成した場合は、URLに menu というフォルダ名も含めます。

http://localhost:8080/study/menu/lunch.jsp

JSPファイルの保存場所とURLの関係

JSPファイルの保存場所URL
src/main/webapp/lunch.jsphttp://localhost:8080/study/lunch.jsp
src/main/webapp/menu/lunch.jsphttp://localhost:8080/study/menu/lunch.jsp

JSPファイルは、保存した場所に応じてURLが決まります。サーブレットのように @WebServlet でURLパターンを設定するのではなく、HTMLファイルと同じように、webappからのパスとファイル名で指定します。

JSPは正体がサーブレットでも扱いはHTMLファイルに近い

JSPファイルは、リクエストされるとアプリケーションサーバーによってサーブレットクラスへ変換されます。そのため、内部的にはサーブレットとして動きます。

ただし、ブラウザから実行するときの扱いはHTMLファイルに近いです。JSPファイルは src/main/webapp の下に保存し、URLではファイル名を指定してリクエストします。

サーブレットとJSPのURL指定の違い

種類URLの最後に指定するもの例
サーブレットURLパターンhttp://localhost:8080/study/DrinkServlet
JSPファイルwebappからのパスとファイル名http://localhost:8080/study/lunch.jsp
HTMLファイルwebappからのパスとファイル名http://localhost:8080/study/index.html

このように、JSPは正体としてはサーブレットに変換されますが、ファイルの置き場所やURLの考え方はHTMLファイルに近いと考えると理解しやすいです。

図1：JSPファイルの保存場所とURLの関係

この図から分かること

JSPファイルは、src/main/webapp の下に保存します。webapp直下に置いた場合は、プロジェクト名のあとにファイル名を指定します。

src/main/webapp/menu のようなフォルダの中に置いた場合は、URLにも menu が入ります。

JSPファイルは内部でサーブレットに変換されますが、URLを指定するときはURLパターンではなく、保存場所とファイル名を使います。ここがサーブレットクラスとの大きな違いです。

EclipseでJSPファイルを作成する

次に、EclipseでJSPファイルを新規作成します。

今回は、ランダムにおすすめランチを表示する lunch.jsp を作成します。動的Webプロジェクト study の中に作成し、保存場所は src/main/webapp とします。

JSPファイルを作成する手順

手順操作
1パッケージ・エクスプローラーでstudyを選択する
2studyを右クリックする
3新規 → その他 を選択する
4Web → JSPファイル を選択する
5次へ をクリックする
6保存場所がsrc/main/webappになっていることを確認する
7ファイル名にlunch.jspと入力する
8完了をクリックする

JSPファイルは、基本的に src/main/webapp の下に保存します。Eclipseの画面では、保存場所がデフォルトで src/main/webapp になっていることがあります。そのまま使用して問題ありません。

ただし、META-INFディレクトリは選択しないようにします。また、あとで説明するWEB-INFディレクトリにも注意が必要です。

JSPファイル名の付け方

JSPファイル名には、分かりやすく内容が伝わる名前を付けます。

今回は、おすすめランチを表示するJSPなので、lunch.jsp という名前にします。

ファイル名の基本ルール

項目内容
使用する文字半角英数字、アンダーバー、ハイフンなど
拡張子.jsp
内容との対応画面の内容が分かる名前にする
今回のファイル名lunch.jsp

ファイル名を分かりやすくしておくと、URLを見たときにも、どの画面を表示しているのか判断しやすくなります。

たとえば、お知らせ画面なら news.jsp、ログイン画面なら login.jsp、ランチ表示画面なら lunch.jsp のように、役割が伝わる名前を付けるとよいでしょう。

図2：Eclipseでlunch.jspを作成する手順

この図から分かること

EclipseでJSPファイルを作成するときは、studyプロジェクトを右クリックし、WebカテゴリからJSPファイルを選択します。

保存場所は src/main/webapp にします。JSPファイルはHTMLファイルと同じように、webappの下に配置してブラウザからリクエストします。

ファイル名は lunch.jsp とし、拡張子を .jsp にします。これにより、TomcatはこのファイルをJSPとして処理できるようになります。

EclipseでのJSPファイルの作成手順

JSPファイルを作成するにはプロジェクトを選択して右クリック →「新規」→「その他」を選択します。

「JSP ファイル」を選択して、「次へ」をクリックします。

ファイル名に「lunch.jsp」と入力し、「完了」をクリックします。

すると、Eclipseのエディタに lunch.jsp が表示されます。

Eclipseが作成するJSPの基本形

EclipseでJSPファイルを作成すると、pageディレクティブや基本的なHTMLタグがあらかじめ書かれた状態でファイルが作成されることがあります。

たとえば、次のような要素が最初から含まれます。

要素役割
pageディレクティブJSP全体の設定を書く
contentType属性レスポンスの種類と文字コードを指定する
pageEncoding属性JSPファイル自体の文字コードを指定する
htmlタグHTML文書全体を表す
headタグページ設定をまとめる
metaタグHTML文書の文字コードを示す
titleタグブラウザのタブ名を指定する
bodyタグ画面に表示する内容を書く

JSPでは、最低限のHTML構造がある状態から編集を始められるため、必要な処理や表示内容を追加して完成させます。

今回のlunch.jspでは、Javaの処理としてランチ候補をランダムに選び、その結果をHTMLの中に表示します。

lunch.jspを完成させる

ここでは、ランダムにおすすめランチを表示するJSPファイルを作成します。

今回のプログラムでは、配列にランチ候補を用意し、Math.randomを使ってその中から1つを選びます。また、LocalDateとDateTimeFormatterを使って実行日を取得し、MM月dd日の形式で表示します。

おすすめランチをHTMLでレスポンスするJSPファイルの例

ファイル名： lunch.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8" %>
<%@ page import="java.time.LocalDate,
    java.time.format.DateTimeFormatter" %>

<%
// おすすめランチをランダムで決定
String[] lunchArray = { "チキンカレー", "和風ハンバーグ", "野菜たっぷりうどん" };
int index = (int) (Math.random() * 3);
String lunch = lunchArray[index];

// 実行日を取得
LocalDate date = LocalDate.now();
DateTimeFormatter formatter = DateTimeFormatter.ofPattern("MM月dd日");
String today = date.format(formatter);
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>おすすめランチ</title>
</head>
<body>
<p><%= today %>のおすすめランチは「<%= lunch %>」です</p>
</body>
</html>

ブラウザの表示例

このJSPファイルでは、最初にpageディレクティブを書いています。1つ目のpageディレクティブでは、JSPで使用する言語、レスポンスのContent-Type、JSPファイルの文字コードを指定しています。

2つ目のpageディレクティブでは、日付を扱うためにLocalDateとDateTimeFormatterをインポートしています。

その下にあるスクリプトレットでは、ランチ候補を配列で用意し、ランダムに1つ選んでいます。さらに、実行日を取得してtodayという変数に代入しています。

HTMLのbodyタグ内では、スクリプト式を使ってtodayとlunchの値を表示しています。

pageディレクティブの属性

EclipseでJSPファイルを作成すると、contentType属性だけでなく、language属性やpageEncoding属性も自動で書かれることがあります。

今回のlunch.jspでは、次のようなpageディレクティブを使っています。

<%@ page language="java" contentType="text/html;
 charset=UTF-8" pageEncoding="UTF-8" %>

主な属性の意味

属性内容
languageJSPで使用する言語を指定する
contentTypeレスポンスとして返すデータの種類と文字コードを指定する
pageEncodingJSPファイル自体の文字コードを指定する

language属性にはjavaを指定します。JSPでは通常Javaを使うため、この指定は基本形として覚えておくとよいでしょう。

contentType属性では、ブラウザへ返す内容がUTF-8のHTMLであることを指定しています。pageEncoding属性では、JSPファイル自体をUTF-8として扱うことを指定しています。

日本語を含むJSPファイルでは、文字化けを防ぐためにもUTF-8を指定しておくと安心です。

import属性で日付用のクラスを読み込む

lunch.jspでは、実行日を表示するためにLocalDateとDateTimeFormatterを使用しています。

これらは自動的に使えるクラスではないため、pageディレクティブのimport属性で読み込みます。

今回の例では、次のように記述しています。

<%@ page import="java.time.LocalDate
, java.time.format.DateTimeFormatter" %>

このように、1つのpageディレクティブで複数のクラスをインポートできます。複数のクラスを指定する場合は、カンマで区切ります。

importしているクラス

クラス役割
LocalDate現在の日付を取得する
DateTimeFormatter日付の表示形式を整える

LocalDate.nowを使うと、現在の日付を取得できます。DateTimeFormatter.ofPatternでMM月dd日という表示形式を指定し、date.formatを使って文字列に変換しています。

ランダムにおすすめランチを選ぶ処理

今回のJSPでは、lunchArrayという配列に3つのランチ候補を用意しています。

String[] lunchArray = { "チキンカレー", "和風ハンバーグ",
 "野菜たっぷりうどん" };

Math.randomは、0以上1未満の小数を返します。これに3を掛けることで、0以上3未満の小数になります。

さらにint型に変換すると、小数部分が切り捨てられ、0、1、2のいずれかの整数になります。

処理結果
Math.random0以上1未満の小数
Math.random() * 30以上3未満の小数
int型へ変換0、1、2の整数

この整数を配列の添字として使うことで、3つのランチ候補から1つを選べます。

添字選ばれるランチ
0チキンカレー
1和風ハンバーグ
2野菜たっぷりうどん

ブラウザで再読み込みを行うと、JSPが再度リクエストされ、ランダム処理も再実行されます。そのため、表示されるランチが変わることがあります。

スクリプト式で値をHTMLに表示する

HTMLのbodyタグ内では、次のようにスクリプト式を使っています。

<%= today %> の部分には、実行日を表す文字列が入ります。<%= lunch %> の部分には、ランダムに選ばれたランチ名が入ります。

JSPが実行されると、これらのスクリプト式は具体的な値へ置き換わります。

たとえば、07月29日にチキンカレーが選ばれた場合、ブラウザには次のように表示されます。

07月29日のおすすめランチは「チキンカレー」です

このように、JSPではHTMLの中にJavaの値を自然に差し込めます。

図3：lunch.jspの実行結果と500ページ

この図から分かること

lunch.jspが正しく実行されると、ブラウザには実行日とランダムに選ばれたおすすめランチが表示されます。ブラウザを再読み込みすると、JSPが再度実行されるため、別のランチが表示されることがあります。

一方、JSPファイル内のJavaコードに誤りがある場合や、JSPのコンパイルに失敗した場合は、HTTPステータス500のエラーページが表示されます。

JSPはリクエストされたタイミングでサーブレットクラスに変換され、Javaプログラムとしてコンパイルされます。そのため、JSP内のJavaの文法に誤りがあると、実行時に500ページが返されることがあります。

JSPファイルを実行する

lunch.jspを作成できたら、ブラウザからリクエストして実行します。

実行方法は、ブラウザにURLを入力する方法と、Eclipseの実行機能を使う方法があります。

方法① ブラウザにURLを入力する

Tomcat11(Java25)を起動した状態で、ブラウザのアドレスバーに次のURLを入力します。

http://localhost:8080/study/lunch.jsp

正常に実行できると、次のようなWebページが表示されます。

07月29日のおすすめランチは「チキンカレー」です

ランチ名はランダムに選ばれるため、実行するたびに別の結果になる場合があります。

方法② Eclipseの実行機能を利用する

Eclipseから実行する場合は、パッケージ・エクスプローラーでlunch.jspを選択します。

右クリックして、実行 → サーバーで実行 を選択します。使用するサーバーには Tomcat11(Java25) を選択します。

設定に問題がなければ、ブラウザが起動し、lunch.jspの実行結果が表示されます。

実行前に確認すること

確認項目内容
プロジェクト名studyになっているか
保存場所src/main/webappに保存されているか
ファイル名lunch.jspになっているか
TomcatTomcat11(Java25)が起動しているか
URLhttp://localhost:8080/study/lunch.jspになっているか
保存lunch.jspを上書き保存しているか

JSPファイルは、URLパターンではなくファイル名を指定して実行します。サーブレットのように@WebServletを設定する必要はありません。

JSPファイルの500ページ

JSPファイルの実行中に問題が発生すると、ブラウザに500ページが表示されることがあります。

500ページは、サーバ内部で処理中にエラーが発生したことを示すページです。JSPの場合、JSPからサーブレットクラスへの変換や、変換後のJavaプログラムのコンパイルで問題が起きたときに表示されることがあります。

500ページで表示される内容の例

表示項目内容
HTTPステータス500
メッセージJSPのクラスをコンパイルできません
説明サーバ内部でエラーが発生したことを示す
例外org.apache.jasper.JasperException など

JSPの500ページが表示された場合は、画面に出ているメッセージを確認します。特に、JSPのどの行でエラーが発生しているか、どのような例外が出ているかを確認すると、修正の手がかりになります。

JSPで起こりやすいエラー

JSPファイルでは、HTMLとJavaのコードを同じファイル内に書きます。そのため、HTMLの書き間違いだけでなく、Javaの文法ミスにも注意が必要です。

よくあるミス

ミス起こりやすい問題
セミコロンの付け忘れJSPのコンパイルエラーになる
波括弧の閉じ忘れJavaの構文エラーになる
変数名の入力ミス変数が見つからずエラーになる
importの不足LocalDateなどのクラスが使えない
スクリプト式にセミコロンを書く値の出力部分でエラーになる場合がある
JSPファイルを保存していない修正内容が反映されない

JSPファイルは、リクエストされたタイミングでサーブレットクラスに変換され、Javaとしてコンパイルされます。そのため、Javaコード部分に誤りがあると、ブラウザ上で500ページとして表示されることがあります。

Eclipseのエラー表示について

Eclipseでは、JSPファイルにJavaの文法エラーがある場合、赤い波線やエラー記号で知らせてくれることがあります。

たとえば、セミコロンが抜けている場合や、変数名を間違えている場合は、編集中に気づけることがあります。

一方で、JSPファイルでは、文法的に間違っていないのに赤い波線やエラー記号が表示されることがあります。これは、Eclipse側の解析が一時的に正しく追いついていない場合などに起こることがあります。

そのようなときは、エラーと表示されている箇所を切り取り、同じ場所へ貼り付け直してから上書き保存すると、表示が消えることがあります。

偽のエラー表示が出たときの対応

状況対応
正しいはずなのに赤い波線が出る該当箇所を切り取り、貼り付け直す
貼り付け直しても消えない上書き保存する
それでも消えない構文、import、ファイル保存を確認する
実行すると500ページが出るエラーメッセージと行番号を確認する

Eclipseのエラー表示はとても便利ですが、常に完全とは限りません。正しいコードでも表示だけが残ることがあると知っておくと、落ち着いて対応できます。

JSPファイルの変更を反映する方法

JSPファイルは、内容を変更したあとに上書き保存し、もう一度リクエストすれば、基本的に変更が反映されます。

サーブレットクラスのように、変更のたびにTomcatを再起動する必要はありません。

ファイル変更後の反映方法

対象変更後の反映方法
サーブレットクラスサーバーを再起動して、リクエストし直す
JSPファイル上書き保存して、リクエストし直す
HTMLファイル上書き保存して、リクエストし直す

lunch.jspを修正した場合は、まず上書き保存します。そのあと、ブラウザで再読み込みを行うか、もう一度URLへアクセスします。

もし変更が反映されない場合は、ブラウザの再読み込みを試しましょう。それでも反映されない場合は、保存場所やファイル名、Tomcatの状態も確認します。

JSPファイルの保存場所に注意する

JSPファイルとHTMLファイルは、動的Webプロジェクトの webapp ディレクトリ以下に配置します。

今回であれば、lunch.jspは次の場所に作成します。

src/main/webapp/lunch.jsp

ただし、WEB-INFディレクトリの中にJSPファイルを配置すると、ブラウザから直接リクエストしても実行できなくなります。

保存場所による違い

保存場所ブラウザから直接実行できるか
src/main/webapp/lunch.jsp実行できる
src/main/webapp/menu/lunch.jsp実行できる
src/main/webapp/WEB-INF/lunch.jsp直接実行できない
src/main/webapp/META-INF/lunch.jsp避ける

JSPファイルを実行したときに404ページが表示された場合は、まず保存場所を確認しましょう。

404ページは、指定されたURLに対応するファイルが見つからない場合に表示されます。ファイル名の入力ミス、保存場所の違い、URLのパスの違いなどが原因になります。

404ページが出たときの確認ポイント

lunch.jspを実行しようとして404ページが表示された場合は、URLと保存場所が一致していない可能性があります。

確認すること

確認項目内容
ファイル名lunch.jspと入力しているか
拡張子.jspになっているか
保存場所src/main/webappの下にあるか
URLhttp://localhost:8080/study/lunch.jspになっているか
プロジェクト名URLのアプリケーション名がstudyになっているか
TomcatstudyがTomcat11(Java25)で実行されているか
WEB-INF内ではないか直接リクエストできない場所に置いていないか

404ページが出た場合は、JSPのJavaコードではなく、URLや保存場所が原因であることも多いです。

500ページはサーバ内部の処理エラー、404ページは指定した場所が見つからないエラーとして、区別して確認しましょう。

JSP作成から実行までの流れ

lunch.jspを作成して実行するまでの流れを、最後に整理しておきます。

手順内容
1studyプロジェクトを右クリックする
2新規 → その他 を選択する
3Web → JSPファイル を選択する
4保存場所をsrc/main/webappにする
5ファイル名をlunch.jspにする
6pageディレクティブとHTMLを確認する
7ランダムにランチを選ぶJavaコードを追加する
8スクリプト式でtodayとlunchを表示する
9上書き保存する
10http://localhost:8080/study/lunch.jsp へアクセスする

JSPファイルは、HTMLのようにファイル名でリクエストできます。その一方で、内部ではサーブレットクラスへ変換され、Javaとして実行されます。

この、扱いはHTMLファイルに近いけれど、内部ではサーブレットとして動くという感覚をつかんでおくと、JSPの学習が進めやすくなります。