この記事では、Eclipse 2025-06 と Tomcat 9 を使って、JSPとServletで動くWebアプリをゼロから作る方法 を丁寧に解説します。
コードはコピペで動くので、初心者でも安心！カッコいいダッシュボードや楽しいサンプルも一緒に作ってみましょう！🎉

🎯 対象者

JavaやWeb開発が初めての方
EclipseやTomcatのセットアップに不安がある方
Webアプリの基礎を楽しく学びたい方

🏁 学習ゴール

JSPとServletをブラウザで動かせるようになる
Webアプリ開発の基本を体験し、自信をつける

🌟 環境設定の重要性

Webアプリ開発を始める前に、環境を整えることが成功の鍵！ 😄
適切なツールをセットアップすれば、コードを書くのがもっと楽しくなります。
一緒に準備を進めましょう！

🔧 準備: 必要なツールを揃える

以下のツールを揃えれば、すぐに開発を始められます👇

項目	バージョン/内容	備考
OS	Windows 10/11（Mac/Linuxも可）	環境変数設定不要（Eclipse内で完結）
Java	OpenJDK 11 / 21（Temurin推奨）	Tomcat 9との互換性抜群
Tomcat	9.0.x	`javax.servlet` を使用（Jakarta非対応）
Eclipse	2025-06 (4.36.0, Build id: 20250605-1316)	最新版でスムーズな開発を実現

📚 JSP / Servlet / Tomcatの基礎知識

Webアプリ開発に欠かせない JSP / Servlet / Tomcat を簡単に理解しましょう！😊

JSP（JavaServer Pages）とは？

HTMLにJavaコードを埋め込んで、動的なWebページを作成する技術。
例: 今日の日付を表示したり、ボタンで変化するページを作れる。
メリット: 静的なHTMLにインタラクティブな動きを追加！

Servletとは？

語源：Server + let（小さい・補助的なもの）
意味：サーバー上で動く小さなプログラム

日本語で言い換えると…

サーブレット = サーバー側のミニプログラム
イメージ例：
- サーバーの中にいる「小さな執事」
- ブラウザから依頼（リクエスト）を受けて、必要な処理をし、結果（レスポンス）を返す役目

役割

ブラウザから送られたリクエストを受け取る
必要な処理（入力チェック、計算、DBアクセスなど）を行う
結果をJSPに渡してHTMLを生成する

具体例

「名前入力フォーム」に「Taro」と入力
→ Servletが受け取って処理
→ JSPが「こんにちは、Taroさん！」と表示

Tomcatとは？

JSPやServletを動かすためのWebサーバー（実行環境・アプリの「家」）。
役割: ブラウザからのリクエストを受け取り、JSPやServletをコンパイル・実行し、結果を返す。
例: http://localhost:8080 にアクセスするとTomcatが応答。ポート8080がTomcatの玄関口！

👉 ポイント

JSP = 表示担当（見た目）
Servlet = 処理担当（頭脳）
Tomcat = 実行環境（家）

この3つを組み合わせて初めて本格的なWebアプリが完成します！💪

💡 順番を 「JSP → Servlet → Tomcat」 に整理することで、
「見た目 → 処理 → 実行環境」という流れが頭に入りやすくなります。

🔍 TomcatはJava用のサーバー？

はい、その通りです。

Tomcat は Java（ServletやJSP）を実行するためのアプリケーションサーバー です。
リクエストを受け取って ServletをJavaクラスとして実行し、その結果をHTMLにして返す 役割を持ちます。

🔍 Apache HTTP Serverとの違い

項目	Apache HTTP Server	Apache Tomcat
主な役割	静的コンテンツの配信（HTML、CSS、画像など）	動的コンテンツ（Java Servlet / JSP）の実行
対応言語	HTML/CSS/JS（静的ファイル）、PHPなど（モジュール経由）	Java（Servlet/JSP専用）
処理の仕組み	ファイルをそのままブラウザへ返す	リクエストをServletに渡してJavaで処理してから返す
使用シーン	Webサイトのフロント配信（ブログ、企業HP、画像配信など）	Java Webアプリの実行環境（ログイン機能、DB連携、動的Webシステムなど）

