JavaでWebアプリを作ってみよう！初心者向け開発ガイド

はじめに：Webアプリ開発で広がるJavaの世界

「Javaを勉強してみたけど、何を作ったらいいかわからない」「実際にWebアプリを作ってみたい」

そんな初心者の方にぴったりなのが、Javaを使ったWebアプリ開発です。実際のユーザーに使ってもらえるアプリを作ることで、実践的なスキルが身につきます。

この記事では、JavaでWebアプリを作るための手順を、環境構築から実装、デバッグまで初心者向けに解説します。

Step1：開発環境を整えよう

必要なツール

ツール	目的
JDK	Javaの開発環境
Eclipse or IntelliJ	Java用の統合開発環境（IDE）
Apache Tomcat	Webアプリを動かすサーバ
MySQL or H2	データを保存するデータベース

セットアップ手順

JDKを公式サイトからダウンロードしインストール
EclipseやIntelliJをインストール
Tomcatをダウンロードし、IDEに設定
プロジェクトの作成（Java Web Projectを選択）

Step2：作るWebアプリのイメージを決めよう

今回は、**簡単な「ユーザー登録＆ログイン機能付きメモアプリ」**を作ってみましょう。

機能一覧

ユーザー登録
ログイン・ログアウト
メモの登録・一覧表示・削除

Step3：データベース設計

テーブル設計

ユーザーテーブル（users）

フィールド	型	内容
id	int	自動採番ID
username	varchar	ユーザー名
password	varchar	パスワード

メモテーブル（memos）

フィールド	型	内容
id	int	自動採番ID
user_id	int	所有者のID
content	text	メモの内容

Step4：Javaコードを書こう（JSP＋Servlet編）

1. ユーザー登録

register.jsp

<form method="post" action="RegisterServlet">
  ユーザー名: <input type="text" name="username"><br>
  パスワード: <input type="password" name="password"><br>
  <input type="submit" value="登録">
</form>

RegisterServlet.java

String username = request.getParameter("username");
String password = request.getParameter("password");

Connection conn = DriverManager.getConnection(DB_URL, DB_USER, DB_PASS);
PreparedStatement ps = conn.prepareStatement("INSERT INTO users(username, password) VALUES (?, ?)");
ps.setString(1, username);
ps.setString(2, password);
ps.executeUpdate();

2. ログイン処理

login.jsp

<form method="post" action="LoginServlet">
  ユーザー名: <input type="text" name="username"><br>
  パスワード: <input type="password" name="password"><br>
  <input type="submit" value="ログイン">
</form>

LoginServlet.java

String username = request.getParameter("username");
String password = request.getParameter("password");

PreparedStatement ps = conn.prepareStatement("SELECT * FROM users WHERE username=? AND password=?");
ps.setString(1, username);
ps.setString(2, password);
ResultSet rs = ps.executeQuery();

if(rs.next()) {
    session.setAttribute("userId", rs.getInt("id"));
    response.sendRedirect("memo.jsp");
} else {
    out.println("ログイン失敗");
}

3. メモの登録・一覧表示

memo.jsp

<form method="post" action="AddMemoServlet">
  <textarea name="content"></textarea><br>
  <input type="submit" value="メモ追加">
</form>

<%-- 登録済みメモ一覧を表示 --%>
<%
int userId = (int) session.getAttribute("userId");
PreparedStatement ps = conn.prepareStatement("SELECT * FROM memos WHERE user_id=?");
ps.setInt(1, userId);
ResultSet rs = ps.executeQuery();
while(rs.next()) {
    out.println("<p>" + rs.getString("content") + "</p>");
}
%>

Step5：デザインを整えよう

Bootstrapを使って見た目を整える

CDNを使えば簡単に利用可能です。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

フォームやボタンにBootstrapのクラスを追加するだけで、見栄えがぐっと良くなります。

Step6：エラーとデバッグのポイント

よくあるエラー	原因	対処法
HTTP 404エラー	URL設定ミス	web.xmlとServlet設定を見直す
ClassNotFoundException	JDBCドライバが無い	.jarファイルの追加
NullPointerException	sessionやDBの変数がnull	if文でnullチェックを入れる