入社したての新人がJavaのServletを用いてCRUDアプリを作ってみた！

2024年11月20日

入社したての新人がJavaのServletを用いてCRUDアプリを作ってみた！

皆さんはじめまして！業界未経験入社の中嶋です。
僕の会社ではナカジマが3人いるので、名前を呼ぶとみんな反応してくれます笑
先日、有給を使って6泊7日でタイに行ってきました！
マンゴーが大変甘くて美味しかったので、お土産にドライマンゴーを買ったのですが、酸っぱくて悲しかったです(ﾉД`)ｼｸｼｸ

今回は、入社したての新人でも簡単に作れるWebアプリを作っていきたいと思います！
以下のツールを使って開発環境を構築し、ユーザーアカウントのCRUDができるWebアプリを作っていきます。

■ Windows 10 ( Mac でも可)
■ Eclipse Version : 2023-12 (4.30.0)
■ Tomcat Version : 10.1.18
■ XAMPP Version : 8.0.30 / PHP 8.0.30
■ Apache Version : 2.4.58
■ MySQL (MariaDB) Version : 10.4.32

CRUDとは？

CRUD とは 4 つの操作の頭文字を取ったものになります。

Create (作成): データを新たに作成します。通常、データベースに新しいレコードを挿入する操作です。
Read (読み取り): データを取得します。データベースから既存のデータを取得する操作で、クエリや検索が含まれます。
Update (更新): データを変更・更新します。データベース内の既存のレコードを変更するための操作です。
Delete (削除): データを削除します。データベースから既存のレコードを削除する操作です。

⇒CRUD アプリは、データベースや情報システムなどで、基本的なデータ操作のできるアプリになります！

環境構築

XAMPP 編

ダウンロード&インストール

Cドライブ直下に C:\00_TechBlog\CRUDapp を作成します。
㌽ フォルダ名に日本語や長い文字列を含めると、プログラムが正常に動作しない可能性があります。
XAMPP にアクセスし、バージョン：8.0.30 / PHP 8.0.30 を ダウンロード します。
ダウンロードされた xampp-windows-x64-8.0.30-0-VS16-installer.exe ファイルを開きます(実行)。
ユーザーアカウント制御がでたらはいを押し、警告(Warning)も OK を押します。
Installation folder が出るまで Next を押します。
※ Select Components はデフォルトで問題ありません。
Installation folder がでたらインストール先フォルダを変更します。
1. 変更前：C:\xampp
2. 変更後：C:\00_TechBlog\CRUDapp\xampp
残りの Setup 画面は Next を押して、Finish まで進めます。
1. インストールが始まると結構長いです(体感は 10 分くらい？)。
2. Finish画面ではチェックを付けたままにしておくと自動で、XAMPPのコントロールパネルが開きます。
  
  起動場所：C:\00_TechBlog\CRUDapp\xampp\xampp-control.exe

Apache と MySQL 起動

XAMPPコントロールパネルを開きます。
Apache と MySQL の Start を押します。
それぞれにアクセス許可を与えます。

phpMyAdmin 起動

MySQL の Admin を押します。

※利用しない場合はXAMPPを閉じる前に必ず Stop を押し、停止します。
phpMyAdmin が起動します。

ECLIPSE 編

ダウンロード&インストール(解凍)

Pleiades All in One Eclipse 2023 から Windows x64 Java をダウンロードする
ダウンロード後 pleiades-2023-12-java-win-64bit-jre_20231211.exe ファイルを開きます(管理者として実行)。
1. ユーザーアカウント制御ははいを押します。 ※出ない場合もあります
2. 詳細情報 を押します。 ※出ない場合もあります
3. 実行を押します。 ※出ない場合もあります
作成先フォルダを変更し解凍を押します（解凍が始まる...体感 5 分くらい？）。
1. 変更前：C:\pleiades\2023-12
2. 変更後：C:\00_TechBlog\CRUDapp\pleiades2023-12

ECLIPSE 起動

C:\00_TechBlog\CRUDapp\workspace_CRUDapp フォルダを作成します。
C:\00_TechBlog\CRUDapp\pleiades2023-12\eclipse\eclipse.exe を開きます(実行)。
キャッシュのクリーンアップが開始されます(体感 1 分くらい)。
ワークスペース- ディレクトリーを変更し、起動を押します。
1. 変更前：../workspace
2. 変更後：C:\00_TechBlog\CRUDapp\workspace_CRUDapp

実装

データベース編

DB 作成

C:\00_TechBlog\CRUDapp\xampp\xampp-control.exe を開きます(実行)。
Apache と MySQL の Start を押します。
MySQL のAdminを押します。
データベース タブを選択します。
tech_blog と入力し作成を押します。

テーブル作成

SQL タブを選択し以下のクエリを実行します。
※やり直せるようにデータベースの削除から記載しますが、注意して取り扱ってください。

-- 既存の tech_blog データベースがあれば削除
DROP DATABASE IF EXISTS tech_blog;

-- 新しい tech_blog データベースを作成
CREATE DATABASE tech_blog;

-- tech_blog データベースを使用
USE tech_blog;

-- 既存の r_user テーブルがあれば削除
DROP TABLE IF EXISTS r_user;

-- r_userテーブルの作成
CREATE TABLE r_user (
  USER_NO INT AUTO_INCREMENT NOT NULL, -- ユーザー番号（自動採番）
  USER_ID INT NOT NULL, -- ユーザーID（必須）
  USER_NAME VARCHAR(255) NOT NULL, -- ユーザー名（必須）
  USER_PASSWD INT(8) NULL, -- パスワード（任意）
  USER_BIRTHDAY DATE NULL DEFAULT NULL, -- 誕生日（任意）
  DELETE_FLAG BOOLEAN NOT NULL DEFAULT false, -- 削除フラグ（false: 有効, true: 削除済み）
  PRIMARY KEY (USER_NO) -- 主キーはユーザー番号
) ENGINE = InnoDB;

オートインクリメントとは

オートインクリメント（自動採番）は、データベースに新しい行を挿入する際に、その行のプライマリキーの値を自動的に増分させる機能です。主にプライマリキーの値を一意にするために使用されます。

メリット:

各行に一意の数値が割り当てられるため、データの一意性が確保されます。
データの管理が容易になります。
同じ値が誤って挿入されるリスクが低減します。

デメリット:

データベースは新しい行の値を自動的に増分します。特定の値から始めたい場合は、初期値の管理が必要になることがあります。
分散環境や複数のデータベースサーバーを使用する場合、値の重複により競合や同期の問題が発生する可能性があります。

⇒オートインクリメントを利用することで、データベースの管理がより効率的になり、データの整合性を保つことができます。

データ挿入

SQL タブを選択し以下のクエリを実行する

-- レコードの挿入
INSERT INTO r_user (USER_ID, USER_NAME, USER_PASSWD, USER_BIRTHDAY, DELETE_FLAG)
VALUES
( 20240101, '20240101', 20240101, '2024-01-01', 'false'),
( 20240102, '20240102', 20240102, '2024-01-02', 'false'),
( 20240103, '20240103', 20240103, '2024-01-03', 'false');

ソースコード編

動的 WEB プロジェクト作成

ファイル(F)⇒ 新規(N)⇒ その他⇒ 動的 Web プロジェクトの順に押します。
新規動的 Web プロジェクト
1. プロジェクト名：CRUDapp
2. その他はデフォルトのまま
web.xml デプロイメントにチェックを付けます。
CRUDapp のプロジェクトが作成されます。

ソースコードの追加

i-Vinci_Blog-Java-CRUD-AppsリポジトリからダウンロードしたsrcフォルダをC:\00_TechBlog\CRUDapp\workspace_CRUDapp\CRUDapp配下にペーストし、置き換えます。
Eclipseのプロジェクト・エクスプローラーをリフレッシュします。

プロジェクトルート

src配下のプロジェクトルートが以下と同じか確認します。

C:\00_TechBlog\CRUDapp\workspace_CRUDapp\CRUDapp ※一部省略
|__ src
  |__ main
     |__ java
     |   |__ jp
     |      |__ co
     |         |__ controller
     |         |   |__ UserAddServlet.java
     |         |   |__ UserDeleteServlet.java
     |         |   |__ UserDeleteServlet_v1.java
     |         |   |__ UserEditServlet.java
     |         |   |__ UserRestoreServlet.java
     |         |   |__ UserServlet.java
     |         |__ model
     |            |__ DatabaseConnector.java
     |            |__ User.java
     |            |__ UserDao.java
     |__ webapp
        |__ META-INF
        |   |__ MANIFEST.MF
        |__ WEB-INF
        |   |__ lib
        |   |   |__ mysql-connector-j-8.3.0.jar(この後の手順で追加)
        |   |__ web.xml
        |__ login.jsp
        |__ userAdd.jsp
        |__ userEdit.jsp
        |__ userList.jsp

MVC モデルとは

MVC（Model-View-Controller）モデルは、ソフトウェア開発におけるデザインパターンの一つであり、アプリケーションの内部構造を構築するために使用されます。このモデルは、アプリケーションを3つの主要なコンポーネントに分割します。

Model（モデル）: ビジネスロジックやデータ処理を担当する部分で、データの操作や更新、バリデーションなどの機能が含まれます。
View（ビュー）: ユーザーインターフェースを表示する部分で、データの表示やユーザーからの入力を受け付けます。
Controller（コントローラ）: ユーザーからの入力を受け取り、それに基づいてModelとViewを制御する部分で、ビジネスロジックとユーザーインターフェースの間の仲介役として機能します。

⇒MVCモデルは、アプリケーションの構造化とメンテナンス性を向上させるために使用され、特に大規模なプロジェクトや複雑なアプリケーションに適しています。

フロントエンド（JSP）

ユーザーインターフェースの表示とユーザーの入力を受け付けます。
ユーザーからの情報をサーバーに送信し、結果を表示します。

View	処理詳細
login.jsp	ログイン画面
userAdd.jsp	新規データ入力画面
userEdit.jsp	データ編集画面
userList.jsp	データ一覧画面(削除・復元画面)

バックエンド（Java/Servlet）

CRUD 操作やビジネスロジックを担当します。
データベースとの通信やデータの処理は主にここで行います。

controller	処理詳細
UserAddServlet.java	データの新規追加
UserDeleteServlet.java	データの物理削除※1
UserDeleteServlet_v1.java	データの論理削除※1
UserEditServlet.java	データの編集
UserRestoreServlet.java	データの論理削除の復元
UserServlet.java	データの一覧表示

※1 論理削除と物理削除の違い

論理削除: データを残して削除フラグを立てる。復元可能。
物理削除: データを完全に削除。復元不可。

model	処理詳細
DatabaseConnector.java	データベース接続情報
User.java	ユーザー情報
UserDao.java	データベース操作

Mysql ドライバーの追加（超重要）

MySQL Community Downloads にアクセスした後、Connector/J 8.3.0 の Select Operating System : Platform Independent を選択し、ダウンロードする。
ダウンロードされたzipファイルを解凍し、mysql-connector-j-8.3.0.jar ファイルをコピーする。
C:\00_TechBlog\CRUDapp\workspace_CRUDapp\CRUDapp\src\main\webapp\WEB-INF\lib 配下にペーストする。
mysql-connector-j-8.3.0.jar ファイル⇒ 右クリック⇒ ビルド・パス(B) ⇒ビルド・パスに追加(A) の順で押す
参照ライブラリーに追加される

Maven プロジェクトへ変換（超重要）

元々動的プロジェクトではMySQLと接続が困難と勘違いしていたため。現段階では変換しなくても接続できるため不要

pom.xml：マッピングや設定

同上のため不要

実行編

Webサーバーの実行(画面表示)

Eclipse を開く。
C:\00_TechBlog\CRUDapp\pleiades2023-12\eclipse\eclipse.exe (実行)
リソースをサーバーに追加する。 Tomcat10_Java21 ⇒右クリック ⇒追加及び除去(A) の順で押す
CRUDapp ⇒追加 ⇒完了の順で押す
/CRUDapp/src/main/webapp/login.jsp ファイル ⇒右クリック ⇒デバック ⇒1サーバーでデバックの順で押す
Tomcat10_Java21 ⇒☑このプロジェクトを実行するときは常にこのサーバーを使用(P) ⇒完了(F) の順で押す
Googleなどのブラウザで http://localhost:8080/CRUDapp/login.jsp Login画面が開けば成功

DB接続

XAMPP Control Panelを開く
C:\00_TechBlog\CRUDapp\xampp\xampp-control.exe (実行)
MySQL の Start を押す
ブラウザの Login ボタンを押下後、 User List 画面にデータが挿入されていれば成功

知識をくれたサイト

既存の r_user テーブルを削除

   -- 1~3のやってることは一緒！
   -- 1
   DELETE FROM `r_user`;
   --auto_increment（オートインクリメント）の連番をリセット
   ALTER TABLE `r_user` auto_increment = 1;
   -- 2
   DROP TABLE `r_user`;
   -- 3
   DROP TABLE IF EXISTS `r_user`;

参考サイト：SQL文 DELETE・TRUNCATE・DROPの違い, AUTO_INCREMENT の使用

Mavenプロジェクトでのアプリの作り方

知識がないと動的Webプロジェクトを作った後にMavenプロジェクトに変換するミスをします。
参考サイト：Eclipseを使ってTomcat+JSP+Servlet+MySQLでメモアプリ作成

MySQL接続方法

今はこんな簡単に接続できます。時代の進歩は恐ろしい、、、
参考サイト：【Java】MySQLを絶対に接続させたい!!!～JDBCドライバの取得とJARファイル位置について～

MySQLでのエラー対処法

大事なデータがあるのにMySQLが起動しない事があり、環境構築をやり直せれば良いですが、そうもいかないとき助かりました。
原因を探ってもなかなかエラーにたどり着けないですよね。
参考サイト：XAMPP で MySQL が予期せずシャットダウンするエラー

TechBlog
株式会社i-Vinciの技術ブログ