🛠️ プロジェクト作成とJSPの実行

1️⃣ JDKの設定

Eclipse → Window → Preferences → Java → Installed JREs を開く
JDK 11または21（例: C:\Program Files\Eclipse Adoptium\jdk-11.0.x）がリストにあるか確認
ない場合:
- 「Add…」 → 「Standard VM」 → JDKフォルダを指定 → チェック
JDK自体がない場合: Adoptium公式サイトから Temurin 11 をダウンロード

2️⃣ Tomcatの登録

Tomcat 9公式サイトから apache-tomcat-9.0.x.zip をダウンロード
任意の場所に解凍（例: C:\apache-tomcat-9.0.x）
Eclipseで:
- Window → Show View → Other… → Server → Servers
- → New → Server → Apache → Tomcat v9.0 を選択
- 解凍先ディレクトリを指定 → Finish
ServersビューでTomcatを Start
- ブラウザで http://localhost:8080 にアクセス
- 応答（404でもOK）があれば起動成功！

3️⃣ プロジェクト作成

File → New → Dynamic Web Project を選択
以下を設定:
- プロジェクト名: WebStarterApp
- Target runtime: Tomcat v9.0
- Dynamic web module version: 4.0
Finish をクリック
文字エンコーディングを確認:
- プロジェクトを右クリック → Properties → Resource
- Text file encoding を UTF-8 に設定

📊 環境チェックダッシュボード

src/main/webapp/confirm.jsp に以下を作成

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%
  String javaVersion = System.getProperty("java.version");
  String fileEncoding = System.getProperty("file.encoding");
  String serverInfo = application.getServerInfo();
  int servletMajor = application.getMajorVersion();
  int servletMinor = application.getMinorVersion();
  String contextPath = request.getContextPath();
  boolean javaOk = javaVersion != null && (javaVersion.startsWith("17.") || javaVersion.startsWith("21."));
  boolean encOk = "UTF-8".equalsIgnoreCase(fileEncoding);
  boolean servletOk = servletMajor >= 4 && servletMinor >= 0;
%>
<%! String badge(boolean ok) { return ok ? "<span class='badge ok'>OK</span>" : "<span class='badge ng'>NG</span>"; } %>
<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>環境チェックダッシュボード</title>
  <style>
    body { background: #f0f0f0; font-family: Arial, sans-serif; }
    .badge.ok { color: green; font-weight: bold; }
    .badge.ng { color: red; font-weight: bold; }
  </style>
</head>
<body>
  <h2>環境チェック</h2>
  <p>Java: <%= badge(javaOk) %> (v<%= javaVersion %>)</p>
  <p>Servlet: <%= badge(servletOk) %> (v<%= servletMajor %>.<%= servletMinor %>)</p>
  <p>Encoding: <%= badge(encOk) %> (<%= fileEncoding %>)</p>
  <p>Context: <%= contextPath %></p>
  <p>Server: <%= serverInfo %></p>
</body>
</html>

👉 http://localhost:8080/WebStarterApp/confirm.jsp にアクセス → すべて緑の「OK」なら準備完了！

⚠️ エラー発生時の対処法

404エラー: プロジェクトがTomcatに追加されていない
500エラー: コード誤り → EclipseのConsoleログを確認
表示されない: Tomcat Restart + Project Clean

🍳 Servletの役割と魅力

役割: 静的HTMLをユーザー操作に応じた動的ページに変換
魅力: ログイン機能、カート機能、会員専用ページなどが実現可能

Servletの実践練習

🛠️ 基本の流れ

クラスを作成: src/main/java で新しいクラスを作る
コードをコピペ: サンプルコードを貼り付ける
サーバーを起動: TomcatをStart
URLで確認: ブラウザで結果を確認

👉 この流れを繰り返して、Servletをマスターしましょう！😄

サンプル1: 基本のHelloServlet

src/main/java → 右クリック → New → Class
パッケージ: com.example.servlet
クラス名: HelloServlet

package com.example.servlet;
import java.io.IOException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/hello")
public class HelloServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html; charset=UTF-8");
        response.getWriter().println("<h1>Hello, Servlet World!</h1>");
    }
}

