LoginSignup
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?

@apptest(App T. Engineer)

📚【初心者向け】Java Webアプリ完全ガイド！環境構築からServletまで🚀

Last updated at Posted at 2025-09-08

この記事では、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の設定

  1. Eclipse → Window → Preferences → Java → Installed JREs を開く

  2. JDK 11または21（例: C:\Program Files\Eclipse Adoptium\jdk-11.0.x）がリストにあるか確認

  3. ない場合:

    • 「Add…」 → 「Standard VM」 → JDKフォルダを指定 → チェック

  4. JDK自体がない場合: Adoptium公式サイト から Temurin 11 をダウンロード

2️⃣ Tomcatの登録

  1. Tomcat 9公式サイト から apache-tomcat-9.0.x.zip をダウンロード

  2. 任意の場所に解凍（例: C:\apache-tomcat-9.0.x）

  3. Eclipseで:

    • Window → Show View → Other… → Server → Servers
    • → New → Server → Apache → Tomcat v9.0 を選択
    • 解凍先ディレクトリを指定 → Finish

  4. ServersビューでTomcatを Start

    • ブラウザで http://localhost:8080 にアクセス
    • 応答（404でもOK）があれば起動成功！

3️⃣ プロジェクト作成

  1. File → New → Dynamic Web Project を選択

  2. 以下を設定:

    • プロジェクト名: WebStarterApp
    • Target runtime: Tomcat v9.0
    • Dynamic web module version: 4.0

  3. Finish をクリック

  4. 文字エンコーディングを確認:

    • プロジェクトを右クリック → 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("11.") || 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の実践練習

🛠️ 基本の流れ

  1. クラスを作成: src/main/java で新しいクラスを作る
  2. コードをコピペ: サンプルコードを貼り付ける
  3. サーバーを起動: TomcatをStart
  4. 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開発を続けましょう！✨

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
Sign upLogin
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?