こんにちは！「JavaでWebアプリを作りたい！」と思っている初心者のみなさん、ようこそ！🎉
前回は Eclipse + Tomcat を使って Servlet で「Hello, World!」を表示しましたね。
今回は JSP（JavaServer Pages） を使って、HTMLにJavaのコードを埋め込んで「動的なWebページ」を作ります！
この記事は コピペで動くサンプルコード と 超初心者向けの丁寧な解説 で、JSPの基本を楽しく学べるように作りました。
🎯 学習ゴール
この記事を読み終えると、以下ができるようになります：
- JSPを使って動的なWebページを作成
- URLパラメータやセッションを使ってページを動的に変化
- フォームやリスト表示など、Webアプリでよく使う機能を試す
- よくあるエラーと対処法を理解
1. JSPって何？
👉 JSP（JavaServer Pages） は、HTMLの中にJavaを埋め込める技術です。
- Servlet → 裏方で処理（ロジックや計算）
- JSP → ユーザーが見る画面（表示やデザイン）
つまり「Servlet = 頭脳」「JSP = 顔」のような役割分担です！
JSPの処理の流れ
- ブラウザが
http://localhost:8080/アプリ名/greet.jspにアクセス - Tomcat が JSP を Servlet に変換して実行
- 生成された HTML がブラウザに返る
👉 URLには「.jsp」と見えるけど、裏では Servlet が動いています！
2. JSPを置く場所
JSPファイルは Eclipseプロジェクトの src/main/webapp に置きます。
-
src/main/webapp→ 公開フォルダ（ブラウザからアクセスOK） -
WEB-INF→ 非公開フォルダ（設定ファイルや隠したいJSPを置く）
⚠️ src/main/webapp に置かないと表示されません！
3. URLパラメータの仕組み
URLに ?name=Hanako と書くと…
request.getParameter("name")
で Hanako を取得できます。
→ ページ内容を入力に応じて変えられる！
4. サンプルコード集（コピペOK！）
ここからは 動くJSPサンプル5つ を紹介します。
(1) 挨拶JSP
📌 名前をURLパラメータ（?name=〇〇）で受け取り、「こんにちは、〇〇さん！」と表示。
<!-- greet.jsp -->
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<body>
<%!
private String greeting(String name) {
return "こんにちは、" + name + "さん！";
}
%>
<%
String user = request.getParameter("name");
if (user == null || user.isEmpty()) user = "ゲスト";
%>
<h1><%= greeting(user) %></h1>
</body>
</html>
🔎 確認：
-
http://localhost:8080/WebStarterApp/greet.jsp?name=Hanako→ こんにちは、Hanakoさん！ -
http://localhost:8080/WebStarterApp/greet.jsp→ こんにちは、ゲストさん！
(2) 現在日時JSP
📌 Date クラスで現在の日時を表示。
<!-- datetime.jsp -->
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.Date" %>
<!DOCTYPE html>
<html>
<body>
<% Date now = new Date(); %>
<p>今は <%= now %> です！</p>
</body>
</html>
(3) 訪問者カウンターJSP
📌 セッションを使ってアクセス回数をカウント。
<!-- visitor.jsp -->
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<body>
<%
Integer count = (Integer) session.getAttribute("visitCount");
if (count == null) count = 1; else count++;
session.setAttribute("visitCount", count);
%>
<h1>ようこそ！</h1>
<p>あなたは <strong><%= count %></strong> 回目の訪問です！</p>
</body>
</html>
(4) シンプル計算機JSP
📌 URLパラメータ ?num1=5&num2=3 で足し算。
<!-- calculator.jsp -->
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<body>
<%! private int add(int a, int b) { return a + b; } %>
<%
String n1 = request.getParameter("num1");
String n2 = request.getParameter("num2");
String result = "数字を入力してください";
if (n1 != null && n2 != null) {
try { result = "結果: " + add(Integer.parseInt(n1), Integer.parseInt(n2)); }
catch (NumberFormatException e) { result = "エラー: 数字を入れてね！"; }
}
%>
<h1>シンプル計算機</h1>
<p><%= result %></p>
</body>
</html>
(5) シンプルなフォームJSP
📌 フォームで名前を入力して挨拶。
<!-- form.jsp -->
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<body>
<%
String username = request.getParameter("username");
String message = "";
if (username != null && !username.isEmpty()) {
message = "こんにちは、" + username + "さん！";
}
%>
<h1>名前を教えてね！</h1>
<form method="GET" action="form.jsp">
<label>名前: </label>
<input type="text" name="username">
<input type="submit" value="送信">
</form>
<% if (!message.isEmpty()) { %>
<p><%= message %></p>
<% } %>
</body>
</html>
5. エラーが出たときのヒント
-
コンパイルエラー → Java文法や
<% %>の閉じ忘れを確認 -
文字化け → ファイル先頭に
charset=UTF-8を必ず書く -
404エラー → JSPを
src/main/webappに置いたか確認 - 表示されない → Tomcatを再起動（Clean/Publishも試す）
6. まとめ
お疲れさまでした！🎉
- JSPは裏でServletに変換されて動いている
- URLパラメータやセッションでページを動的に変化
- フォーム入力・リスト表示の基本を学習
👉 次は「ServletとJSPの連携」や「DB接続（MySQL）」に進むと、さらに本格的なWebアプリが作れます！