✅ http://localhost:8080/WebStarterApp/hello にアクセス
👉 「Hello, Servlet World!」が表示されれば成功！🎉

サンプル2: 名前入力サーブレット

src/main/java → New → Class
パッケージ: com.example.servlet
クラス名: GreetServlet

package com.example.servlet;
import java.io.IOException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/greet")
public class GreetServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html; charset=UTF-8");
        String name = request.getParameter("name");
        if (name == null) name = "友達";
        response.getWriter().println("<h1>こんにちは、" + name + "さん！</h1>");
    }
}

✅ http://localhost:8080/WebStarterApp/greet?name=Taro にアクセス
👉 「こんにちは、Taroさん！」が表示されれば成功！

サンプル3: CSSで彩るサーブレット

src/main/java → New → Class
パッケージ: com.example.servlet
クラス名: StyledHelloServlet

package com.example.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/styledHello")
public class StyledHelloServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'><title>Styled</title>");
        out.println("<style>body { text-align: center; background: #f0f0f0; } h1 { color: blue; }</style>");
        out.println("</head><body><h1>Hello, Styled World!</h1></body></html>");
    }
}

✅ http://localhost:8080/WebStarterApp/styledHello
👉 青い文字の「Hello, Styled World!」が表示されれば成功！

サンプル4: 時間表示サーブレット

src/main/java → New → Class
パッケージ: com.example.servlet
クラス名: TimeServlet

package com.example.servlet;
import java.io.IOException;
import java.util.Date;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/time")
public class TimeServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html; charset=UTF-8");
        Date now = new Date();
        response.getWriter().println("<h1>今は " + now + " です！</h1>");
    }
}

✅ http://localhost:8080/WebStarterApp/time
👉 現在の時刻が表示されれば成功！

サンプル5: カラー変更サーブレット

src/main/java → New → Class
パッケージ: com.example.servlet
クラス名: ColorServlet

package com.example.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/color")
public class ColorServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html; charset=UTF-8");
        String color = request.getParameter("color");
        if (color == null) color = "black";
        PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'><title>Color</title>");
        out.println("<style>body { text-align: center; } h1 { color: " + color + "; }</style>");
        out.println("</head><body><h1>この文字は" + color + "だよ！</h1></body></html>");
    }
}

✅ http://localhost:8080/WebStarterApp/color → 黒文字の「この文字はblackだよ！」
✅ http://localhost:8080/WebStarterApp/color?color=red → 赤文字の「この文字はredだよ！」

🎮 もっと楽しむ！追加サンプル

サンプル6: ボタンで挨拶変更サーブレット

src/main/java → New → Class
パッケージ: com.example.servlet
クラス名: ButtonGreetServlet

package com.example.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

@WebServlet("/buttonGreet")
public class ButtonGreetServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException {
        response.setContentType("text/html; charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.println("<!DOCTYPE html><html lang='ja'><head><meta charset='UTF-8'><title>Button Greet</title>");
        out.println("<style>body { text-align: center; font-family: Arial, sans-serif; }</style>");
        out.println("</head><body><h1 id='greeting'>こんにちは、友達さん！</h1>");
        out.println("<button onclick=\"document.getElementById('greeting').innerText='やあ、元気？'\">押してね！</button>");
        out.println("</body></html>");
    }
}

✅ http://localhost:8080/WebStarterApp/buttonGreet
👉 ボタンを押すと「やあ、元気？」に変われば成功！

🎉 まとめと次のステップ

JSPとServletの基礎をマスター！
次は フォーム送信、DB連携、Spring Boot に挑戦！

📖 補足: JSPの仕組み

JSPは直接動作しない → TomcatがServletに変換して実行
役割分担
- Servlet: ロジック担当 🧠
- JSP: 表示担当 🎨

💪 結論
JSP（表示）＋ Servlet（処理）の組み合わせで、ログインやショッピングカートなど本格的なWebアプリが作れます！
これからも楽しくJava開発を続けましょう！✨