第1章: はじめに

1.1 シリーズ紹介

この記事は、SEの皆さん向けのシリーズの一部です。このシリーズでは、ゼロからWEBアプリケーションの開発プロジェクトを進めるステップを詳しく説明します。目標は、WEB開発の基本的な概念を理解し、それを実際のプロジェクトに応用できるスキルを身につけることです。

今回作るプロジェクトの名前は「会社WEB資産管理システム」、英文：WEB Asset Portal System（以下略してWAPS）で、デモ環境を構築します。
※システムを構築する前に、システム名を事前に決定しておくと、次の工程が進行しやすくなります。

このシリーズでは、SEの基本から始めて、段階的にプロジェクトを進めていく予定です。それによって、どの読者でも理解しやすいように心がけています。

ソースコードのフルバージョンはgitに公開しております。(現時点では未完成)

1.2 プロジェクトの紹介

WAPS管理できるWEB資産の種類：

① 外部サイト：例えば、広く使われているGoogleや自社のホームページなどです。ただし、外部サイトをWAPSに埋め込むなので、クリックジャッキング攻撃を防ぐ対策が施されているサイトは埋め込むことができません。

② 内部サイト：企業のイントラネットなど、一般のアクセスできないサイトです。

③ SharePoint：外部サイトと同様に扱います。

④ NAS：理論的には、ブラウザを使用してNASにアクセスできますが、他の製品を導入する必要があるため、この記事では説明の対象外とします。

⑤ WAPSの管理機能：ユーザー登録、ロール登録などが含まれます。

デモ環境を構築するため、WAPSの管理機能は最小限にとどめます：

ログイン画面：ユーザー認証を行うための画面。
メニュー画面：ログイン者の権限に応じて表示されるメニューを提供。
ユーザー管理画面：ユーザーアカウントの作成、編集、削除などのユーザー管理機能。
※今後はユーザーの権限管理画面も追加する予定です。

プロジェクトイメージ図：

画面遷移：ログイン成功する場合、メイン画面に遷移する。

メイン画面の構成：左側はメニューエリア、右側はコンテンツエリアです

1.3 開発環境

このシリーズでは、以下の開発環境とツールを使用します。

開発環境OS: Windows 11 Pro
データベース: Oracle Database 21c Express Edition
SQLツール: Oracle SQL Developer 21.2.1
JAVAバージョン: 17
ビルドツール: Apache Maven 3.8.4
開発ツール: Spring Tool Suite 4 (STS)
ライブラリ: springboot、maven、mybatis、thymeleaf、ojdbc、lombok、jquery、jquery ui、Bootstrap

1.4 各ライブラリを一言で紹介

Spring Boot: Spring Bootは簡潔で効率的なアプリケーションの構築をサポートします。設定が簡略化され、生産性が向上します。Springの豊富なエコシステムと統合されており、多くの機能を提供します。
Maven: Mavenはビルドツールとして広く使用されており、依存関係管理が容易です。プロジェクトのライブラリ依存性を効果的に管理でき、ビルドプロセスが自動化されます。
MyBatis: MyBatisはオブジェクト関係マッピング（ORM）ツールで、SQLクエリとJavaオブジェクトのマッピングを簡素化します。SQLのカスタマイズが容易で、パフォーマンスが向上します。
Thymeleaf: Thymeleafはシンプルで直感的なテンプレートエンジンで、HTMLテンプレート内で動的なデータの表示と操作を行うのに適しています。Spring Bootとの統合が簡単で、デザイナーと開発者が協力しやすくなります。
OJDBC: Oracle Databaseとの接続に必要なJDBCドライバで、高性能なデータベースアクセスを提供します。Oracle Databaseを使用する場合、OJDBCは必須です。
Lombok: LombokはJavaの冗長なコードを削減し、JavaBeansやデータクラスをより簡潔に宣言できます。ゲッターやセッターなどのメソッドを自動生成することで、コードの可読性と保守性が向上します。
jQuery: jQueryはクライアントサイドのJavaScriptコードを簡略化し、クロスブラウザの互換性を向上させます。Ajaxリクエストやドキュメントマニピュレーションに便利です。
jQuery UI: jQuery UIは豊富なUIコンポーネントとウィジェットを提供し、ユーザビリティを向上させます。ドラッグアンドドロップ、カレンダー、ダイアログボックスなどの要素を組み込むことができます。
Bootstrap: Bootstrapはモバイルファーストなフロントエンドフレームワークで、レスポンシブなデザインとプロフェッショナルな外観を提供します。CSSやJavaScriptコンポーネントを使用することで、スタイリッシュなUIを迅速に構築できます。

これらのツールと環境を使って、プロジェクトを構築し、WEBアプリケーションの開発に取り組んでいきます。

第2章: 開発環境のセットアップ

開発環境のセットアップについて詳しく説明します。Windows 11 Proを使用して、Oracle Database 21c Express Edition、Oracle SQL Developer 21.2.1、Java 17、Apache Maven 3.8.4、Spring Tool Suite 4 (STS)などをセットアップします。以下は各ステップの詳細です。

2.1 Java 17のインストール

インストール手順は省略します。Oracleの公式ウェブサイトまたはOpenJDKのウェブサイトからJava 17のインストーラをダウンロードしインストールします。
インストール後、コマンドプロンプトまたはターミナルで java -version を実行して、正しくインストールされたことを確認します。

