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

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

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

RegisterServlet.java

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

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

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

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

LoginServlet.java

String username = request.getParameter("username");<br>String password = request.getParameter("password");<br><br>PreparedStatement ps = conn.prepareStatement("SELECT * FROM users WHERE username=? AND password=?");<br>ps.setString(1, username);<br>ps.setString(2, password);<br>ResultSet rs = ps.executeQuery();<br><br>if(rs.next()) {<br>    session.setAttribute("userId", rs.getInt("id"));<br>    response.sendRedirect("memo.jsp");<br>} else {<br>    out.println("ログイン失敗");<br>}<br>

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

&lt;form method="post" action="AddMemoServlet"><br>  &lt;textarea name="content">&lt;/textarea>&lt;br><br>  &lt;input type="submit" value="メモ追加"><br>&lt;/form><br><br>&lt;%-- 登録済みメモ一覧を表示 --%><br>&lt;%<br>int userId = (int) session.getAttribute("userId");<br>PreparedStatement ps = conn.prepareStatement("SELECT * FROM memos WHERE user_id=?");<br>ps.setInt(1, userId);<br>ResultSet rs = ps.executeQuery();<br>while(rs.next()) {<br>    out.println("&lt;p>" + rs.getString("content") + "&lt;/p>");<br>}<br>%><br>

Step5：デザインを整えよう

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

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

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

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

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

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

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