「Javaって学ぶことが多すぎて、どこから手をつければいいかわからない」——そう感じている方は多いはずです。でも実は、Java Web開発に必要な技術には決まった順番と繋がりがあります。
今日1日で学んだのは、その繋がりの核心部分——「HTMLでページを作り・SQLでデータを取り・サーブレットで処理して・DAOで綺麗に設計する」という一連の流れです。この記事では、今日カバーした4つのテーマを「全体像が見える総まとめ」として整理します。各テーマの詳細記事へのリンクも用意しているので、復習に活用してください！
目次
- 今日の学習マップ：4テーマの繋がりを理解しよう
- テーマ① HTMLの基本構造とCSSの役割分担
- テーマ② 現場で使うSELECT文：データ調査編＆プログラミング編
- テーマ③ サーブレット＆JSPの本質と注意点
- テーマ④ DAOクラス＆Modelクラスの設計パターン
- 4テーマを繋げると見えてくる「Webアプリの全体像」
- まとめ：今日の学びを3行で整理
今日の学習マップ：4テーマの繋がりを理解しよう
今日学んだ4テーマは、バラバラに存在しているわけではありません。Webアプリケーションの「リクエスト〜レスポンス」という1本の流れの中で、それぞれが明確な役割を担っています。
【今日の学習マップ：Webアプリ リクエスト〜レスポンスの流れ】
① ブラウザ（クライアント）
└─ テーマ① HTMLで作られた入力フォームからリクエストを送信
└─ DOCTYPE・head/body構造・ブロック/インライン要素
└─ CSSで「構造（HTML）」と「見た目」を分離する
↓ HTTPリクエスト
② サーブレット（Controller）
└─ テーマ③ サーブレットがリクエストを受け取り処理を振り分ける
└─ HttpServlet継承・doGet()/doPost()・ライフサイクル
└─ フォワードでJSPへ、リダイレクトで別URLへ
└─ セッション管理でログイン状態を保持する
↓ DAOを呼ぶ
③ DAO / Model層
└─ テーマ④ DAOがDBアクセスを一手に引き受ける
└─ JDBC：接続→PreparedStatement→ResultSet→クローズ
└─ ResultSet → DTOに変換 → List<DTO>でサーブレットへ返す
└─ JavaBeansでビジネスロジックをModelにまとめる
↓ SQL発行
④ データベース（MySQL）
└─ テーマ② SELECT文でデータを取得・集計・結合する
└─ WHERE・ORDER BY・GROUP BY＋集約関数
└─ INNER JOIN / LEFT OUTER JOIN
└─ PreparedStatementでプレースホルダ実行
↓ DTOリストで返却
⑤ JSP（View）
└─ テーマ③ JSPがデータを受け取りHTMLとして表示する
└─ EL式 ${ } でスクリプトレスに表示
└─ ビジネスロジックはJSPに書かない
↓ HTMLレスポンス
⑥ ブラウザ（クライアント）
└─ テーマ① CSS（外部ファイル）でデザインされた画面が表示されるこの流れが「頭の地図」として入ると、今後どんな機能を作るときも「どのクラスに何を書けばいいか」が迷わなくなります。では各テーマを順に振り返りましょう。
テーマ① HTMLの基本構造とCSSの役割分担
Web開発の出発点は「ブラウザに表示される画面を作ること」です。HTMLとCSSはその2大技術ですが、それぞれの役割を混同しないことが最初の重要ポイントです。
🔑 今日のキーポイント
| 項目 | 内容 | 覚えておくべき鉄則 |
|---|---|---|
| HTML骨格 | <!DOCTYPE html> → <html> → <head>（設定）＋ <body>（表示） |
headは「ブラウザに見えない設定エリア」、bodyが「ブラウザに見えるコンテンツエリア」 |
| ブロック vs インライン | ブロック（<div><p><h1>）は「箱」。インライン（<span><a>）は「文中の部品」 |
ブロックの中にインラインはOK。逆はNG |
| CSSの書き場所 | インライン / styleタグ / 外部ファイル（.css）の3パターン | 実務は外部ファイル一択。複数ページに一括適用できる |
| セレクタの種類 | 要素セレクタ・クラス（.）・ID（#） |
使い回すなら class、1か所だけなら id |
| 役割分担の鉄則 | HTMLは「構造・意味」、CSSは「見た目」 | <font color="red"> のようにHTMLにデザインを書かない |
<!-- ✅ 今日の最重要コード：HTML構造とCSSの役割分担 -->
<!-- HTML（構造・意味だけを書く） -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css"> <!-- CSSは外部ファイルで -->
</head>
<body>
<div id="header">ヘッダー</div>
<p class="important">重要なお知らせ</p>
</body>
</html>
/* CSS（見た目だけを書く） */
#header { background-color: #333; color: #fff; padding: 20px; }
.important { color: red; font-weight: bold; }テーマ② 現場で使うSELECT文：データ調査編＆プログラミング編
Webアプリのほぼすべての機能はDBとの連携があります。「どうデータを取るか」を制するのがSELECT文です。今日は「現場でよく使う6パターン」を2軸で整理しました。
🔑 今日のキーポイント
| 分類 | パターン | 覚えておくべき鉄則 |
|---|---|---|
| データ調査編 | WHERE 句：IN・BETWEEN・LIKE で絞り込む |
LIKE '%キーワード%' で部分一致検索。% は任意文字列 |
ORDER BY：ASC（昇順）/ DESC（降順） |
複数列指定は左から優先。省略時はASC | |
GROUP BY ＋ 集約関数（COUNT/SUM/MAX） |
実行順は WHERE → GROUP BY → HAVING → SELECT → ORDER BY | |
| プログラミング編 | INNER JOIN：両テーブルに一致するレコードだけ取得 |
ON t1.company_id = t2.company_id で結合条件を指定 |
LEFT OUTER JOIN：左テーブル全件＋一致しなければNULL |
「未登録・未設定の人も漏れなく取りたい」ときに使う | |
PreparedStatement：?（プレースホルダ）でSQL実行 |
SQLインジェクション防止の必須手段。文字列結合は絶対NG |
-- ✅ 今日の最重要SQLパターン集
-- ①絞り込み（LIKE・IN・BETWEEN）
SELECT * FROM m_company WHERE company_name LIKE '%株式会社%';
SELECT * FROM m_company WHERE company_id IN (1, 3, 5);
SELECT * FROM m_company WHERE company_id BETWEEN 2 AND 6;
-- ②並べ替え（ORDER BY）
SELECT * FROM m_company ORDER BY area_id ASC, company_id DESC;
-- ③集計（GROUP BY + COUNT）
SELECT area_name, COUNT(*) AS cnt FROM m_company
GROUP BY area_name HAVING COUNT(*) >= 2;
-- ④内部結合（INNER JOIN）
SELECT t1.person_lname, t2.company_name
FROM m_person t1 INNER JOIN m_company t2 ON t1.company_id = t2.company_id;
-- ⑤PreparedStatement（Javaコード）
String sql = "SELECT * FROM m_company WHERE company_name = ?";
PreparedStatement pstmt = con.prepareStatement(sql);
pstmt.setString(1, inputName);
ResultSet rs = pstmt.executeQuery();特に「WHEREとHAVINGの使い分け」は試験でも実務でも頻出です。「集約関数（COUNT等）の結果を条件にするならHAVING、個別レコードの絞り込みはWHERE」と覚えておきましょう。
テーマ③ サーブレット＆JSPの本質と注意点
JavaでWebアプリを作るときの2大サーバサイド技術です。「サーブレットで処理してJSPで表示する」という役割分担がMVCの基本になります。
🔑 今日のキーポイント
| 技術 | 本質 | 覚えておくべき注意点 |
|---|---|---|
| サーブレット | HTTPリクエストを処理するJavaクラス。HttpServletを継承しdoGet()/doPost()をオーバーライド |
インスタンスは1つ＝マルチスレッド動作。フィールド変数にリクエストデータを持つのは危険 |
| GET vs POST | GETはURLにデータが見える。POSTはメッセージボディに格納 | パスワード・個人情報の送信は必ずPOST |
| JSP | HTMLにJavaを埋め込める画面表示専用ファイル。初回アクセス時にサーブレットへ自動コンパイル | スクリプトレットを書きすぎると保守地獄。ビジネスロジックはサーブレット/DAOへ |
| フォワード | 同一APサーバ内の転送。URLが変わらない。requestオブジェクトを共有できる | 「サーブレットで処理 → JSPで表示」の黄金パターンで使う |
| リダイレクト | ブラウザへ「このURLに移動して」と指示。URLが変わる | 処理完了後にトップページへ誘導するときなどに使う |
| セッション管理 | HTTPはステートレスなので、セッションオブジェクトでログイン情報を保持する | 不要になったらinvalidate()で必ず破棄。放置はサーバのメモリ圧迫につながる |
// ✅ 今日の最重要コードパターン：サーブレット→JSPフォワード
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
String name = request.getParameter("NAME");
String password = request.getParameter("PASSWORD");
if ("embex".equals(password)) {
// セッションにログイン情報を保存
HttpSession session = request.getSession();
session.setAttribute("loginUser", name);
// JSPへフォワード（処理結果を表示させる）
request.setAttribute("userName", name);
request.getRequestDispatcher("/welcome.jsp").forward(request, response);
} else {
request.getRequestDispatcher("/login.html").forward(request, response);
}
}
}<!-- ✅ JSP側：EL式でスクリプトレスに表示（スクリプトレットを書かない！） -->
<%@ page contentType="text/html; charset=UTF-8" %>
<h1>ようこそ、${userName}さん！</h1>
<p>ログインに成功しました。</p>テーマ④ DAOクラス＆Modelクラスの設計パターン
サーブレット・JSP・SQLと学んできて、最後に「それらをどう綺麗に繋げるか」の設計パターンを学びました。それがDAOパターン + DTO/JavaBeansです。
🔑 今日のキーポイント：3者の違いを整理する
| クラス | 役割 | 持つもの | たとえ話 |
|---|---|---|---|
| DTO （Data Transfer Object） |
テーブル1行分のデータを運ぶ入れ物 | フィールド＋getter/setterのみ | 宅配の「段ボール箱」 |
| JavaBeans | DTOにビジネスロジックを追加したModel | フィールド＋getter/setter＋業務処理メソッド | 「判断もできる段ボール箱」 |
| DAO （Data Access Object） |
DBアクセスを専門に行うクラス | JDBC処理・SQL・CRUD操作 | 「倉庫の担当者」 |
// ✅ 今日の最重要コードパターン：DAO → DTO変換 → Listで返す
public class CompanyDAO {
public List<CompanyDTO> findAll() {
List<CompanyDTO> list = new ArrayList<>();
Connection con = null; PreparedStatement pstmt = null; ResultSet rs = null;
try {
con = DriverManager.getConnection(URL, USER, PASS);
pstmt = con.prepareStatement("SELECT * FROM m_company ORDER BY company_id");
rs = pstmt.executeQuery();
while (rs.next()) {
CompanyDTO dto = new CompanyDTO(); // DBの1行 → DTOの1インスタンス
dto.setCompanyId(rs.getInt("company_id"));
dto.setCompanyName(rs.getString("company_name"));
dto.setAreaName(rs.getString("area_name"));
list.add(dto); // ListにDTOを追加
}
} catch (SQLException e) { e.printStackTrace();
} finally {
// 必ずクローズ（finally で確実に）
try { if (rs != null) rs.close(); } catch (SQLException e) {}
try { if (pstmt != null) pstmt.close(); } catch (SQLException e) {}
try { if (con != null) con.close(); } catch (SQLException e) {}
}
return list; // List<CompanyDTO> をサーブレットへ返す
}
}4テーマを繋げると見えてくる「Webアプリの全体像」
今日学んだ4テーマを1本のコードフローとして繋げると、以下のようになります。これがMVCモデルに基づいたJava Webアプリの完成形です。
// ===== MVCモデル完成形：会社一覧表示機能の全体フロー =====
// 【テーマ① HTML：ブラウザからリクエスト送信】
// <a href="/companyList">会社一覧を見る</a>
// ↓ GETリクエスト送信
// 【テーマ③ サーブレット（Controller）】
@WebServlet("/companyList")
public class CompanyListServlet extends HttpServlet {
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// 【テーマ④ DAOを呼ぶ（ビジネスロジックはDAOに任せる）】
CompanyDAO dao = new CompanyDAO();
List<CompanyDTO> companyList = dao.findAll(); // ← 内部でSQLを発行
// JSP（View）へ渡すためにrequestにセット
request.setAttribute("companyList", companyList);
// JSPへフォワード（URLは変わらない）
request.getRequestDispatcher("/companyList.jsp").forward(request, response);
}
}
// 【テーマ② SQL（DAOの内部で発行）】
// SELECT company_id, company_name, area_name
// FROM testdb.m_company
// INNER JOIN testdb.m_area ON m_company.area_id = m_area.area_id
// ORDER BY company_id ASC;
// 【テーマ④ DTO：ResultSet → Javaオブジェクトへ変換】
// DBの1行 = CompanyDTOの1インスタンス → List<CompanyDTO> でサーブレットへ返る
// 【テーマ③ JSP（View）：EL式でスクリプトレスに表示】
// <c:forEach var="company" items="${companyList}">
// <tr>
// <td>${company.companyId}</td>
// <td>${company.companyName}</td>
// <td>${company.areaName}</td>
// </tr>
// </c:forEach>
// 【テーマ① CSS：外部ファイルで画面をデザイン】
// table { border-collapse: collapse; width: 100%; }
// td, th { border: 1px solid #ccc; padding: 8px; }4テーマはそれぞれ独立した技術ですが、Webアプリという1つのシステムの中で「画面 → 処理 → DB → 表示」という役割を担い、密接に連携しています。どのテーマが欠けても、Webアプリは成立しません。
また、各技術の「役割分担の鉄則」も今日のテーマに一貫して流れていました。
| 技術 | やること | やらないこと |
|---|---|---|
| HTML | コンテンツの構造・意味を定義する | 色・フォントなどデザインを書かない |
| CSS | 見た目・スタイルを定義する | コンテンツの意味に関与しない |
| サーブレット | リクエスト処理・DAOを呼ぶ・JSPへ渡す | SQL・JDBCコードを書かない |
| JSP | 受け取ったデータをHTMLとして表示する | 業務ロジック・DB処理を書かない |
| DAO | SQL発行・DB接続・CRUD操作 | HTTPリクエスト・HTMLの構造に関わらない |
| DTO/JavaBeans | データを保持・ビジネスロジックを持つ | DBアクセス・HTTP通信を行わない |
まとめ：今日の学びを3行で整理
今日カバーした内容は、Java Web開発のほぼすべての土台になる技術群です。最後に「今日の学びの核心」を3行でまとめます。
| # | テーマ | 今日の核心メッセージ |
|---|---|---|
| ① | HTML / CSS | 「HTMLは骨格、CSSは服」。この役割分担を守るだけで保守しやすいコードになる |
| ② | SELECT文 | WHERE・ORDER BY・GROUP BYの3つを自在に組み合わせるのが第一目標。?（PreparedStatement）でSQLは必ず安全に実行する |
| ③ | サーブレット / JSP | 「サーブレットは司令塔、JSPは表示係」。JSPにビジネスロジックを書くのが最大の落とし穴 |
| ④ | DAO / Model | 「DAO＝倉庫担当、DTO＝段ボール箱」。DB処理をDAOに隔離することで変更の影響範囲が最小限になる |
今日の4テーマを貫く一番大切な考え方は「役割分担」です。HTMLとCSS、サーブレットとJSP、DAOとDTO——それぞれが「自分の仕事だけをする」ように設計することで、修正が楽になり、チームで分業でき、バグが減ります。
次のステップは、今日の4テーマをすべて使った「会社一覧 → 詳細 → 登録 → 更新 → 削除」のフルCRUDアプリを実際に手を動かして作ることです。設計図（データの流れ）は今日学んだもので完成しています。あとはコードに落とすだけ！
各テーマの詳細については、シリーズ別記事もあわせてご活用ください。手を動かすことが一番の近道——今日学んだことをぜひ実際のコードで試してみてください！
📚 シリーズ記事一覧（今日の補講）
- 【Java基礎①】変数（プリミティブ型・参照型・スコープ）
- 【Java基礎②】メソッド（定義・引数・戻り値・命名規約）
- 【Java基礎③】クラス（設計図・インスタンス・カプセル化・コンストラクタ）
- 【Web基礎①】HTMLの基本構造とCSSの役割分担 ← 今日
- 【DB/SQL①】現場で使うSELECT文（データ調査編＆プログラミング編） ← 今日
- 【Java Web①】サーブレット＆JSPの本質と注意点 ← 今日
- 【Java Web②】DAOクラス＆Modelクラスの設計パターン ← 今日