システム環境変数にJAVA_HOMEとPathを設定します。自分の場合：

JAVA_HOME:C:\Program Files\Java\jdk-17
Path：%JAVA_HOME%\bin\　を追加する

2.2 Oracle Database 21c Express Editionのインストール

Oracleの公式ウェブサイトから無償版Oracle Database 21c Express Editionのインストーラをダウンロードします。

インストーラを実行し、インストールウィザードに従ってデータベースを設定します。適切な接続情報とパスワードを設定します。
インストールが完了すると、Oracle Databaseが実行されるようになります。以下のサービスが確認出来たら成功です。

必要に応じてデータベースの設定やユーザーアカウントを作成します。

詳細手順書は以下のURLをご確認ください。

2.3 Oracle SQL Developer 21.2.1のセットアップ

Oracle SQL Developerの公式ウェブサイトから最新のバージョンをダウンロードします。
Oracle SQL Developerはインストール不要なので、解凍すれば使えます。
アプリケーションを起動し、Oracle Databaseに接続できることを確認します。

詳細手順書は以下の記事をご確認ください。

2.4 Apache Maven 3.8.4のセットアップ

Apache Mavenの公式ウェブサイトからMaven 3.8.4のバイナリアーカイブをダウンロードします。

インストールは不要だが、環境変数の設定が必要です。

ダウンロードしたアーカイブを適当なディレクトリに展開します。
MAVEN_HOME 環境変数を設定し、PATH にMavenの実行可能ファイルのパスを追加します。
コマンドプロンプトまたはターミナルで mvn -version を実行して、Mavenが正しくインストールされたことを確認します。

2.5 Spring Tool Suite 4 (STS)の導入

Spring Tool Suiteの公式ウェブサイトからSTS 4をダウンロードします。

いろんなバージョンありますが、今回はSpring Tools 4 for Eclipse 、Windows用のバージョンをダウンロードします。

ダウンロードしたアーカイブを解凍し、適当なディレクトリに配置します。

詳細手順書は他のQiitaにたくさん記事あるため今度は省けます。

STSを実行し、開発ワークスペースを設定します。実行成功の画面はこちらです。

Spring Toolにlombookをインストールする

公式サイトからからjarファイルをダウンロードする。今回ダウンロードしたのは、lombok-1.18.24.jarです。

lombookをインストールする
ダウンロードしたlombok-1.18.24.jarをダブルクリックし実行する、基本はstsの場所が自動的に見つけられるが、見つけられなかったら「Specify location」で指定してください。下記の画面が出たら、「Install/Update」ボタンを押したらインストール完了です。

インストール結果を確認する
Spring ToolのHelp -> About Spring Tool Suite 4をクリックし、Lombok v1.18.24 "Envious Ferret" is installed. という文言が出たらインストール成功です。

第3章: 実装

通常、プロジェクトを実装する際は、ログイン画面、メイン画面、そして各機能（ユーザー管理画面など）の順に進めることが多いですが、今回はより分かりやすくするために、異なる順序で進めることにします。

具体的な実装順序は以下の通りです：

1.プロジェクトの雛形を作成する
2.ユーザー管理画面を実装する
3.メイン画面（メニュー部分）を実装する
4.メイン画面（フレーム分割）を実装する
5.ログイン画面を実装する
この順序でプロジェクトを進めることで、より分かりやすくなることを期待しています。

3.1 Spring Tool Suite 4を使ってプロジェクトの雛形を作成する

詳細手順書は以下の記事をご確認ください。

3.2 ユーザー管理画面を実装する

Spring Tool Suite 4を使ってユーザー管理機能のCRUDを実装する。

詳細手順書は以下の記事をご確認ください。

当該バージョンのソース：

3.3 メイン画面（メニュー部分）を実装する

Spring Tool Suite 4を使ってWEBプロジェクトのメニュー画面を実装する。
詳細手順書は以下の記事をご確認ください。

当該バージョンのソース：

3.4 メイン画面（フレーム分割）を実装する

Spring Tool Suite 4を使ってWEBプロジェクトのメイン画面を実装する。
詳細手順書は以下の記事をご確認ください。

当該バージョンのソース：

3.5 セッション情報管理及びログイン画面を実装する

Spring Tool Suite 4を使ってWEBプロジェクトのログイン画面及びセッション管理機能を実装する。
詳細手順書は以下の記事をご確認ください。

当該バージョンのソース：

3.5.5 【番外編】WEBブラウザのサイズ変更に応じて表示エリアを動的に変更するを実装する

詳細手順書は以下の記事をご確認ください。

当該バージョンのソース：

3.6 多言語対応

Spring Tool Suite 4を使用してWEBプロジェクトを多言語対応にし、メッセージおよび画面の表示言語を切り替えられるように実装していきたいと思います。

メッセージのテーブル化及び多言語対応は以下の記事をご確認ください。

当該バージョンのソース：

3.6.5 番外編　MybatisのSQL文をLOG4J2ログに出力する

途中で番外編すみません、SQL文をログに出力したらいいかと思いまして、先に記事を作りました。

3.6.6 番外編　AJAXを使って画面の一部項目を刷新する

画面ラベルの多言語対応は作成中ですので、しばらくお待ちください。

ソースコードのフルバージョンはgitに公開しております。(現時点では未完成)

終わりに